I run into a problem when installing gatsby plugins.
My Setup:
npm install -g gatsby-cli
gatsby new my-app
gatsby develop
When I try to install a plugin from the Gatsby library im getting this error message after installing the plugin:
Error: Invalid hook call. Hooks can only be called inside of the bo
dy of a function component. This could happen for one of the follow
ing reasons:
You might have mismatching versions of React and the renderer (s uch as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See fb.me/react-invalid-hook-call for tips about how to deb ug and fix
this problem.
Is there something wrong with my dep tree?
├─┬ gatsby#2.23.10
│ └─┬ gatsby-cli#2.12.50
│ └── react#16.13.1 deduped
└── react#16.13.1
According to the comments above the solution was:
Removing node_modules and .cache folder, reinstalling dependencies via npm install and gatsby develop.
Related
I am migrating an existing react app to Nextjs to improve the routing and take advantage of some of the features. I am running into an error that I cannot troubleshoot.
I installed the dependencies of the original application using
npm install. And after migrating the dependencies in the package.json.
When I run
npm list react
I receive all of these dependency errors. Nextjs requires react ^18.2.0 currently.
npm list react error
Is there something wrong with the versioning of these peer dependencies and using the current version of react? Is there a simple way to troubleshoot this other than rewriting the code to use different packages?
React is specified as ^18.2.0 in the dependencies in the package.json.
Please check your package.json and add react ^18.2.0 to the dependencies list and run npm i again. You'll need to delete the package-lock.json file first.
Or just run:
npm i react react-dom #types/react #types/react-dom
You can Try to delete your package-lock file and run rm -rf node_modules, npm cache clean --force, and then run npm i again. Hope it helps!
I have multiple React repos cloned from gitlab within my work folder. I want to implement a work-wide eslint configuration, whereby every project has the same eslint rules. As such, I want to first npm install eslint#7 --save-devevery repo (this repo comes with React best-practice eslint recommendations).
Is there way to npm install for every repo once from one folder above? I don't want to install it globally.
I will then use a bash script to add a eslintrc file to each repo at root level.
example of repos:
work dir
├── react-app-one
├── react-app-two
├── app-three
├── app-four
├── app-five
Look at npm workspaces since this does exactly what you ask for
I want to delete version 6.0.2.
npm list react-router-dom
zkzk1123#0.1.0 /Users/123/Desktop/
├─┬ #storybook/addon-links#6.4.8
│ └─┬ #storybook/router#6.4.8
│ └── react-router-dom#6.0.2
└── react-router-dom#5.3.0
I tried both npm uninstall react-router-dom, npm uninstall react-router-dom#6.0.2 but #5.3.0 is deleted but #6.0.2 is not, what should I do? I want to delete it.
Your question is not clear. Do you want to delete a version of npm or a version of react-router-dom? To delete a version of react-router-dom, I would suggest you run ‘’’npm uninstall react-router-dom’’’ and then install the required version by running ‘’’npm i react-router-dom#5.3.0’’’
If you are using vscode, you can directly search your folder for the react-router-dom#5.3.0 you should see it in a package.json file -> delete that line from the dependencies -> delete yarn.lock or npm.lock -> delete node_modules -> run npm install or yarn if using yarn
It's resolved.
After changing all #storybook libraries to #5 version, deleting node_modles and package-lock, and reinstalling with yarn , react-router-dom#6 was not installed.
npm uninstall react-router-dom
restart npm, finally
npm i react-router-dom
I have a react.js project and have just gotten started with testing. I installed the react-testing-library and jest to get started with it.
However, when I run
npm test
I get the following error.
/Users/Tomascdmota/Downloads/Trust-Motores-main/node_modules/react-scripts/node_modules/jest-cli/build/cli/index.js:40
execute(argv, argv.projects, result => {
^
TypeError: execute is not a function
at Object.run (/Users/Tomascdmota/Downloads/Trust-Motores-main/node_modules/react-scripts/node_modules/jest-cli/build/cli/index.js:40:3)
at Object.<anonymous> (/Users/Tomascdmota/Downloads/Trust-Motores-main/node_modules/react-scripts/scripts/test.js:104:6)
at Module._compile (node:internal/modules/cjs/loader:1091:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10)
at Module.load (node:internal/modules/cjs/loader:971:32)
at Function.Module._load (node:internal/modules/cjs/loader:812:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47
My jest version is 26.6.0
I haven't added anything.
I have deleted the node_modules, package-lock.json, yarn.lock and removed jest from the dependencies/DevDependencies. After that I ran yarn install.
I still get that same error. I have googled the error and looked it up here on SO but came short-handed.
Any helps is appreciated.
I have deleted the node_modules, package-lock.json, yarn.lock
If you had package-lock.json and yarn.lock files at the same time, it looks like at some point you probably used both yarn and npm to install packages, which can definitely cause conflicts.
In terms of this specific issue, I ran into the exact same problem and it was due to a package conflict with jest-cli. The solution in my case was to upgrade react-scripts, e.g. (pick one):
Yarn
yarn add react-scripts
Or NPM
npm i react-scripts#latest
Details
In case it helps, here are more details on my specific issue and how I resolved it. I got the same error and it looks like I had two different versions of jest-cli installed:
$ npm list jest-cli
├─┬ jest-enzyme#4.2.0
│ └─┬ jest#27.5.1
│ └── jest-cli#27.5.1
└─┬ react-scripts#1.1.0
└─┬ jest#20.0.4
└── jest-cli#20.0.4
In my case, the solution was to upgrade react-scripts:
npm i react-scripts#latest
It looks like the dependency conflict is now resolved:
$ npm list jest-cli
└─┬ jest-enzyme#4.1.1
└─┬ jest#27.5.1
└── jest-cli#27.5.1
In fact, it doesn't even show jest-cli as a dependency of react-scripts any more, because it's using the same version of jest as jest-enzyme now:
$ npm list jest
├─┬ jest-enzyme#4.1.1
│ └── jest#27.5.1
└─┬ react-scripts#5.0.0
├─┬ jest-watch-typeahead#1.0.0
│ └── jest#27.5.1 deduped
└── jest#27.5.1 deduped
Every time I try to create a react app it gets stuck. This is what I see
┌────────────────────────────────────────────────────────────┐
│ npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) C:\Users\alanp\.config │
└────────────────────────────────────────────────────────────┘
Creating a new React app in C:\Users\alanp\OneDrive\Desktop\Personal Projects\PictureDayAtl\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
It will just stay there. I checked my project out and it does end up creating a my-app folder and a package.json, but thats about it. I have I have up to date node and npm. Ive tried installing react, react-dom, and react-scripts before hand but that doesnt work. Ive tried repeating this multiple times and nothing. Left it run for a couple hours and nothing. Any help would be appreciated.