Start a cloned create-react-app from Github - node.js

I've been trying for a some time to run a relatively simple React app. A co-worker started the project with create-react-app and for some reason my can't start the app.
Here's the error code:
Error [ERR_INVALID_PACKAGE_TARGET]: Invalid "exports" main target "index.js" defined in the package config /home/francisco/Desktop/University/Data%20visualization/Bialystok-DataVisualization-Project/node_modules/is-promise/package.json
NPM then proceeds to show the following error:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! data-visualization-project#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
I have already ran the following commands: npm install and then npm start. I have also tried to delete package-lock.json and node_modules and re run npm install, and no solution.
I'm currently running npm version 6.14.4 and node 13.11.0
EDIT: Add files
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import "handsontable/dist/handsontable.full.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
package.json
{
"name": "data-visualization-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#handsontable/react": "^3.1.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"handsontable": "^7.4.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.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"
]
}
}
Thanks for the help!

There are some issues right now with npm/node and create-react-app. I managed to fix a similar problem by installing node version 12.12.0. Perhaps that might fix your issue.
The ticket for the issue

try cleaning the cache first
npm cache clean --force
and then do the things u already did :
Remove node_modules and package-lock.json
npm i
npm start

Reinstall create-react-app with:
npm install -g --force create-react-app
and it fix them 🔥.
If not, be sure that you have is-promise#2.2.2 ald older, by command:
npm list is-promise

Related

Heroku fail to compile: [eslint] Must use import to load ES Module

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.

Node.js 15 dependency problem with pullstate 1.20.x

i want to use pullstate.js in my react project but it seems to be impossible to use it with the Node.js 15.
I have tried it in Node.js 13 and there it works. Can Anybody help?
In this example i created a plain react app and try to add the dependency.
package,json
``
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#popperjs/core": "^2.9.0",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"ajv": "^6.12.6",
"bootstrap": "^4.5.3",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0",
"pullstate":"1.20.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"
]
}
}
``
This ist the rror i get after npm install.
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.12.0" from pullstate#1.20.1
npm ERR! node_modules/pullstate
npm ERR! pullstate#"1.20.1" 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.
This is unfortunately due to NPM version 7 being way more strict about peer dependency mismatches.
To get the old behaviour, run npm install with --legacy-peer-deps, as they say in the error message.
I've just released Pullstate version 1.21.0 - this has set a more broad peer dependency for React, including ^1.17.0 - I think this should solve this issue.

npm not recongnizing my virtual environment

Im making a react app with flask as backend and im following this article guide, so in this article he adds a custom npm script to start flask app. I did the exact same thing and did npm run start-api but im getting the following error -
> weather-app#0.1.0 start-api C:\Users\Kakshipth\Documents\coding\webdev\weather-app
> cd api && venv/bin/flask run --no-debugger
'venv' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! weather-app#0.1.0 start-api: `cd api && venv/bin/flask run --no-debugger`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the weather-app#0.1.0 start-api 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! C:\Users\Kakshipth\AppData\Roaming\npm-cache\_logs\2020-10-31T05_01_09_393Z-debug.log
Yes, i double checked if the name of my virtual environment is correct, and it is correct.
here is my package.json file where i specified the script -
{
"name": "weather-app",
"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",
"materialize-css": "^1.0.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3",
"venv": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"start-api": "cd api && venv/bin/flask run --no-debugger",
"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"
],
"proxy": "http://localhost:5000"
}
}
Any help is appreciated, thanks
in order to run within virtual environment, you need to activate the virtual environment first.
try executing the npm script after you activated the virtual environment
$ source venv/bin/activate
$ npm run start-api
You are running on windows, it doesn't recognize the path you have given in the package.json file, edit the "scripts" as:
"start-api": "cd api && venv\\bin\\flask run --no-debugger",
Then try activating the virutal environment and running npm script.
$ source venv/bin/activate
$ npm run start-api
I also followed the same example and the answer is here: Integration of React framework and Flask framework
You need to run both commands concurrently.
I installed concurrently with yarn then updated the command in the package.json to use both commands according to the concurrently docs, eg.
"start": "concurrently \"command1 arg\" \"command2 arg\""

Npm start problem while installing react, and how to fix it?

After installing node and global create-react-app using 'npm install -g create-react-app' I start creating my first app using 'npx(or npm i tried both) create-react-app appname' and it was successfully created until I start the 'npm start' in 'appname' directory which gave me the following errors.
E:\Sang\React\myapp>npm start
myapp#0.1.0 start E:\Sang\React\myapp
react-scripts-start
'react-scripts-start' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp#0.1.0 start: react-scripts-start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myapp#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! C:\Users\Sang Tonsing\AppData\Roaming\npm-cache_logs\2020-09-03T12_06_34_133Z-debug.log
This is my script code inside package.json
{
"name": "myfirstreact",
"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",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"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"
]
}
}
Kindly please help me solve my problem, I am planning to build my own website using react. Thank You so Much
"scripts":{
"start":"react-scripts-start",
"build":"react-scripts-build",
"test":"react-scripts-test",
"eject":"react-scripts-eject",
}
you have to go to your package.json file and look inside scripts,
you should see there start script. if you dont have just add it.
In your package.json file change the start script as:
"scripts": {
"start": "react-scripts start -o",
"build": "react-scripts build",
.
.
.
I think it's "start": "react-scripts-start" which is causing problem for you.
You may be missing the react-scripts module.
Run npm install react-scripts --save in your project and your package.json should be the way it was initially:
"scripts":{
"start":"react-scripts start",
"build":"react-scripts build",
"test":"react-scripts test",
"eject":"react-scripts eject",
}
nvm install 10.23.0
npm start
npm run build
Brother I think your npm version or nodejs version is outdated
You’ll need to have Nodejs >= 14.0.0 and npm >= 5.6 on your machine. Or use windows 8.1 , 10 . Not the windows 7
Simple delete the node_modules folder and run npm install in the appname directory. Let me know if it don't help.
delete node_modules
run npm install
after that run npm start
if above does't work
delete node_modules
delete package-lock.json
run npm install
and then npm start
if above solutions does not fixed your problem, try the following this worked for me:
if you want to start on another port or PORT command not found error then do the following steps:
open package.json file
inside script replace the start command with below "start": "set PORT=3006 && react-scripts start"

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