I am trying to get an app up and running with Vue 2 and everything was fine until I tried using the node-sass and sass-loader packages. I started getting errors and after investigation, it looks like I need to be using webpack 5+ for the latest node-sass package to work. After poking around it looks like when I created the project it defaulted to webpack version 4.46.0.
I updated my vue-cli to the latest version as per the instructions on the official page and then tried re-initializing a new project and still have the same issue. Currently, I have #vue/cli 4.5.12 which looks to be the latest (I think).
I am initializing the app with vue create <app-name> and I am using the default configs. I did find this page which says "migrating from v4" which perhaps implies there might be a higher version of vue-cli but again I followed all the instructions to no avail, so not sure if I am just missing something here.
I am pretty novice in Vue and not sure what additional info I should provide to make this useful, but I've searched all over and for the life of me cannot figure out what is going on.
From what I found out on GitHub, the latest stable version - 4.5.12 - of Vue CLI still uses Webpack 4: https://github.com/vuejs/vue-cli/blob/v4.5.12/package.json .
Considering that, the easiest solution in my opinion would be to just downgrade sass-loader to version 10 with npm install sass-loader#10 for example, as suggested here: https://stackoverflow.com/a/66087132/1505369.
You could try using a beta version of vue-cli, as I tried, by updating both #vue/cli-service and, I believe, all the vue-cli plugins to version 5.0.0-beta.0, with npm install #vue/cli-service#5.0.0-beta.0 #vue/cli-plugin-babel#5.0.0-beta.0 #vue/cli-plugin-eslint#5.0.0-beta.0 #vue/cli-plugin-vuex#5.0.0-beta.0. It should end up installing and using Webpack 5. For me personally though, it hasn't really solved the issue, as the new error occurred:
ERROR TypeError: The 'compilation' argument must be an instance of
Compilation TypeError: The 'compilation' argument must be an instance
of Compilation
// ...
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.
After updating to latest stable version of library ngx-masonry 14.0.0 tests failed. They had release yesterday (24.10.2022.) and here is the link to their changelog: https://github.com/wynfred/ngx-masonry/blob/master/CHANGELOG.md
Basically they added Ivy build since they were using ViewEngine on older versions. I suppose that this error is connected to that migration to newer Angular compiler. On project we use Angular version 14.
After running npm i ngx-masonry#14.0.0 update was successful without any vulnerabilities.
In order for me to test it, I run ng test for my Angular application to make sure everything is fine. The failing test is basically the basic one which tests if the component is getting created. The following error was thrown in couple of components that rely on ngx-masonry library: ReferenceError: require is not defined
Since this is quite fresh issue (<24hrs old) probably more developers will run into it when they upgrade version to 14.
Link to the issue opened right now on their GitHub repo: https://github.com/wynfred/ngx-masonry/issues/98
Maybe we are missing something or this could be solved easily. :)
The owner of the library have just released 14.0.1 version which contains the fix. After you run npm i ngx-masonry#14.0.1 everything should be fine. Tests are passing as expected and app compiles successfully.
I was trying to upgrade quasar framework from quasar 1 to quasar 2 which is based on vue 3 where previous version was based on vue 2
not finding any trace of the error
console of quasar dev dependency not found core-js/modules/es.typed-array.at.js
Problem resolved, I just need to install core-js package.
but i couldn't think of core-js.
Because this project is running as it is (without core-js) for a very long time no problem happend, i found the error just after upgrading the project.
So i thought it was quasar 2 upgrade problem but its not.
Core js added in quasar at some point, most probably my project is not needed to use that package anywhere that's why I didn't see any error till now.
I am trying to install react-form-input-fields in my React project:
npm i react-form-input-fields
but it is showing an error:
My React version is ^17.0.2, Node version v14.18.1. Will this package only work up to React 16 version?
Will this package only work up to React 16 version?
When you get a message like this, there's always a chance it will work anyway but the authors of the package don't guarantee it and likely don't test it. You can install with npm i --legacy-peer-deps react-form-input-fields (or a number of other ways, but that's both the easiest and least likely to do something terribly wrong) and then test a lot to see how it goes. Or you can use react#16 instead of react#17.
In my project, I am using falcor which happen to have Rxjs as a dependency which has a known problem with webpack.
So far after following what the previous link says everything works fine.
Alongside I am using concurrently as a DevDependency, which has Rxjs as a dependency but with a newer version then falcor, when I compile my scripts with webpack I get an error in the browser:
Uncaught TypeError: Cannot read property 'prototype' of undefined
at inherits.inherits.Rx.internals.inherits
I solved the problem by installing Rx as a dependency in my project with the version used by falcor.
Here I am asking is there any solution with either yarn or npm to solve the problem without adding Rx as a dependency.