I'm getting the following error from a few different libraries in my project, after adding the "stage-2" preset to my .babelrc. (Thats my assumption atm)
e.g. from the DatePicker class in React Native:
node_modules/react-native/Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js: You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type
How can I resolve this error?
I'm using React Native 0.31 and
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-preset-stage-2": "^6.17.0"
},
I too ran into this. Solved by updating my babel-core version by changing the entry in package.json to the latest (at the time of this writing)
// package.json
...
"babel-core": "6.17.0",
...
then running
rm -r node_modules/babel* && npm i
I had the same issue after updating babel-core and some babel plugins. In my case it was fixed by updating babel-cli (globally installed with npm), which was a few versions behind and not using the right babel-core version.
I encountered this after an npm update, struggled for several hours to find a fix, but ultimately solved it via rm -rf node_modules && npm install. I hate npm.
I found this issue is caused by a lower version babel-types, so the solution is just:
npm install babel-types
or a clean npm install:
git clean -fdx
npm install
If your babel-cli is out of date, you might get the same error. Try updateing babel-cli using npm install babel-cli -g or update your local babel-cli and reference it in your package.json scripts.
Also do npm i -D babel-plugin-transform-runtime and add "plugins": ["transform-runtime"] to your .babelrc
Had a similar situation as #Thomas; a globally installed version of babel-cli which was behind. I can recommend not installing it globally, instead running babel through npm scripts.
Local install:
npm install babel-cli --save-dev
In your npm scripts:
"babel": "babel script.js"
Related
So, I had used sass before using npm install node-sass for my reactjs project. I'm now working on a new project and wanted to use sass again. With the same syntax npm install node-sass to get it installed, I continued to get
./src/components/Main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/Main.scss)
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
Or
to import sass files, you first need to install node-sass. run `npm install node-sass` or `yarn add node-sass` inside your workspace
...
...
I followed the instructions to have sass installed from the links npmjs
sass-lang
using these syntaxes
brew install sass/sass/sass
npm install -g sass
but I'm still encountering either errors I mentioned earlier.
I tried deleting the node-module folder, package-lock.json and reinstalled node-modules. That still did not fix the error. Also, I followed how others got around fixing Node Sass version 5.0.0||6.0.0|| 7.0.0 incompatibility issue but that did not fix mine.
I'm seeking help now.
Don't use node-sass anymore
You can easily fix it by the following.
npm uninstall node-sass
npm install sass
This is because node-sass is now deprecated. You will have to install its new version which is sass. Sinc it works all the same and better, this will easily fix the issue without making any additional changes.
And all Works well !
But if you still prefer to use node-sass
You can use the following table to install the appropriate version node-sass for your installed Node.js version which you can check by the command node --version.
npm install node-sass#(your version)
update sass-loader, or remove and install again.
Try this: In your packege.json file, delete "node-sass": "^4.12.0" and replace it with "sass": "". This did it for me.
You can follow these two steps:
Uninstall your node-sass:
npm uninstall node-sass
Install old version node-sass:
npm install --save-dev --unsafe-perm node-sass#4.14.1
It's okay now
The answer for me was to update react-scripts to 4.0.3. I couldn't do the latest version of react-scripts because it still requires a bunch of hacks to make packages work that had polyfilled modules automatically loaded before.
Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
at module.exports (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/binding.js:13:13)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/gulp-sass/index.js:166:21)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
this error occures when I start to use gulp. is there a solution for using gulp-sass with apple m1? thanks
I also had issues installing node-sass on M1, and ended up using the opportunity to replace it with sass, as recommended on the LibSass deprecation notice.
https://sass-lang.com/blog/libsass-is-deprecated
If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.
As mentioned by #Ti Hausmann you can try with:
npm uninstall node-sass
npm install --save-dev sass
The replacement was completely smooth, it worked on M1, and I couldn't notice any performance impact locally or on the CI.
For npm > 6.9 you can switch your dependency to dart-sass/sass with just one line and from there just use sass as you would before.
npm install node-sass#npm:sass
I think, you are using an M1 Mac. And node-sass currently doesn't support it natively. See: https://github.com/sass/node-sass/issues/3033
For now you can set target arch for running it through Rosetta with:
rm -rf node_modules
npm install --target_arch=x64
I ran into the same error when developing a Vue.js project with node-sass.
I worked around this issue by downgrading to Node version 14.
I’ve done this with n, a Node’s version manager application. See this answer: https://stackoverflow.com/a/50287454.
Check which node version you’re using
$ node -v
v16.3.0
Install n
$ npm install -g n
Get list of available Node versions you can install
$ n ls-remote --all
16.3.0
16.2.0
..
15.14.0
15.13.0
..
14.17.0
14.16.1
..
Install Node version 14
$ sudo n install 14
Just adding for completeness of the answer, that I came across this issue when using the serverless framework (https://www.serverless.com/).
I was receiving a node gyp build error using both Node 16 and 17.
Using nvm I installed node version 14 and this solved my issue.
The steps to fix were:
nvm install v14
nvm use 14
Then I was able to do a yarn command which installed and built correctly.
Here is the official recomendation per gulp-sass Issue #803 - Apple M1 Chip Support
Switch to the sass compiler: Instructions
TL;DR:
Install version 5 of node-sass that does not include a default Sass compiler:
npm install sass gulp-sass --save-dev
or, Yarn
yarn add sass gulp-sass --save-dev
Explicitly set your compiler in your gulpfile:
const sass = require('gulp-sass')(require('sass'));
or, for ES6 modules
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
yarn add sass or npm install sass
replace "node-sass": with "sass": in package.json
rm -rf node_modules && npm install
Worked for me on my M1 MBP.
Reinstall node to version 14 by downloading from here
https://nodejs.org/dist/v14.0.0/
in your project folder run npm rebuild node-sass
Switching to Sass works just great in m1. As pointed in the top answers. And we should always be using sass in place of node-sass now as it's deprecated.
Here I want to point to one case that some may fall in. That if it's the case I think that would save you some time.
Case
You go and remove node-sass through npm uninstall or even by doing npm install node-sass#npm:sass as pointed in the second answer. You removed node-modules and package-lock.json.And still having the same problem and somehow node-sass is getting compiled.
Not working even after trying to install sass?
If so the case. Make sure to check your dependencies versions. A good chance some of them depends on node-sass on there old versions.
Ex:
"sass-loader": "^8.0.2",
"styles-loader": "^1.0.2"
update the version to latest =>
"sass-loader": "^12.4.0",
"styles-loader": "^3.0.0"
That should do it. And make sure to check all the dependencies that can depend on node-sass and update them.
If for some reason that still is a problem. You can try adding
"optionalDependencies": {
"node-sass": "*"
}
to package.json. I don't think it's necessary though.
This command worked for me,
npm uninstall node-sass -g && npm cache clean -force && npm install node-sass
I have struggle lot with issue my my brand new macOS Monterey M1 Chip Macbook Pro. None of solutions work except It's fix when I have set target arch for NPM installation using below command.
npm install --target_arch=x64
I am trying to install rn-fetch-blob#0.10.15. but it's automatically installing the latest version i.e 0.10.16. I tried to install as follows,
npm install rn-fetch-blob#0.10.15
as per this solution, it should work as expected. But not working in my case.
Any help is appreciated.
Directly change your package.json file:
"dependencies": {
"rn-fetch-blob": "0.10.15",
...
}
And run: npm install --save
NOTE: With npm 5 and above you don't need the --save flag and package-lock.json file gets updated every time you do npm install
After updated Node (upto v8.6.0) and npm (upto v5.5.1) I cannot execute command npm install.
After npm install I've error message:
npm ERR! Cannot read property '0' of undefined
What's trouble or I need downgrade node/npm ?
I had the same problem.
I removed both node_modules and package-lock.json and then did:
npm install
And it worked.
Edit by #OwlyMoly
Due to new updates and the restriction to old dependencies in package-lock.json is causing this conflicts. By doing npm install won't fix this issue. Instead by ditching npm_modules and package-lock.json and doing npm install will load a new node_modules and that supposed to be required by package.json. You have to commit the new package-lock.json along with your latest changes of the project.
Do 2 steps bellow (Window):
rm -rf ./node_modules to remove node folder
rm package-lock.json to remove package-lock.json file
then npm install to re-install the node modules
Just download and install latest Yarn which is also a node package manager, developed by facebook, but has a much better dependency management. Also update your node cli (optional).
And then, install your dependencies using yarn:
yarn install
or
yarn // short version of yarn install
No errors!
You can continue to use npm after you have installed all dependencies with yarn or continue with yarn....it's your choice.
I've made some tests:
nodejs#8.6.0 npm#5.5.1 - I have trouble and the test fails
nvm use 8.5.0
nodejs#8.5.0 npm#5.5.1 - I have trouble and the test fails
nvm use 8.4.0
nodejs#8.4.0 npm#5.5.1 - I have trouble and the test fails
npm install npm#^5 -g
nodejs#8.4.0 npm#5.4.2 - I have trouble and the test fails
nvm use 8.6.0
npm install npm#^4 -g
nodejs#8.6.0 npm#4.6.1 - no trouble, this fixes it.
Seems to be an issue with a combination of factors.
Some workarounds here:
https://github.com/npm/npm/issues/18238
npm 5.3.0 is broken for windows 10 after upgrading the nodeJS.
You should downgrade the npm, it is a temporary solution but works fine.
npm install -g npm#5.2.0
For me (npm#6.9.0) solved the issue by deleting node_modules and performing npm install, but without removing package.json.lock file.
Just remove both node_modules and package-lock.json and run: npm install
or
Just run: npm install -g npm#latest to upgrade it to the latest version
Try with nvm(Node Version Manager).it help you to install any node version for any project without any Error.
I found same problem when using npm version 5.5.1 to install babel-preset-stage-0
Solution:
I downgraded npm to version 5.2.0 and try to install again then it can solve the issue.
npm i -g npm#5.2.0
npm i -D babel-preset-stage-0
I bumped into this issue using nvs (Node Version Switcher - https://github.com/jasongin/nvs) node#10.15.3 and npm#6.9.0. The reason was a local package I had linked with npm link. The solution was to remove that folder.
In my case reinstalling node_modules have not fixed this issue.
Problem was with one *.ts file which was missing in source codes.
Do not know why It was not displaying compilation error, but adding this missing file to repository solved this issue.
Upgrading npm to version 7.5.4 did the job for me.
npm install -g npm#latest
What worked for me:
npm ci
Install a project with a clean slate
docs: https://docs.npmjs.com/cli/v7/commands/npm-ci
Deletes node_modules and installs everything based on package-lock.json, so no need to regenerate that
I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder
1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.
webpack is not recognized as a internal or external command,operable program or batch file
Better solution to this problem is to install Webpack globally.
This always works and it worked for me. Try below command.
npm install -g webpack
As an alternative, if you have Webpack installed locally, you can explicitly specify where Command Prompt should look to find it, like so:
node_modules\.bin\webpack
(This does assume that you're inside the directory with your package.json and that you've already run npm install webpack.)
I had this issue for a long time too. (webpack installed globally etc. but still not recognized)
It turned out that I haven't specified enviroment variable for npm (where is file webpack.cmd sitting)
So I add to my Path variable
%USERPROFILE%\AppData\Roaming\npm\
If you are using Powershell, you can type the following command to effectively add to your path :
[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")
IMPORTANT : Don't forget to close and re-open your powershell window in order to apply this.
npm install -g webpack-dev-server will solve your issue
Try deleting node_modules in local directory and re-run npm install.
Maybe a clean install will fix the problem. This "command" removes all previous modules and re-installs them, perhaps while the webpack module is incompletely downloaded and installed.
npm clean-install
Add webpack command as an npm script in your package.json.
{
"name": "react-app",
"version": "1.0.0",
"scripts": {
"compile": "webpack --config webpack.config.js"
}
}
Then run
npm run compile
When the webpack is installed it creates a binary in ./node_modules/.bin folder. npm scripts also looks for executable created in this folder
Webpack CLI is now in a separate package and must be installed globally in order to use the 'webpack' command:
npm install -g webpack-cli
EDIT: Much has changed. Webpack folks do not recommend installing the CLI globally (or separately for that matter). This issue should be fixed now but the proper install command is:
npm install --save-dev webpack
This answer was originally intended as a "work-around" for the OPs problem.
We also experienced this problem and I like all the answers that suggest using a script defined in package.json.
For our solutions we often use the following sequence:
npm install --save-dev webpack-cli (if you're using webpack v4 or later, otherwise use npm install --save-dev webpack, see webpack installation, retrieved 19 Jan 2019)
npx webpack
Step 1 is a one-off. Step 2 also checks ./node_modules/.bin. You can add the second step as a npm script to package.json as well, for example:
{
...
"scripts": {
...
"build": "npx webpack --mode development",
...
},
...
}
and then use npm run build to execute this script.
Tested this solution with npm version 6.5.0, webpack version 4.28.4 and webpack-cli version 3.2.1 on Windows 10, executing all commands inside of a PowerShell window. My nodejs version is/was 10.14.2. I also tested this on Ubuntu Linux version 18.04.
I'd advise against installing webpack globally, in particular if you are working with a lot of different projects each of which may require a different version of webpack. Installing webpack globally locks you down to a particular version across all projects on the same machine.
npx webpack
It is worked for me. I'm using Windows 10 and I installed webpack locally.
For me it worked to install webpack separately. So simply:
$npm install
$npm install webpack
I'm not sure why this should be necessary, but it worked.
Just run your command line (cmd) as an administrator.
I've had same issue and just added the code block into my package.json file;
"scripts": {
"build": "webpack -d --progress --colors"
}
and then run command on terminal;
npm run build
you have to install webpack and webpack-cli in the same scope.
npm i -g webpack webpack-cli
or,
npm i webpack webpack-cli
if you install it locally you need to call it specifially
node_modules/.bin/webpack -v
Install WebPack globally
npm install --global webpack
I had this issue when upgrading to React 16.12.0.
I had two errors one regarding webpack and the other regarding the store when rendering the DOM.
Webpack Error:
webpack is not recognized as a internal or external command,operable program or batch file
Webpack Solution:
Close related VS Solution
Delete node_modules folder
Deleted package-lock.json
npm install
npm rebuild
Repeated this 2-3 times
Store Error:
Type Store<()> is not assignable to type Store<any, AnyAction>
Store Solution:
Suggestions to update my React version didn't fix this error for me, but irrespective I would recommend doing it.
My code ended up looking like this:
ReactDOM.render(
<Provider store={store as any}>
<ConnectedApp />
</Provider>,
document.getElementById('app')
);
As per this solution
This below-given commands worked for me.
npm cache clean --force
npm install -g webpack
Note - Run these commands as administrator. Once installed then close your command prompt and restart it to see the applied changes.
If you create a boilerplate folder for your JS projects so that you can use JS Modules, webpack and Babel are great tools.
Don't install webpack globally and after installing the most recent versions of both, your package.json file will be loaded up and ready to copy for future projects.
Make sure to delete the node_modules folder to decrease file size in your boilerplate folder and then to reinstall node_modules use npm install.
I forgot to run npm install and kept getting this error when trying to run my webpack dev-server until I realized I needed to run npm install to install node_modules and then it worked.
If you have just cloned a repo, you first need to run
npm install
The error your getting will be generated if you are missing project dependencies. The above command will download and install them.
I got the same error, none of the solutions worked for me, I reinstalled node and that repaired my environment, everything works again.
I also Face the same issue this command works for me
npm install --save-dev webpack
Try this folks, the cli needs to be updated to the latest version
npm install --save-dev #angular/cli#latest
credit goes go to R.Richards
https://stackoverflow.com/a/44526528/1908827
The fix for me was locally installing webpack as devDependency. Although I have it as devDependencies it was not installed in node_modules folder. So I ran
npm install --only=dev
Sometimes npm install -g webpack does not save properly. Better to use npm install webpack --save . It worked for me.
I had this same problem and I couldn't figure it out. I went through every line of code and couldn't find my error. Then I realized that I installed webpack in the wrong folder. My error was not paying attention to the folder I was installing webpack to.