Heroku fail to compile: [eslint] Must use import to load ES Module - node.js

I'm trying to deploy a react app I worked on and when I try to push to heroku master it says "failed to compile node.js". Now I've already tried to specify what node I'm using and update to the lastest parser link, but still getting an error.
Here is what I'm getting in the terminal:
-----> Build
Running heroku-postbuild
> potato-network#1.0.0 heroku-postbuild /tmp/build_82788311
> cd client && npm install && npm run build
> core-js#3.25.4 postinstall /tmp/build_82788311/client/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js-pure#3.25.4 postinstall /tmp/build_82788311/client/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
added 1429 packages from 795 contributors and audited 1434 packages in 21.79s
211 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
> client#0.1.0 build /tmp/build_82788311/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
[eslint] Must use import to load ES Module: /tmp/build_82788311/client/node_modules/#eslint/eslintrc/universal.js
require() of ES modules is not supported.
require() of /tmp/build_82788311/client/node_modules/#eslint/eslintrc/universal.js from /tmp/build_82788311/client/node_modules/eslint/lib/linter/linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /tmp/build_82788311/client/node_modules/#eslint/eslintrc/package.json.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.h5MIg/_logs/2022-10-03T00_22_02_904Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! potato-network#1.0.0 heroku-postbuild: `cd client && npm install && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the potato-network#1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.h5MIg/_logs/2022-10-03T00_22_02_911Z-debug.log
-----> Build failed
Here is my package.json file:
{
"name": "client",
"proxy": "http://localhost:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"axios": "^0.21.1",
"express": "^4.18.1",
"moment": "^2.29.1",
"peerjs": "^1.3.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-share": "^4.3.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"socket.io-client": "^3.1.2",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"#babel/eslint-parser": "^7.5.4",
"babel-eslint": "^10.0.2",
"eslint": "^8.24.0",
"eslint-plugin-react": "^7.31.8"
},
"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"
]
}
}
Here is my .eslinct.js:
env: {
browser: true,
es2021: true,
},
parser: "#babel/eslint-parser",
extends: ["eslint:recommended", "plugin:react/recommended"],
overrides: [],
parserOptions: {
ecmaVersion: "latest",
requireConfigFile: false,
sourceType: "module",
},
plugins: ["react"],
rules: {},
How can I fix it? Googling the error does not present any useful forums or raised bugs.

Related

Upgrading to react 18 results in package dependencies errors

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.

I can't solve the dependency tree every time i try to install #craco/craco

Unable to solve dependency tree trying to install tailwind.
This is my package.json:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "^9.8.8",
"eslint": "^8.15.0",
"jest": "^28.1.0",
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
},
"dependencies": {
"#craco/craco": "^6.4.3",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"js-cookie": "^3.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-saga": "^1.1.3",
"router": "^1.3.6",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest",
"lint": "eslint .",
"lint:fix": "eslint --fix --ext .js,.jsx ."
},
"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"
]
}
}
This is what I see in my console:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: front-end#0.1.0
npm ERR! Found: react-scripts#5.0.0
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts#"^4.0.0" from #craco/craco#6.4.3
npm ERR! node_modules/#craco/craco
npm ERR! #craco/craco#"^6.4.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 C:\Users\Tejas\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Tejas\AppData\Local\npm-cache\_logs\2022-05-14T14_36_01_226Z-debug-0.log
i am trying to configure tailwind css and to override reactcss i am trying install #craco/craco but i am getting this error i tried useing
npm install --save --legacy-peer-deps
and installed craco using this
npm install #craco/craco --save --legacy-peer-deps
but after that it is giving me error
Downgrade the version of react-script from 5.0.0 to 4.0.0

Cannot run NPM install because it's 'unable to resolve dependency tree'

I had some issues with my node_modules so I went to delete the node_modules and run npm install. Boy was that a mistake. My project is completely messed up. When I run npm install npm it sends back this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"15.3.0 - 16.x" from react-vis#1.11.7
npm ERR! node_modules/react-vis
npm ERR! react-vis#"^1.11.7" 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 /Users/Cole/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Cole/.npm/_logs/2021-05-26T10_34_07_786Z-debug.log
Someone please help me!
Edit: Here is my package.json.
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"npm": "^7.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-vis": "^1.11.7",
"redux": "^4.1.0",
"web-vitals": "^1.1.1"
},
"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"
]
}
}
Not quite sure what I did that was so detrimental but this has been a painful experience.
When running npm audit it shows that there are 87 vulnerabilities.
Running npm audit fix and npm audit fix --force do not fix anything.
Is there a way to refresh all the node_modules? Go back to square one and re-install all dependencies again?
Seems like react-vis has a peer dependency of react#"15.3.0 - 16.x". Since you have react#17.0.2, it complains. Try changing
"react": "^17.0.2",
"react-dom": "^17.0.2",
to
"react": "^16.14.0",
"react-dom": "^16.14.0",

Conflicts in React dependency tree

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",
...
}

Problem in the command "npm start" Failed at the fourth-tic-tac-toe#0.1.0 start script. npm ERR! react-scripts: not found

I am making a basic tic tac toe game in react. first I create the app with these command's
npx create-react-app my-app
cd my-app
npm start
In the beginning it's working is fine but when I installed some dependencies and again start the app with the command npm start,
give me error
shivam#shivam:~/Documents/Projects/React/fourth-tic-tac-toe$ npm start
> fourth-tic-tac-toe#0.1.0 start /home/shivam/Documents/Projects/React/fourth-tic-tac-toe
> react-scripts start
sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! fourth-tic-tac-toe#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the fourth-tic-tac-toe#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/shivam/.npm/_logs/2020-04-25T10_03_35_243Z-debug.log
My package.json file is here
{
"name": "fourth-tic-tac-toe",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-scripts": "3.4.1",
"react-toastify": "^5.5.0",
"reactstrap": "^8.4.1"
},
"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"
]
}
}
and npm version 5.6.0
I installed all the with the command npm install dependency-name
and only one dependency with npm install --save bootstrap
After this installation when I tried to start app give me error
install new version of node
npm install -g npm#latest
Go in your app directory and use this command
npm install react-scripts#2.1.8
It has worked for me.

Resources