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 .
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.
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
I got an error on my browser window "Cannot read property 'string' of undefined" when i import module (import { Button } from 'react-lightning-design-system'), even i am not using this module.
//package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"history": "^4.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-lightning-design-system": "^2.4.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Given that it's a PropTypes issue I'm guessing it's a React v15 vs React v16 issue (i.e. you're using one version of React, but that module requires the other version). Check the dependencies.
Probably gonna need some more info then just an out of context error message though
Using react-codemon, run on your project directory
jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js myapp/
This will resolve updating proptypes for your source code and any node modules.
Re-installing node modules will require running the command again it seems.
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"
}
}