As the title describes I am having an issue getting ESLint to run in my React project.
$ npx eslint **/*.js
Unexpected token {
package.json
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
.eslintrc
{
"parser": "babel-eslint"
}
Your package.json should be an object
{
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
As stated in the Installation and Usage section of the npm package, there's a node.js version prerequisite for the eslint script to run.
You can check your node version by running node --version.
If you find you've got an unsupported node version, if figure you may consider switching to a higher node version or a lower eslint package version. E.g.: eslint#6.8.0
Related
I'm trying to make a Shopify Hydrogen app and install TailwindCSS.
I've followed all the steps in the Hydrogen docs: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development
For some reason I cannot run the scripts due to the previously mentioned error.
Dependencies:
"dependencies": {
"#remix-run/react": "1.12.0",
"#shopify/cli": "3.29.0",
"#shopify/cli-hydrogen": "^4.0.6",
"#shopify/hydrogen": "^2023.1.4",
"#shopify/remix-oxygen": "^1.0.3",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#remix-run/dev": "1.12.0",
"#shopify/prettier-config": "^1.1.2",
"autoprefixer": "^10.4.13",
"concurrently": "^7.6.0",
"eslint": "^8.20.0",
"eslint-plugin-hydrogen": "0.12.2",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
"prettier": "^2.8.4",
"tailwindcss": "^3.2.7"
},
Updated jest from 23.6 to 24.1 with yarn. Get SyntaxError: Unexpected identifier import Whatever
I tried updating every node module that I guess could be related.
- "#babel/core": "^7.0.0",
- "#babel/polyfill": "^7.0.0",
+ "#babel/core": "^7.2.2",
+ "#babel/polyfill": "^7.2.5",
"#types/bluebird": "^3.5.24",
## -138,8 +138,7 ##
"#types/react-dom": "^16.0.9",
"#types/react-transition-group": "^2.0.14",
"axios-mock-adapter": "^1.15.0",
- "babel-core": "^7.0.0-bridge.0",
- "babel-jest": "^23.6.0",
+ "babel-jest": "^24.1.0",
"babel-merge": "^2.0.1",
"babel-plugin-angularjs-annotate": "^0.9.0",
"babel-plugin-dual-import": "^1.2.1",
## -152,7 +151,7 ##
"expect": "^1.20.2",
"fake-indexeddb": "^2.0.3",
"haml": "~0.4.3",
- "jest": "^23.6.0",
+ "jest": "^24.1.0",
"jest-junit": "^5.1.0",
"jest-styled-components": "6.3.1",
"mini-css-extract-plugin": "^0.4.0",
## -166,8 +165,8 ##
"stylelint-processor-styled-components": "^1.3.2",
"synchronous-promise": "^2.0.6",
"thread-loader": "^1.1.5",
- "ts-jest": "^23.10.4",
- "typescript": "^3.1.3",
+ "ts-jest": "^23.10.5",
+ "typescript": "^3.3.3",
Should run yarn test as before.
UPDATE:
The problem was in jest.config.js
We had node_modules declared after our internal modules:
'moduleDirectories': ['our_modules', 'node_modules']
with the new version this no longer works.
I want to use this fetch polyfil so that i can do integration tests on my sdk using jest.
However when i run my tests i get.
/jest.setup.js:2
import 'whatwg-fetch';
^^^^^^^^^^^^^^
SyntaxError: Unexpected string
jest.config.js
// File jest.config.js
module.exports = {
"verbose": true,
setupFiles: ['./jest.setup.js'],
};
jest.setup.js
// File jest.setup.js
import 'whatwg-fetch';
package.json
"scripts": {
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^4.6.0",
"jest": "^23.6.0",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"whatwg-fetch": "^3.0.0"
}
I'm update React to 16.3.0 and my app crashed with Error: Cannot find module 'react-dev-utils/ignoredFiles'.
I try write this command to console: npm install --save-dev react-scripts, but it is not help, I else try delete node modules from project and reinstall it with npm i but without any result.
Dependencies from package.json:
"dependencies": {
"autoprefixer": "7.1.2",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"prop-types": "^15.6.0",
"radium": "^0.19.4",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
}
I will assume you're using "create-react-app"
I would recommend you delete package-lock.json then run npm install
In most cases bumping the react-scripts version in package.json and
running npm install in this folder should be enough.
npm install --save --save-exact react-scripts#1.1.4
create-react-app update
When running a unit test with Mocha we are getting the following token exception which points to Babel not transpiling.
node_modules/expo/src/Expo.js:2
import './environment/validate';
^^^^^^
SyntaxError: Unexpected token import
The mocha test points to a file that imports Constants from expo
import { Constants } from 'expo'
const config = Constants.manifest.extra
This is how the mocha opts and babel are configured
test/mocha.opts
--recursive
--require babel-register
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Dependencies
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^7.2.3",
"chai": "^4.1.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"jest-expo": "^24.0.0",
"mocha": "^5.0.0",
"react-native-scripts": "1.0.0",
"react-test-renderer": "16.0.0-alpha.6",
"rimraf": "^2.6.2",
"sinon": "^4.2.0"
},
"dependencies": {
"axios": "^0.16.2",
"dot-object": "^1.7.0",
"expo": "^24.0.0",
"google-libphonenumber": "^3.0.5",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-google-places-autocomplete": "^1.3.6",
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^4.12.0",
"react-native-swipeable": "^0.6.0",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.21",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.3",
"redux-thunk": "^2.2.0",
"styled-components": "^2.0.1"
}
}
We are running
yarn mocha
I just faced a similar error - many of my suites would break after I used Expo.AuthSession in a single file.
I fixed my issue by adding
jest.mock('expo', () => ({
AuthSession: {
getRedirectUrl: jest.fn(),
},
}));
to my global mock file.