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.
Related
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
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
./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
Trying to install Blueprint: http://blueprintjs.com/docs/#blueprint.npm-installation
Have tried the manual install. Have tried installing the dependencies manually as mentioned in step 2, but I keep getting:
UNMET PEER DEPENDENCY react#16.0.0
Which makes no sense. My package.json contains "react": "^16.0.0" and I installed react using create-react-app today, so what is going on here?
package.json:
{
"name": "reactdemo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "1.0.14"
},
"dependencies": {
"#blueprintjs/core": "^1.32.0",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.0.0",
"react-transition-group": "^1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
To quote #adidahiya from BluePrint's own repo:
If you're using React 16, we're currently in an awkward in-between state where we need react-addons-css-transition group for pre-16 support, hence the peer dep warnings. They should be safe to ignore for now. Follow #866 for more updates.
See original issue ticket here, and the issue to follow here.
Hope this helps.
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.