When attempting to build an application on a Travis CI server, an error returns stating a peer dependency issue as stated below:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15" from react-router-dom#4.1.1
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom#"^4.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#15.7.0
npm ERR! node_modules/react
npm ERR! peer react#"^15" from react-router-dom#4.1.1
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom#"^4.1.1" from the root project
npm ERR!
I was initially using npm but switched to yarn on the .travis.yml file, to no success.
How do I fix the issue?
Edit: Added package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/*": {
"target": "http://localhost:5000"
},
"/api/*": {
"target": "http://localhost:5000"
}
},
"dependencies": {
"axios": "^0.16.2",
"materialize-css": "^0.100.2",
"react": "^16.0.0-alpha.13",
"react-dom": "^16.0.0-alpha.13",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-scripts": "1.0.10",
"redux": "^3.7.1",
"redux-form": "^7.0.1",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
As you can see here, react-router-dom has declared react package as a peerDependencies with a specific version. Meaning react-router-dom expects you to have installed react v15. But you have installed React v16.0.0-alpha.13.
You should downgrade your react package or upgrade your react-router-dom.
Related
Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Heroku Push logs:
> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-paypal-button-v2#2.6.3
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR! peer react#">=16.3.2" from #restart/context#2.1.4
npm ERR! node_modules/#restart/context
npm ERR! #restart/context#"^2.1.4" from react-bootstrap#1.6.6
npm ERR! node_modules/react-bootstrap
npm ERR! react-bootstrap#"^1.6.6" from the root project
npm ERR! 16 more (#restart/hooks, #testing-library/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /tmp/npmcache.1sG84/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.1sG84/_logs/2022-12-15T17_08_01_767Z-debug-0.log
-----> Build failed
package.json React:
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^1.2.1",
"install": "^0.13.0",
"react": "^18.2.0",
"react-bootstrap": "^1.6.6",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-paypal-button-v2": "^2.6.3",
"react-redux": "^8.0.5",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"install-peers": "^1.0.4"
}
}
package.json Node.js:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"engines": {
"node": "17.x"
},
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"dotenv": "^8.6.0",
"express": "^4.18.2",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.13.15",
"morgan": "^1.10.0",
"multer": "^1.4.4"
},
"devDependencies": {
"concurrently": "^5.3.0",
"nodemon": "^2.0.20"
}
}
Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Thanks for help.
You are directly depending on React 18 but react-paypal-button-v2#2.6.3 (the latest release at the time of writing) is not compatible with that version yet, as described in the error message:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
If you don't need anything in particular from React 18, your best bet is to downgrade to version 17.
If you need React 18, the safest thing to do is to wait for a new version of react-paypal-button that declares a compatible peer dependency. There is an open issue on the project requesting this.
The last option, which I do not recommend, is to ask Heroku to use legacy peer deps behaviour. This behaviour is deprected for a reason, and while it may let your install proceed, it could also lead to unpredictable bugs.
I see you running npm install --prefix frontend at the start of your Heroku logs. It should work if you add the flag --legacy-peer-deps to that command. Just a suggestion, use npm ci instead of the npm install to use the exact same dependencies locally and in the production server (you will have to push the package-lock.json as well, see the command reference: https://docs.npmjs.com/cli/v9/commands/npm-ci).
I have the following package.json file:
{
"name": "web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#fontsource/roboto": "^4.5.7",
"#mui/icons-material": "^5.8.4",
"#mui/lab": "^5.0.0-alpha.93",
"#mui/material": "^5.9.3",
"#reduxjs/toolkit": "^1.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"animate.css": "^4.1.1",
"generate-password-browser": "^1.1.0",
"notistack": "^2.0.5",
"query-string": "^7.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"string-to-color": "^2.2.2",
"stylis-plugin-rtl": "^2.1.1",
"traverse": "^0.6.6",
"typed.js": "^2.0.12",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have created this project using create-react-app just now, so everything is clean and new, I have only installed additional packages.
Now, I want to install the following package:
react-swipeable-views
Which had over 260,000 downloads this week,
$ npm i react-swipeable-views
and I'm getting this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: web#0.1.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.3.0 || ^16.0.0 || ^17.0.0" from react-swipeable-views#0.14.0
npm ERR! node_modules/react-swipeable-views
npm ERR! react-swipeable-views#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/sam/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sam/.npm/_logs/2022-08-04T16_50_51_600Z-debug-0.log
Everything was working just fine before the idea of moving to react 18.
Thanks react, now how do I fix this problem? I have tens of other dependencies which I'm unable to install because of this error, I was able to rescue the ones listed above in the package.json file, thank god.
If I wanted to roll back to react#17 I can't because there's no way you can do it since create-react-app does not have such an option, and if you npm un react and npm i react#17 the errors will remain because create-react-app installs other dependencies and not only react.
Any help to get out of this problem?
with explanation, why this is happening if possible š¹.
npm ERR! peer react#"^15.3.0 || ^16.0.0 || ^17.0.0" from react-swipeable-views#0.14.0
That library doesn't support anything in 18 yet. According to the project github the issue was opened already this year.
When running the react app I got this error in console - SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
Based on StackOverflow's suggestions I tried updating react version. I had version 16 and switched to 17. But now there are conflicts in the dependency tree. When I try to npm install this is the error I'm getting:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.1.5
npm ERR! node_modules/#emotion/react
npm ERR! #emotion/react#"^11.1.1" from react-select#4.3.0
npm ERR! node_modules/react-select
npm ERR! react-select#"^4.2.1" from the root project
npm ERR! 17 more (#material-ui/core, #material-ui/lab, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14 || ^15.0.0 || ^16.0.0-alpha" from airbnb-prop-types#2.160
npm ERR! node_modules/airbnb-prop-types
npm ERR! airbnb-prop-types#"^2.16.0" from enzyme-adapter-utils#1.14.0
npm ERR! node_modules/enzyme-adapter-utils
npm ERR! enzyme-adapter-utils#"^1.14.0" from enzyme-adapter-react-16#1.15.6
npm ERR! node_modules/enzyme-adapter-react-16
npm ERR! dev enzyme-adapter-react-16#"^1.15.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\USER\AppData\Local\npm-cache\eresolve-report.txt for a full rport.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2021-04-25T15_17_39_361Z-dbug.log
package.json :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"aos": "^2.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-select": "^4.2.1",
"react-spring": "^8.0.27",
"styled-components": "^5.2.1",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest": "^26.6.0",
"react-dev-utils": "^11.0.4"
},
"proxy": "http://localhost:8080"
}
As I understand the error occurs because of the version of the enzyme. I tried upgrading it to version 17, but react doesn't let me do it and I get the above-given error.
What could be the solution to resolve the dependency conflicts?
I had the same issue, so I've installed the dependencies with yarn. and it worked like magic.
If you have React version 17, you can use this unofficial adapter for React 17 for enzyme.
import { configure } from 'enzyme';
import Adapter from '#wojtekmaj/enzyme-adapter-react-17';
configure({ adapter: new Adapter() });
Your package.json file contains the declaration of which version of React you're using. As long as your project is has all it needs from the version of React that enzyme-adapter-react-16 requires - which is ^16.4.0-0 according to Justin Mitchell - you can use that.
"dependencies": {
...
"react": "^16.4.0-0",
"react-dom": "^16.4.0-0",
...
}
I have a project that I cannot run npm start on.
I haven't touched this project in two weeks. The only thing I did yesterday was add a git repository, that's it.
When I tried to run npm start I got this error:
sh: react-scripts-start: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! bk-react-replica#0.1.0 start: 'react-scripts-start'
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the bk-react-replica#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I've looked at the solutions on other posts about this same error but none work for me. I've deleted the node_modules directory and package-lock.json files, then ran npm install.
However, I still get the same error message. Does anyone know what's wrong?
This is my package.json file:
{
"name": "bk-react-replica",
"version": "0.1.0",
"private": true,
"homepage": "http://qhafeezdomain.dreamhosters.com/projects/bkreplica",
"dependencies": {
"antd": "^3.3.0",
"normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-native-scripts": "^1.13.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"react-scripts-cssmodules": "^1.0.171",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts-start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
As I will reference you to an answer I provided to a question similar to yours, run this:
npm i -g npm //which will update npm
rm -rf node_modules/ && npm cache clean // to remove the existing modules and clean the cache.
npm install //to re-install the project dependencies.
Edited:
I just noticed your package.json it should be:
"scripts": {
"start": "react-scripts start",
not
"scripts": {
"start": "react-scripts-start",
My app has a React frontend and a Node backend; the BE serves the FE data through an API. It won't deploy to Herokuāstack trace is below.
Things I've tried:
This question. I've tried modelling my package.json files after a model repo mentioned in the answer, but no luck.
Deploying the model repo mentioned aboveāit worked fine.
Deploying the model repo to my own failing heroku appāit worked fine, so Heroku isn't the issue.
This question (I've checked react-scripts is listed as a dependency and not a dev-dependency).
I will probably end up taking the model repo as a starting point and gradually copying my project over, but would appreciate any info on what might be going wrong.
Stack Trace:
> fsevents#1.0.17 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v48-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for fsevents#1.0.17 and node#6.10.3 (node-v48 ABI) (falling back to source compile with node-gyp)
make: Entering directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
SOLINK_MODULE(target) Release/obj.target/.node
COPY Release/.node
make: Leaving directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
> fibers#1.0.15 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fibers
> node build.js || nodejs build.js
`linux-x64-48` exists; testing
Binary is fine; exiting
added 1242 packages in 52.433s
removed 1242 packages in 25.561s
> react-ui#0.1.0 build /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client
> react-scripts build
sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-ui#0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-ui#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My server package.json:
{
"name": "in-search-of-happiness",
"engines": {
"node": "6.10.x"
},
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"heroku-postbuild": "cd client/ && npm install --only=dev && npm install && npm run build"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"dependencies": {
"body-parser": "^1.17.2",
"cookie-parser": "^1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "^1.11.0",
"mongoose": "^4.10.8",
"morgan": "^1.8.2",
"serve-favicon": "^2.4.3",
"zombie": "^5.0.5"
}
}
My React package.json:
{
"name": "react-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"fetch": "^1.1.0",
"node-fetch": "^1.7.1",
"process-nextick-args": "^1.0.7",
"react": "^15.6.1",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.6.1",
"react-scripts": "1.0.7",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"chai": "^4.0.2",
"eslint": "^4.0.0",
"sinon": "^2.3.5",
"wdio-mocha-framework": "^0.5.10",
"webdriverio": "^4.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}
Hello your post build script needs some modification, kindly follow this convention
Replace reactFolderName to your folder name that contains the react frontend
Add This below snippet to your package.json under the scripts
scripts{
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}
And add this snippet to your index.js file
app = express()
app.use(express.static('reactFolderName/build'));
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));