I have an old react project I am trying to get back into. Its been a few months since and I know there is updates for it. I tried to update them as I read on the internet how, but now my project isn't working. Some of the dependencies are out of date, it says there are vulnerabilities. Is there a way to fix it? and Is there a easy way to check other than going to each dependency? Is there a way to automate it so I dont have to remember? Any tips on how to manage a react project would be great as I am still a student and learning. Thanks
I tried to update the version in my package.json files. I also tried to delete my node_modules folder after everything broke. It broke it worse.
Unfortunately, the best way to handle dependencies is to upgrade them one-by-one, fixing problems as you go. I would start over by removing your node_modules, then reinstall your old node_modules using your lock file:
npm
npm ci
yarn
yarn install --frozen-lockfile
This way your old dependencies are installed as they were. Your app should be in a working state. Now go through your dependencies from the top-down to uninstall then reinstall each one. This allows you to fix any issues as you go, instead of trying to upgrade all packages at once and drowning in errors.
There's no automated way to handle breaking changes in external libraries.
Related
I have a problem that when I clone a Github repository that is older more then half a year I am not able to run it with neither npm start nor yarn start. I have been successful with one repository only and it was only a few months old. I think it might be because of the new React version. I am quite new to React so I don't know for sure.
I always get an error message that looks something like this
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-jest": "^26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:
/Users/username/node_modules/babel-jest (version: 27.5.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/username/node_modules/babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Even after following all 7 steps, I am still getting the same result. What should I do??
I am trying to work on a package locally that is a dependency in a react project. I want to debug an issue while it's running in the main react project.
simply using yarn link creates duplicate versions of react that breaks hooks. (I also tried yarn linking react and react-dom and it get's harry and I was seeing other issues with that)
So I thought to myself, I have an idea. I can just do this:
rm ./node_modules/<my-package>/dist
ln -s /<path-to-my-dev-package>/dist ./node_modules/<my-package>/dist
And that would be the equivalent. I just need to run yarn build on my package before testing it in my app.
The problem is, I cannot get yarn to "see" the changes.
I have verified the symlink is there. I have verified the changes in the built files.
yet no matter what I do, the old non symlink'd version is what I see.
I tried:
yarn cache clean
yarn start
But it still see the old/deleted version of my pacakge (that no longer even exists) when I run my project
How can I get it to "refresh" to the new symlink'd build files?
TLDR
Even if I don't use symlinks.. any change I make to a package in node_modules is not reflected when I run the app.
So real question is, how are these node_modules being cached in create-react-app and how can I clear it so that my changes in node_modules are seen, so I can debug them.
After poking around in the source of react-scripts
It seems I need to remove ./node_modules/.cache/default-development to clear it and reload the changes.
Quite new to react, and can not find an answer to the simplest of tasks. Just trying to clone a repo to my computer and run it. For example https://github.com/arnab-datta/counter-app .
I do npm install and npm start. But when I do npm start I seem to have dependency errors with a "babel-loader". It gives me the below list of steps to solve the problem, I went through them all and still no success. No matter what project I try to repo the error is always this babel-loader. I am new to react and getting very frustrated being unable to do the simplest of things.
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it
automatically. However, a different version of babel-loader was
detected higher up in the tree:
/Users/xxx/node_modules/babel-loader (version: 8.0.6)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has
not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if /Users/tylervanzo/node_modules/babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-loader in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check
in case you want to proceed anyway.
I am a developing a react ui, and i am having trouble eliminating some dependencies. These dependencies have security findings and I am not able to remove/eliminate from package.json. I tried npm uninstall but dosent seems to be solving the problem. The dependencies I wanted to eliminate are js-yaml, tough-cookie,http-proxy agent etc...
Please help... thanks in advance
If you're getting security warnings when creating a project with Create React App, you mostly likely aren't using the most recent version of Node and/or NPM.
I just reproduced the security warning problem when I started a project on Node v8.16. When I updated Node to the most recent version (v10.15.3 at the time of writing this), I no longer got any security warnings when starting a project.
Update Node and NPM to the most recent versions.
Removing the individual packages that are causing the security warnings for you is not an option since NPM doesn't have a dependency exclusion feature. All dependencies are installed for each package.
I have created a react project using Create-React-App and now would like generate the production build. When I use npm run build I am getting the error:
Failed to minify the code from this file:
./node_modules/pify/index.js:3
Create-React-App suggests the following corses of action:
To resolve this:
Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
will take to long and seems to already be a issue (#50) raised for pify.
I am not sure how I would approach but I think it may be the best option
is not going to work because it is a dependency of a different package.
What I am looking for is come guidance on how to solve this solution before I use option 2 and rewrite a whole package.
I belive the solution would involve ejecting from create-react-app and messing with the webpack config file.