i am trying to add scss to my webpack / babel configuration but when running npm run build it throws me the following error:
Since this is my first time using webpack as well as babel, I honestly have no clue what I have to change.
I created a repo with all my files. And did a screenshot of the error message. If you need any other information just tell me.
It would be awesome if we could fix my (probably garbage code) up to the point where it is running.
Thank you so much!!!
You need to try sass-loader
npm install sass-loader node-sass webpack --save-dev
For more info please look at this https://webpack.js.org/loaders/sass-loader/
Related
I am new to coding and would appreciate some help with this I get the following error when I try to run my react app: npm run start
Failed to compile.
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack:
/Users/abc/node_modules/postcss-loader/dist/utils.js
/Users/abc/node_modules/postcss-loader/dist/index.js
/Users/abc/node_modules/postcss-loader/dist/cjs.js
/Users/abc/node_modules/loader-runner/lib/loadLoader.js
/Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
/Users/abc/node_modules/webpack/lib/NormalModule.js
/Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
/Users/abc/node_modules/react-scripts/config/webpack.config.js
/Users/abc/node_modules/react-scripts/scripts/start.js
(#/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack:
/Users/abc/node_modules/postcss-loader/dist/utils.js
/Users/abc/node_modules/postcss-loader/dist/index.js
/Users/abc/node_modules/postcss-loader/dist/cjs.js
/Users/abc/node_modules/loader-runner/lib/loadLoader.js
/Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
/Users/abc/node_modules/webpack/lib/NormalModule.js
/Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
/Users/abc/node_modules/react-scripts/config/webpack.config.js
/Users/abc/node_modules/react-scripts/scripts/start.js
(#/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)
Thank you so much
I've tried updating to the latest version of node and npm, however, that did not help. I've also verified my code several times as I'm mostly practicing along with a course. Thank you.
As it appears this error will temporarily get fixed by installing the latest version of Node.js.
So to fix this follow these steps:
Download and install the latest Node.js version (recommended for most users, which is 16.15.0 at this moment).
Delete your node_modules directory from your project. Then you can optionally clear npm cache with npm cache clean and verify it with npm cache verify.
Delete package-lock.json/yarn.lock file.
Reinstall all of the dependencies and create a new dependency tree using one of the following commands: npm i/npm install/yarn/yarn install.
Note1: If in any case, you use node-sass in React projects yet, it is recommended to use sass instead.
Note2: In some cases skipping step 1 will also work as expected, but I recommend upgrading the Node.js version if you do not have other dependencies to prevent that.
Note3: As #IvaniltonBezerra mentions in the comments, some app builds may throw errors, since upgrading Node.js to its latest version will upgrade the npm as well it may not compatible with your current dependency tree in production, so to prevent such a problem you have to use --legacy-peer-deps to restore the old behaviour of the old dependencies.
Update
This is now seem to be permanently solved in PostCSS Preset Env and following the above steps with skipping step 1 will also solve the problem.
When i try to npm run serve it stops at 98% and :
ERROR
Failed to compile with 1 error
This dependency was not found:
* #/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js
To install it, you can run: npm install --save #/components/HelloWorld.vue
I looked up for some sources but never helped. Even installing HelloWorld.vue turns an error.
It looks like one of your files is trying to load a local component called HelloWorld.vue and it may not exist in your project structure. You shouldn't try to "install" it, but rather head to the Home.vue file where this error is being triggered from (see Home.vue at th end of the error message?). Then ask yourself, do you actually want to load HelloWorld.vue?
I imagine you're following some sort of "getting started with Vue" guide and you've been instructed to include that file. You'll have to either create that file in the {YOUR_PROJECT}/src/components/ folder, or remove the code that's trying to load it.
Alternatively, this could be a configuration error in which you're trying to use the # alias but it hasn't been setup in webpack properly. Please include more info if this doesn't solve your problem.
Maybe Vue Js cli is not installed on server
// to install vue on ubuntu
npm install -g #vue/cli
// check if it was installed successfully
vue --version
#vue/cli 4.1.2
I just started using Laravel Mix which is using webpack. I'm having some issues resolving dependencies.
I tried to install l20n with npm install l20n, added it to my project by adding require('l20n'); and then I ran npm run dev only to be told the following:
ERROR Failed to compile with 1 errors
This dependency was not found:
* fs in ./~/l20n/dist/bundle/node/l20n.js
Alright, so I figured I had to install fs too, issuing npm install fs and then I ran npm run dev again, but I get the exact same message. What am I doing wrong?
Ok, I checked out the source and I think I know what the issue is. The lib you are using is supposed to run in a node environment.
So, in your webpack configuration add this:
target: 'node'
For more info on targets see this
This is my problem:
I've installed a yeoman angular app and now i run "grunt serve".
I've installed this. Maybe i did something wrong while installing compass. Could it be a gruntfile.js problem?
Edit (For User555's Comment):
After trying to install grunt-contrib-compass i get this:
Information:
I see that this is already in the package.json and it is installed already through npm:
This is compass specific version error. Follow the discussion here: https://github.com/Compass/compass/issues/1618. You will need to updatecompass version or rollback to 0.12.3.
For those who experience the same problem: I dont know what i did wrong with the gem install sass stuff (it shouldnt be that hard to type this in the cli you might think).
No it isn't that hard and it is installed so all dependencies should be installed and ready for grunt-contrib-compass / grunt-contrib-sass (I tried with both)
Now i solved it with this it is a compiler in c++ so i dont need that stuff mentioned above... So actually I dont really know what was my mistake.. well now i can compile my scss files properly.
I have created a npm module with es6. You can see it on github here.
There are some scripts in the package.json file which should ensure that the es6 modules get built. It works when running npm publish and npm install when in the context (directory) of the npm module. Running npm install in another project (ie including the module as a dependency) does not however build the es6 modules. There don't seem to be any errors in the npm-debug.log file either.
I'd really like to understand why.
It was caused by the lack of a .npmignore file. As there wasn't one, npm was using the .gitignore file instead. This filters out the dist/ folder which I don't want in source control. This commit fixed the issue
Your script is missing an install (or postinstall) script.
If you are building the code with a script on the prepublish hook, then you don't need it to be built again when others install it. It should ship with the built ES6 code.
In fact, you probably want to add your src directory to your .npmignore file, so that it doesn't ship with any JS that can't be used directly.