I am trying to import a variable from a scss stylesheet into a vuejs component but I am getting an error. Importing it with #import works fine but not with #use.
colors.scss:
$color-x: blue;
contact.vue:
<style scoped lang="scss">
#use "../../css/colors";
.btn {
background: colors.$color-x;
}
</style>
Website throws this:
Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$color-x".
on line 22 of resources/vue/sections/contact.vue
>> background: $color-x;
------------------^
at Object../node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/sections/contact.vue?vue&type=style&index=0&id=60450740&scoped=true&lang=scss (app.js:28382)
at __webpack_require__ (app.js:52481)
at Module../node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/sections/contact.vue?vue&type=style&index=0&id=60450740&scoped=true&lang=scss (app.js:46766)
at __webpack_require__ (app.js:52481)
at Module../resources/vue/sections/contact.vue?vue&type=style&index=0&id=60450740&scoped=true&lang=scss (app.js:48663)
at __webpack_require__ (app.js:52481)
at Module../resources/vue/sections/contact.vue (app.js:47775)
at __webpack_require__ (app.js:52481)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/index.vue?vue&type=script&setup=true&lang=js (app.js:25818)
at __webpack_require__ (app.js:52481)
Related
I'm using Ionic with VueJs and JSON-Server. I'm calling a get request with an OnMounted, but when I run Ionic Serve I get the following error:
export 'default' (imported as 'Axios') was not found in 'axios' (module has no exports)
It still compiles, and when I click the page where the OnMounted is, I get this error:
ReferenceError: module is not defined
at eval (index.js?f8df:1:1)
at ./node_modules/axios/index.js (src_views_EventsPage_vue.js:277:1)
at __webpack_require__ (app.js:233:33)
at fn (app.js:486:21)
at eval (AxiosService.js:5:63)
at ./src/services/AxiosService.js (src_views_EventsPage_vue.js:73:1)
at __webpack_require__ (app.js:233:33)
at fn (app.js:486:21)
at eval (EventsService.js:12:71)
at ./src/services/EventsService.js (src_views_EventsPage_vue.js:84:1)
From what I can tell, the Axios index.d.ts file is as it should be, containing many exports. I've run npm i axios --save.
I use the same code in another project that does not run Ionic but has Vite and a few other things included.
Can anyone help me solve this error I get in my console when I run a ReactJS project
Uncaught ReferenceError: process is not defined
at ./node_modules/mysql/node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/mysql/node_modules/readable-stream/readable-browser.js (readable-browser.js:4:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/mysql/lib/protocol/sequences/Query.js (Query.js:7:1)
at options.factory (react refresh:6:1)
I have tried npm i -D react-error-overlay#6.0.9 and npm i process
I'm trying to import #project-serum/anchor to a Vue 3 project, with
import * as anchor from '#project-serum/anchor';
The project compiles fine, but when the component loads it throws an error:
VM28957:1 Uncaught (in promise) ReferenceError: require is not defined
at eval (eval at nodeWrap (sha256.js?6c27:1), <anonymous>:1:1)
at nodeWrap (sha256.js?6c27:83)
at createMethod (sha256.js?6c27:67)
at eval (sha256.js?6c27:501)
at Object.eval (sha256.js?6c27:518)
at eval (sha256.js:521)
at Object../node_modules/js-sha256/src/sha256.js (3.js:1335)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Module.eval (common.js?789d:1)
I was able to solve this by setting window.JS_SHA256_NO_NODE_JS = true
I am getting the following error when trying to build my bundle, do you know any reason why I might be having it?
somehow function from node_modules/setimmediate/setimmediate.js
function installNextTickImplementation() {
registerImmediate = function(handle) {
process.nextTick(function () { runIfPresent(handle); });
};
}
being replaced to by webpack
function installNextTickImplementation() {
registerImmediate = function(handle) {
{"env": {}}.nextTick(function () { runIfPresent(handle); });
};
}
which leads to
setImmediate.js:80 Uncaught SyntaxError: Unexpected token ':'
at Object../node_modules/setimmediate/setImmediate.js (main.js:989)
at __webpack_require__ (main.js:790)
at fn (main.js:101)
at Object.eval (main.js?5118:54)
at eval (main.js?5118:63)
at Object../node_modules/timers-browserify/main.js (main.js:1012)
at __webpack_require__ (main.js:790)
at fn (main.js:101)
at eval (vue.esm.js?a026:11993)
at Module../node_modules/vue/dist/vue.esm.js (main.js:1024)
It happens when I do the following import Vue from 'vue'
The problem is occurring when updating https://github.com/mrsteele/dotenv-webpack v1.7.0 to v3.0.0
I created a component library using vue-cli 3, and then pulled that into another repo to use the components. Now I am getting the error:
Uncaught Error: Module build failed: Error: Couldn't find preset "#vue/app" relative to directory "/{path_to_project}/node_modules/{vue_cli_app}"
at {path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293
at Array.map (<anonymous>)
at OptionManager.resolvePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275)
at OptionManager.mergePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264)
at OptionManager.mergeOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249)
at OptionManager.init ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368)
at File.initOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:212)
at new File ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:135)
at Pipeline.transform ({path_to_project}/node_modules/babel-core/lib/transformation/pipeline.js:46)
at transpile ({path_to_project}/node_modules/babel-loader/lib/index.js:50)
at Object.module.exports ({path_to_project}/node_modules/babel-loader/lib/index.js:175)
at {path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293
at Array.map (<anonymous>)
at OptionManager.resolvePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275)
at OptionManager.mergePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264)
at OptionManager.mergeOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249)
at OptionManager.init ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368)
at File.initOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:212)
at new File ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:135)
at Pipeline.transform ({path_to_project}/node_modules/babel-core/lib/transformation/pipeline.js:46)
at transpile ({path_to_project}/node_modules/babel-loader/lib/index.js:50)
at Object.module.exports ({path_to_project}/node_modules/babel-loader/lib/index.js:175)
at Object.__webpack_exports__.a (aggregation.bundle.js:13)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.<anonymous> (select.vue:1)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat.path (vue-multi-select.component.js:11)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat._extends (app-files.generated.js:86)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat.module.exports (app.js:111)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
This is coming from the autogenerated .babelrc in the vue-cli project:
{
"presets": [
"#vue/app",
"vue"
]
}
Is there a way to change the .babelrc reference so that it can be used when imported elsewhere?
I don't believe the correct way to do this would be to reference the .babelrc from the project importing the library. My solution would be:
Transpile the library prior to exporting
Build into a dist directory
Import the built dist directory into the project which is using the library.
I believe babel can do something simple like babel -d ./dist to build the directory, you can see the documentation here