I am currently having trouble solving dependency tree error with React 18. Initially, I couldn't start a new react project with npx-create-react-app my-app (a template was not provided). I fixed that and can now start a new project, but I have two other react apps that I cannot get to start up.
The first one is a portfolio react template that I downloaded. I opened it up and ran npm start in the terminal with no luck (attached is the dependency tree error message).
These are the steps I took to try to fix it:
I deleted all react and node folders that were dowloaded on my Mac (outside of the directory).
Ran npm install --save --legacy-peer-deps
Ran rm -rf node_modules
Ran npm cach clean --force
I removed package.lock.json
I changed these scripts in package.json to updated versions
nodemon: 2.0.16
react: 18.1.0
react-scripts: 5.0.1
React-dom: 18.1.0
When I then run npm start I get the dependency errors. I would appreciate any help and advice! Thanks so much![!dependency errors]
I recently switched to Ubuntu, whenever I create react app it's giving me this note, and the app it's creating is a class component.
ankit#gram:~/Documents/Development/React/react-project$ npx create-react-app my-app
Creating a new React app in /home/ankit/Documents/Development/React/react-project/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
added 987 packages in 39s
22 packages are looking for funding
run `npm fund` for details
Success! Created my-app at /home/ankit/Documents/Development/React/react-project/my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
Note: the project was bootstrapped with an old unsupported version of tools.
Please update to Node >=14 and npm >=6 to get supported tools in new projects.
my node version: v16.14.0
my npm version:8.3.1
I think this was because npx was not installed in my system, when I created a react app by this command create-react-app the app created was fine. I also installed npx using this command npm install -g npx and created a react app and everything was fine. before this make sure you have installed create-react-app in your system if not then install it by using this command
sudo npm install -g create-react-app
I am a new programmer had this issue not long ago I just solved it.
Use sudo apt install nodejs
It will automatically install version 10 for you which doesn't accept React.
Then you try to install NVM package, use it to update your node to a newer version.
You can check me on GitHub bari racha Wuye
I was having the same problem after I had just installed Ubuntu 22.04.
The fix for me was updating node and npm by following these instructions free code camp update node and npm
Specifically, I followed the instructions under the heading "1. Use NPM to Update Your Node Version", to update node and ignored the 2nd and 3rd headings, then followed the instructions under the last heading to update npm
afterwards I restarted my computer, opened the project directory and ran the command
npm i create-react-app#latest
then I ran
npx create-react-app projectname
and it worked as expected
I created a local module using npm pack, which created a package: "org-header-0.0.3.tgz"
In a React project, I added org-header to its package.json:
"dependencies": {
"org-header": "file:[path-to-org-header]/org-header-0.0.3.tgz",
...
}
It installs fine. However, when I try to use it:
import Header from 'org-header';
...
However when I do npm run start:
Failed to compile.
./src/components/Layout.js
Module not found: Can't resolve 'org-header' in '/Users/imyjimmy/***/src/components'
Could it be because:
I did not structure the org-header project correctly
Webpack is doing something weird
Both?
I also encounter the same issue the other day. Just post my solution here if it helps.
So I'm testing a local dependency (project B) update in my main project (project A) through
npm pack --> generate the tgz file
refer the tgz file in the project A's package.json as above question shows
run npm install in project A to unpack the package -- installation works fine
run into below error when npm develop
Generating development JavaScript bundle failed
Can't resolve 'project B' in '/Users/xxx#xxx.com/projectA/src/pages'
What this error indicates is that the package Project A does not exist.
This is weird because when I ran npm list project B I actually got the confirmation that it exists.
The solution is to explicitly install project B again e.g.npm install project B , instead of running npm install after you change the package.json in step 3.
I don't know if it's webpack got confused by the 2 packages or somewhat, but the solution solved my problem .
I just upgraded to node version 9.0.0 and am now getting this error in the command line when trying to use npm install
npm ERR! code MODULE_NOT_FOUND
npm ERR! Cannot find module 'internal/util/types'
I'm using:
OSX 10.10.5
Node version 9.0.0
NPM version 5.5.1
Extra information: I am also trying to do this with a Laravel 5.5 project. This is how I update my version of node: How do I update Node.js?
run
rm -rf /usr/local/lib/node_modules/npm
and then re-install Node.js will work in most cases
Leaving this here for anyone using the n nodejs version manager:
$ n 6.12.0 # Go back to a stable release
$ npm install -g npm#latest # Update npm to latest
$ n lts # Get 8.9.1
$ npm install #Should work now.
The MODULE_NOT_FOUND error seems to happen when changing between node versions and some files are possibly still being cached. I am not sure exactly but the above sequence of commands work for me.
When I first got this, I solved just running "npm install" again to make sure everything was installed.
I got similar error also on Windows 8 after I have just upgraded node js. First: how I ran into the issue then the solution that worked for me.
How I ran to the issue:
When I did npm --version and node --version I discovered that I wass running npm v3.x and node 5.x. So I went to nodejs.org site from where I downloaded node-v8.11.3-x64.msi. After installing the msi package I confirmed that my nodejs version was now v8.11.3 via node --version command.
Then, when I ran "npm install http-server" (w/o the quotes) that's when I got the issue:
npm ERR!
node v8.11.3
npm ERR! npm v3.5.3
npm ERR! code MODULE_NOT_FOUND
My resolution:
I did some research including on the internet and found out that the npm version pointed to in my path was the one in my roaming profile C:\Users[myname.hostname]\AppData\Roaming\npm. In other words, the npm being used is not the one in the updated package I have just installed which is located in C:\Program Files\nodejs.
The resolution was to delete npm and npm-cache in the roaming folder. Note, I used cygwin as I was not able to delete these folders via Windows cmd prompt. With cygwin, I navigated to
cd "C:\Users[myname.hostname]\AppData\Roaming"
Then I removed the aforementioned folders like so
rm -rf npm-cache
rm -rf npm
After that, I opened a new Windows cmd prompt and was able to now successfully install http-server like so:
npm install http-server
Hope this works for you.
For me it was package installation issue, so I just write,
npm i or npm install in the root of the application.
to open the terminal in the root of the application, if you're using VS-code right click on the package.json and click on Open in integrated terminal.
I founded this problem too, so I found that I have imported wrong module instead of express module I had imported router module after I had replaced this two my code work as well
If all the above solutions doesn’t work check for any blank spaces in your folder/file where you copied the path
Make sure you are inside the project folder.
Rename the folder "node_modules" to any other name (for example: node_modules_old).
Run command: "npm i" (the command will build new the folder node_modules).
Try running your program again.
If the problem is resolved and your program is running correct, delete the old folder node_modules.
If you are using libraries make sure to install everything with npm or yarn before starting. And in cases of you files if you are going to use them make sure to do the export.module thing everytime.
If you are working with Local modules then don't have node_modules. All things go well in a easy way.
But if you want to work with both local and node_modules then use
.mjs (extension) - For modules
.cjs (extension) - For common scripts which you want to run with node
in which you can use require statements like
var http = require('http');
var fs = require('fs');
but if using .js extension then use
import http from "http"
import fs from "fs"
And also your package.json for type
Haa well, I have spent two days on this and have done everything I can to fix this issue even tried resetting the system but none of them reloved the issue.
And accidentally found out what was causing this issue, it is because of & in my parent folder name. File hierarchy R&D>remix>blog, When I was trying to run the blog server it was throwing module not found, require stack error.
code: ←[32m'MODULE_NOT_FOUND'←[39m,
requireStack: []
Solution: I have changed the parent folder name to RnD and it fixed the issue. If the file name contains any special characters(even parent folders) try updating it. In my case, it is &
The MODULE_NOT_FOUND error happened to me and even running npm install the error persisted.
Try to do this
For me, what worked was deleting the node_modules folder
rm -r -f node_modules/
After that, run the command to install the package.json dependencies
npm install
What happened to me was that when I ran npm install for the first time I had a very low internet connection and therefore I believe that the packages from package.json were not downloaded correctly and due to that the MODULE_NOT_FOUND error occurred. The funny thing is that just running the npm install command has no effect because it understands that the package is already there but it isn't. Similar as a corrupted data. In my case the npm update was without effect too.
If when you are using React And getting this error message. You can use this ,
NPM
npm install #reduxjs/toolkit
Yarn
yarn add #reduxjs/toolkit
I've just installed the babel-cli module locally to my project but when I run babel test.js in the terminal it outputs that the *command babel is uknown*.
What I figured out is that npm is trying to find the module in my globally installed modules instead of my project modules, how can I fix it?
Sorry for the silly question but I'm not finding a solution.
You can either
Use the babel installed in you project - node_modules/.bin/babel test.js
Add a script in your package.json and run it via npm - npm run <script_name>. npm will use the version of babel installed in your project
When you run babel. It looks for global npm directory and can't find it there.
2 ways but one is redundant.
You can link your local path to global npm directory which is
redundant and wont work for the next project. Don't never do this.
Or install it globally. That how npm works for now.
There is a discussion on that. And here is a good article. http://www.joezimjs.com/javascript/no-more-global-npm-packages/