I'm having some problems with create-react-app development server (npm/yarn start script). It's stops updating the current errors/warning state, even if I fix them or modify the file. I never had this problem in the last years working with it.
As an example, my current terminal output is:
Compiled with warnings.
src/components/CartList.js
Line 3:15: 'Divider' is defined but never used no-unused-vars
src/providers/User.js
Line 16:17: 'setToken' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
But if I modify these files, nothing change on output. I've tried to restart development server, use yarn instead of npm, open development server on different terminals, increase the number of max file watchers...
The only thing that (temporary) fixed it was to stop development server, delete .eslintcache file, then restart development server.
Current packages and scripts:
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"clsx": "^1.1.1",
"comlink": "^4.3.0",
"cra-template": "1.0.3",
"react": "^16.14.0",
"react-app-rewired": "^2.1.8",
"react-dom": "^16.14.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"typescript": "^4.1.3",
"worker-loader": "^3.0.6"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"config-overrides-path": "src/react-app-rewired.config.js",
"eslintConfig": {
"extends": "react-app"
}
Hope someone can help me... Thanks!
#EDIT
Using Debian Buster, NPM 6.14.9, Node 14.15.3
Related
I have a React 18 application using create-react-app. I'm using Visual Studio code for my ide. I have two .env files in my root folder (not in my scr folder). Both of them hold the same environment variable.
In my .env file I have the variable's value set to false:
REACT_APP_IS_CONSOLELOG=false
In my .env.development file I have the variable's value set to true:
REACT_APP_IS_CONSOLELOG=true
I then launch the application in Visual Studio code in a new terminal using npm-start. In my *.tsx file I output the following to the console:
console.log(process.env);
console.log(process.env.REACT_APP_IS_CONSOLELOG);
For the first statement I see this:
{NODE_ENV: 'development', PUBLIC_URL: '', WDS_SOCKET_HOST: undefined, WDS_SOCKET_PATH: undefined, WDS_SOCKET_PORT: undefined, …}
For the second statement I see "false." I am expecting to see "true" for the second statement. React is reading the environment variable from my ".env" file, instead of from my ".env.development" file. What am I doing wrong? When I run the application on my local host I want React to use environment variables from my .env.development file, not from my .env file.
According to the React documentation at https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env, my setup should work.
Following a link in the documentation, I saw an instruction to install "dotenv", which I did, but it still does not work.
This is what my package.jason dependencies looks like:
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.64",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"dotenv": "^16.0.3",
"jest-editor-support": "^30.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-query": "^3.39.2",
"typescript": "^4.8.4",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
This is what my package.json scripts looks like; in the "start" setting I'm loading a local ssl cert, and then calling "react-scripts start".
"scripts": {
"start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Users/MyName/Documents/Certificates/cert.crt&&set SSL_KEY_FILE=C:/Users/MyName/Documents/Certificates/cert.key&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Add “.env.development” to the “react-scripts start” command in the “scripts” setting in package.json.
The “scripts” setting should look like this:
"scripts": {
"start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Users/MyName/Documents/Certificates/cert.crt&&set SSL_KEY_FILE=C:/Users/MyName/Documents/Certificates/cert.key&&react-scripts start .env.development",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Remove “dotenv” from the dependencies setting, it is redundant.
I'm trying to migrate react-scripts from my current version (1.1.4) to the latest 3.0.1 for obvious reasons, but I'm having a hell of a time.
Here's my current, build successful package.json
{
"name": "name",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"ajv": "^6.9.1",
"axios": "^0.18.0",
"axios-debug": "0.0.4",
"date-fns": "^1.30.1",
"formik": "1.2.0",
"history": "4.7.2",
"moment": "2.22.2",
"localforage": "1.7.3",
"prettier": "1.14.2",
"react": "^16.8.1",
"react-bootstrap": "0.32.4",
"react-checkbox-group": "4.0.1",
"react-datetime": "2.15.0",
"react-dom": "^16.3.2",
"react-render-debugger": "1.0.2",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"react-router-hash-link": "1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
So I'm using npm so running npm install --save --save-exact react-scripts#3.0.1 installs the new react-scripts version, everything is updated correctly. I updated a few other packages that were needed as deps. No security vulnerabilities, everything was clean and installed correctly.
I'm using maven as a build system to build my app, once it tries to execute npm run build it fails on react-scripts build
The debug log is super unhelpful. The only error displayed is /node_modules/.bin/react-scripts: Permission denied
I've tried changing the permissions using chmod +x /node_modules/.bin/react-scripts but no luck.
I've tried deleting node_modules several times and reinstalling the modules using npm ci. Just about any issue I've found on github I've tried.
I'm not sure what else could be wrong.
Using node v11.9.0 and npm 6.5.0
Do I need to update in smaller version increments? I'm really at a loss
EDIT:
Something is wrong with npm in my case. Manually updating the package versions in package.json seems to work for now... I need to figure out why npm is broken for me
So I am looking at my package.json file - and nothing looks particularly crazy:
{
"name": "application_name",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap-toggle": "^2.2.2",
"classnames": "^2.2.6",
"html-react-parser": "^0.4.6",
"jquery": "^3.3.1",
"react": "^16.4.1",
"react-bootstrap-toggle": "^2.3.1",
"react-cookie": "^3.0.4",
"react-dom": "^16.5.2",
"react-load-script": "0.0.6",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-timer-mixin": "^0.13.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && robocopy .\\build ..\\www /MIR",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I've tried npm install, npm install --production and npm install --express
No matter what npm command I write, I get the following:
added 1425 packages from 862 contributors and audited 14585 packages in 15.876s
It ultimately is 202M - this can't be right, that's a HUGE number of modules
This is for a React project I am working on.
I only made this question because none of the other answers seemed to work for my situation.
Is there a solution to this problem? I am intending on compiling this into a mobile app and 202M is a huge footprint for what is a pretty simple app.
202Mb is almost completely occupied with development dependencies, react-scripts.
react-scripts is a bundle consisting Webpack and other tools that are necessary to run the project. It is provided by Create React App, which is just an executable that creates boilerplate project with react-scripts:
This package includes scripts and configuration used by Create React
App.
node_modules size is adequate for complex configuration that CRA sets up. It doesn't affect the size of compiled application.
./node_modules/react-dom/cjs/react-dom.development.js
Module not found: Can't resolve 'schedule' in 'C:\Users\adcal\dvmtn7\myapp\node_modules\react-dom\cjs'
this same error has happened three create-react-apps in a row. It works at first and then just randomly breaks.
I have only installed modules via npm. Here's the package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"dotenv": "^6.0.0",
"express": "^4.16.3",
"express-session": "^1.15.6",
"massive": "^5.3.0",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"redux": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Update: I have the "schedules" npm installed in the projects node module folder. Why is it still throwing this error though?
(It happens in all of my projects now.)
Update to the update: I reinstalled create-react-app globally it fixed it.
I think the reason for this error is that there was a problem installing or updating a module.
I solved the problem in the following ways.
Remove package-lock.json and node_modules folder.
Run the npm install command to install a package again.
Run the yarn start command to confirm that the error has been resolved.
It appears that schedule got moved out of react in a later version.
Try
npm install scheduler --save
or updating react
https://www.npmjs.com/package/scheduler
After creating a new create-react-app project I've run into a bit of a big problem when I run npm start inside the project. Chrome React Developer tools does not show all files in src folder. Instead it shows only folder ./src
Chrome React Developer Tools
I am using nodejs 6.10.1 , create-react-app 1.3.0.
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.1",
"bootstrap": "^3.3.7",
"prop-types": "^15.5.9",
"react": "^15.5.4",
"react-bootstrap": "^0.30.10",
"react-bootstrap-table": "^3.2.1",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.0",
"recharts": "^0.22.3",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Any advice how to fix it? I checked documentation but didn't find any solution.
You can still debug the code using VScode Chrome extension, however its not my favorite way of debugging a frontend application.
Use eject command to enable debugging.
After you npm run eject, it reveals more configurations for you to edit, one of those is source-map type (under a webpack configuration). Once you eject, the source-map type changes thus allowing you to debug on chrome-dev-tools.