When I run npm install, I get the following error:
npm WARN eslint-config-react-app#2.1.0 requires a peer of eslint-plugin-jsx-a11y#^5.1.1 but none is installed. You must install peer dependencies yourself.
Here is what my package.json looks like:
{
"name": "name",
"version": "0.1.0",
"private": true,
"dependencies": {
"ajv": "^6.5.0",
"aws-amplify": "^0.4.0",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.2"
}
}
Does anyone know how to remove this error?
This is not an error, it is a WARNing
The easiest trial is delete node_modules directory and retype to see if it persists
npm install
Moreover you can use npm-install-peers to find and install required peer dependencies
npm install -g npm-install-peers
npm-install-peers
Also you can change the log level to error so that you won't see the warnings
Related
My React app works ok but when I deploy to Google Cloud Platform i get this error in the browser
./src/index.js Module build failed: Error: Cannot find module
'eslint/lib/formatters/stylish'
This error occurred during the build time and cannot be dismissed.
I have read many Google answers on this like This but no luck.
I have tried remove package-lock.json and node_modules and then run npm install, that made no difference still get the error
Here is my package.json
{
"name": "AspNetCoreReactRedux",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.2.0",
"#material-ui/icons": "^4.2.1",
"bootstrap": "^4.1.3",
"jquery": "3.3.1",
"primereact": "3.1.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^5.0.6",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.8",
"react-scripts": "^1.1.5",
"reactstrap": "^6.3.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"ajv": "^6.0.0",
"babel-eslint": "^7.2.3",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
}
}
I think there is something wrong with the package.json but dont know what
I read that I could try:
If you haven't ejected and see this problem:
Remove anything with the word eslint from package.json
Remove package-lock.json and yarn.lock
Remove node_modules
Run npm install (or yarn if you use it)
But is that safe to do, will that not remove the eslint?
ok i did this and now I can deploy
Remove anything with the word eslint from package.json
Remove package-lock.json and yarn.lock
Remove node_modules
Run npm install (or yarn if you use it)
I want to use react-native-aes-crypto but it need react-native. I install it but it continue to say that it can't find it.
I have try to reinstall it, add his dependencies but nothing work.
My package.json:
{
"name": "neko_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/react-fontawesome": "0.0.20",
"#trendmicro/react-sidenav": "^0.4.5",
"ajv": "^6.5.1",
"create-react-app": "^1.5.2",
"font-awesome": "^4.7.0",
"moment": "^2.22.2",
"react": "16.3.1",
"react-cookie": "^2.2.0",
"react-dom": "^16.4.0",
"react-icons-kit": "^1.1.5",
"react-moment": "^0.7.7",
"react-native": "^0.55.4",
"react-native-aes-crypto": "^1.2.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-sidenav": "^2.1.3"
},
"scripts": {
"start": "PORT=3005 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
The error is getting when I do import Aes from 'react-native-aes-crypto'
UPDATE 1:
I have tried to change version of react-native to 0.55.0, no more audit fix to do but it display the same error.
Install the package react-native-cli for fix that.
If you want an another package who doesn't require react-native, use simple-encryptor.
I did a build for a React app using npm run-script build and I need to run it. Using npm run webpack is returning an error. Excuse my being very new to React but I really need to know how to run this app. I hope you can help!
My package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"downloadjs": "^1.4.7",
"fast-memoize": "^2.2.8",
"flow-bin": "^0.52.0",
"lodash": "^4.17.4",
"mapbox-gl": "^0.39.1",
"material-ui": "^0.18.7",
"moment": "^2.18.1",
"node-sass-chokidar": "^0.0.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mapbox-gl": "^2.5.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-router-redux": "next",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-emotion": "^7.2.2",
"react-scripts": "1.0.10",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
}
Here are the folders and files of the built app
As I mentioned in comments.
npm run build uses react-scripts to create a build for you
To run in production:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow",
"start:prod": 'node dist/app.js'
}
By looking at "react-scripts": "1.0.10", it seems you created the app using create-react-app.
create-react-app is using yarn by default. So you can run yarn then yarn build (same as npm install and then npm run build)
If you need change webpack configuration. The app have eject first. You can do it by yarn eject. And then you can edit the webpack config file.
Does this help?
Are you using create-react-app? If yes then run "npm run build" in your root folder. This command will run your app
I am using the Airbnb lint settings for my react app
and the line
import React from 'react';
Gives the error
Missing file extension for "react" (import/extensions)
Any idea how to fix this?
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"firebase": "^4.6.2",
"jquery": "^3.2.1",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"sass": "sass --watch src/styles/scss:src/styles/css",
"sass:build": "sass src/styles/scss:src/styles/css"
},
"devDependencies": {
"eslint": "^4.12.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1"
}
}
In the rules object of your .eslintrc set "import/extensions" to never or 0 to avoid this.
You should check if you have eslint-plugin-import installed, Airbnb style guide configuration uses it to handle linting of imports and exports. If you don't have it, it results in the error Unable to resolve path to module '_module-name_' and/or Missing file extension for "_module-name_" (import/extensions).
Also since you have it installed in dev-dependencies, you can run something like ./node_modules/.bin/eslint . or setup eslint globally to just run eslint .
I thought i had figured out what the problem was but alas, i did not. When running my build script yarn build or even npm run build the script builds just fine but the process never completes and just hangs... Does anyone have an idea on how to go about troubleshooting this sort of problem?
here's my package.json
{
"name": "stars-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"bulma": "^0.5.1",
"custom-react-scripts": "0.2.0",
"firebase": "^4.3.0",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-feather": "^1.0.7",
"react-router-dom": "^4.2.2",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "NODE_PATH=src react-scripts start",
"build": "NODE_PATH=src react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"firebase-tools": "^3.9.2"
}
}