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!
Related
I have a react app made with create react app, and hot reloading kills the page entirely with the error:
Uncaught ReferenceError: process is not defined
What's strange is that there seems to be an iframe injected which I never noticed before:
This iframe is added to the DOM as soon as I reload and breaks the page as well as preventing an update. I can't find any documentation on "iframe-bundle.js" online.
Edit: I tried deleting my node modules and any questionable imports (I temporarily installed craco prior). Still the same issue. It's incredibly annoying!
Edit 2: If I delete that iframe everything seems to return to normal, i.e. page updates and is interactable
Upgrading your application to CRA (react-scripts) v5 with npm i react-scripts#latest will fix the issue.
If your app is not able to be upgraded because dependencies are incompatible or you require node version < 14, you can try the following workaround which worked for me:
Revert back to CRA 4: npm i --save-exact react-scripts#4.0.3
Add react-error-overlay as a dev dependency: npm i --save-dev react-error-overlay#6.0.9
Then add the following line to your package.json
"resolutions": {
"react-error-overlay": "6.0.9"
},
If you're using NPM, force your package-lock.json file to actually use 6.0.9 with npx npm-force-resolutions
If you're using Yarn, just run yarn install and your resolutions will be applied and fix the issue
More info at https://github.com/facebook/create-react-app/issues/11773
I fixed it. I did 2 things:
Updated npm to latest
Updated react-scripts to latest
Not sure which one fixed it.
I recently had this issue aswell.
I did couple of things to make it work. You can try these aswell.
Change the react-script version to 4.0.3 inside package.json.
Add this to package.json, below the dependencies.
"resolutions": { "react-error-overlay": "6.0.9" },
Install react-error-overlay v6.0.9 inside your devDependencies.
Remove your node_modules and package-lock.json.
Do npm install and check that works.
Note: After doing the above steps I had to run npm install react-error-overlay#6.0.9 again to fix this issue.
Make sure your react-scripts version is ^4.0.3, then install react-error-overlay as devDependencies using this command below:
npm i -D react-error-overlay#6.0.9 on NPM
yarn add -D react-error-overlay#6.0.9 on Yarn
I tried the answers above, but non of those fixed the issue for me. What I did to solve this problem in my case was:
Delete node_modules
clearing the cache -> npm cache clean --force
install the latest react-scripts version -> npm i react-scripts#latest
I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.
(base) mukund#mukund-Inspiron-15-3567:~$ create-react-app todo-app
Creating a new React app in /home/mukund/todo-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! Unexpected end of JSON input while parsing near '...{"babel-core":"^6.0.0'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/mukund/.npm/_logs/2020-05-10T14_41_17_724Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting todo-app/ from /home/mukund
Done.
Creating an app like the recommended way by the core React team at reactjs.org should solve the problem.
Do this:
npx create-react-app todo-app
If that is still not working then run the following to clear your npm cache before trying the step above again:
npm cache clean --force
This just gives you a clean reset incase your cached modules are conflicting with each other.
Each time i tried creating a react app using create-react-app <...name> i keep getting this error "
Creating a new React app in C:\windows\system32\brian-todos.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
npm ERR! Unexpected end of JSON input while parsing near '...tXcMskoaoOolrubJ3NQGh'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\BrianMartinez\AppData\Roaming\npm-cache_logs\2019-01-12T13_11_25_580Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... package.json
Deleting brian-todos / from C:\windows\system32
Done."
I even tried npm clear cache it still didn't not work.What do i do about this challenge
It seems you opened your windows console or powershell as an administrator, and you landed in system32 folder. Don't create your project there, that is a reserved folder for system executables. Do something like cd C:\Users\yourusername\Documents and try there.
This is the answer to the challenge i had before now. follow these steps
npm install -g yarn
yarn global add create-react-app
create-react-app
I want to create an npm package that includes multiple react components that use typescript. I'm pretty new to react and npm so sorry if this is obvious. I've had a look online I couldn't find much on this topic. I'm not bothered about the package being hosted by npm it would be easier if it was just a local package. I would appreciate any help you can offer. Thanks
You can create your project with reusable components:
mkdir my-reusable-components && cd my-reusable components
Initiate git:
git init
Initiate npm package
npm init
Optionally you can use npm link in your working directory and then in the dependant-project dir:
npm link my-reusable-components
Optionally before publishing to npm you can install your project from git
npm install <git repo url>