Why Is My React Application Suddenly Not Working Locally? - javascript

I have a React application I have not started up locally, in over a year. This application ran perfectly last time I started it up. And the application continues to run today in Heroku's cloud. But I want to work on it locally, and using the exact same package.json when it ran just fine a year ago, is now failing in the browser with the following error message:
TypeError: Cannot read property 'ReactCurrentOwner' of undefined
Screenshot Browser Error
I have tried deleting my node_modules directory, and deleting any non yarn.lock files, but the error persists.
I KNOW one of you intelligent folks can help.
I'd greatly appreciate it.
package.json
{
"name": "mazzo-react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"auth0-lock": "^10.24.3",
"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.1.2",
"babel-runtime": "6.23.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.1.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",
"konva": "^1.7.6",
"material-ui": "^0.18.7",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"react": "^15.6.2",
"react-dev-utils": "^3.1.3",
"react-dom": "^15.6.2",
"react-error-overlay": "^1.0.10",
"react-konva": "^1.7.16",
"react-relay": "0.10.0",
"react-relay-network-layer": "1.3.9",
"react-router": "3.0.2",
"react-router-relay": "0.13.5",
"react-tap-event-plugin": "^2.0.1",
"relay-commit-mutation-promise": "^1.0.1",
"style-loader": "0.18.2",
"styled-components": "^2.4.1",
"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"
},
"scripts": {
"start": "node scripts/start.js",
"build": "GRAPHQL_ENDPOINT=https://api.graph.cool/relay/v1/cj63i9kajpzhw0153segab1wa node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"plugins": [
"react-relay"
],
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}
}

Probably one of your dependencies made a breaking change and either your own package.json or one of the dependencies you work with did not restrict the version of the dependencies you rely on. I would suggest checking the individual libraries throwing the error to make sure that the configuration you passed for those libraries are still valid for the version you are using.

Related

Jest is not collecting coverage from all my Vue files

I am testing a Vue3 project with Jest and I am facing this issue: I recently added Jest to my Vue project through the command vue add unit-jest. This command configured the environment to run unit tests with the command npm run test:unit, which refers to vue-cli-service test:unit.
I've also configured Jest in my package.json file with options "collectCoverage":true and "collectCoverageFrom":["src/views/**.{js,vue}","!src/main.js"].
However, when I run the tests, I don't get a coverage report from all of my Vue components, only some of them. These components are located in src/views folder of my project.
This is my package.json file:
{
"name": "proyecto-tfg",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"webpack": "webpack --watch --mode development"
},
"dependencies": {
"#vue/test-utils": "^2.0.2",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.20.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chart.js": "^3.8.2",
"cookie-parser": "^1.4.6",
"core-js": "^3.22.8",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"error-stack-parser": "^2.1.4",
"express": "^4.18.1",
"express-session": "^1.17.3",
"flush-promises": "^1.0.2",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.3.6",
"mongoose-unique-validator": "^3.1.0",
"morgan": "^1.10.0",
"nodemon": "^2.0.16",
"vue": "^3.2.37",
"vue-chartjs": "^4.1.1",
"vue-ellipse-progress": "^2.1.1",
"vue-material-design-icons": "^5.1.1",
"vue-router": "^4.0.16",
"vue-star-rating": "^2.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel": "^0.1.40"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#vue/babel-preset-jsx": "^1.3.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"jest": "^28.1.3",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": 0,
"vue/require-v-for-key": 0
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleDirectories": [
"node_modules",
"src/views"
],
"automock": false,
"setupFiles": [
"./tests/setupJest.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/views/**.{js,vue}",
"!src/main.js"
],
"preset": "#vue/cli-plugin-unit-jest"
}
}
This is the complete list of my Vue components:
- ActorShow.vue
- AddProgramaLista.vue
- Buscador.vue
- CrearLista.vue
- Estadisticas.vue
- Filtros.vue
- Footer.vue
- Home.vue
- Insignias.vue
- InsigniasShow.vue
- Listas.vue
- Login.vue
- Navbar.vue
- Perfil.vue
- Programas.vue
- ProgramasShow.vue
- RecomendacionesUsuario.vue
- Registro.vue
- Sugerencias.vue
And when I run the command npm run test:unit, I get the message "Running coverage on untested files..." with this output from the console:
Thanks in advance

Adding Typescript to existing Node/Express Javascript application

I am just adding Typescript to our Node / Express backend. I had existing ESLint setup but after adding Typescript it now causes problems with linting .js files and I actually have no errors any longer for my .js files.
The goal is to slowly move over existing .js files to .ts but with the project size and my current bandwidth can't do it all at once. So I'm taking the slow approach of anything new using Typescript and whenever I touch an old piece of code, rewriting that in Typescript as well.
Any help would be appreciated.
My .eslintrc.json
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"],
"no-console": "off",
"comma-dangle": "error",
"semi": "error"
},
"overrides": {
"files": ["*.ts", "*.tsx"],
"extends": ["airbnb", "prettier", "airbnb-typescript", "prettier/#typescript-eslint"],
"plugins": ["prettier", "#typescript-eslint"],
"parser": "#typescript-eslint/parser",
}
}
I also have .pretierrc
{
"tabWidth": 2,
"printWidth": 200,
"singleQuote": true,
"endOfLine": "lf",
"trailingComma": "all"
}
Here are my dev dependencies for package.json
"devDependencies": {
"#types/bluebird": "^3.5.33",
"#types/body-parser": "^1.19.0",
"#types/chai": "^4.2.14",
"#types/dotenv": "^8.2.0",
"#types/express": "^4.17.11",
"#types/mocha": "^8.2.0",
"#types/mongoose": "^5.10.3",
"#types/supertest": "^2.0.10",
"#typescript-eslint/eslint-plugin": "^4.14.2",
"#typescript-eslint/parser": "^4.14.2",
"chai": "^4.3.0",
"chai-http": "^4.3.0",
"dotenv": "^8.2.0",
"eslint": "^7.19.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^7.2.0",
"eslint-config-standard": "^16.0.2",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-async-await": "0.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^5.0.0",
"link-module-alias": "^1.2.0",
"lint-staged": "^10.0.8",
"mocha": "^8.2.1",
"mockgoose": "^8.0.4",
"nodemon": "^2.0.7",
"nyc": "^15.1.0",
"pre-commit": "^1.2.2",
"prettier": "^2.2.1",
"sinon": "^9.2.0",
"supertest": "^6.1.3",
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.1.3"
}
You can tell you ESLint to ignore all the JavaScript files by creating a .eslintignore file, it works in a similar way of gitignore.
For ex: You .eslintignore may looks like :
build/*.js
model/*.js
Don't forget to restart your Editor.

How to fix import {} unexpected token when running jest tests in wordpress

When I run Jest in my wordpress/gutenberg plugin, I get this error
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Applications/MAMP/htdocs/brandpop/wp-content/plugins/brandpop/blocks/story/components/Story.test.js:17
import { createElement } from "#wordpress/element";
^
SyntaxError: Unexpected token {
It appears that a dependency of Story.test.js is not being transpiled. I've tried adding a "transformIgnorePatterns" as suggested above. Ive also tried importing some plugins into my babelrc.js. No luck.
package.json
{
"scripts": {
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-destructuring": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"#wordpress/babel-plugin-makepot": "^2.1.2",
"#wordpress/babel-preset-default": "^4.2.0",
"#wordpress/jest-preset-default": "^4.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.6",
"chai": "^4.2.0",
"classnames": "^2.2.6",
"cross-env": "^5.1.5",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"esm": "^3.2.25",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.12.0",
"postcss-loader": "^2.1.5",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.7",
"snap-shot-it": "^6.3.5",
"style-loader": "^0.19.1",
"webpack": "^3.11.0"
},
"dependencies": {
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#vimeo/player": "^2.9.1",
"#wordpress/babel-plugin-import-jsx-pragma": "^2.2.0",
"#wordpress/compose": "^3.3.0",
"#wordpress/element": "^2.4.0",
"#wordpress/is-shallow-equal": "^1.3.0",
"babel-jest": "^24.8.0",
"babel-plugin-transform-imports": "^1.5.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"jest": "^24.8.0",
"mocha": "^6.1.4",
"react-html-parser": "^2.0.2",
"react-images": "^0.5.19",
"react-moment": "^0.9.2",
"react-photo-gallery": "^6.3.4",
"react-test-renderer": "^16.8.6",
"selenium-webdriver": "^4.0.0-alpha.1",
"uniqid": "^5.0.3"
},
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(s?css|less)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.json?$": "babel-jest"
},
"testPathIgnorePatterns": [
"/node_modules/"
]
}
}
.babelrc.js
module.exports = {
presets: [
"#wordpress/default",
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"modules": "commonjs"
}
],
"#babel/preset-react"
],
plugins: [
[ '#wordpress/babel-plugin-import-jsx-pragma', {
scopeVariable: 'createElement',
scopeVariableFrag: 'Fragment',
source: '#wordpress/element',
isDefault: false,
} ],
[ '#babel/transform-react-jsx', {
pragma: 'createElement',
pragmaFrag: 'Fragment',
} ],
],
};
}
I expected tests to run, but instead I got this error.

Mocha unexpected identifier

I want to set up a testing environnement for my react app using Mocha+chai+enzyme , the problem is that , many things are missing and i don't know how to fix that since i am a beginner when it comes to use babel or webpack ... etc
So first of all , i have a project that i created with create-react-app
i installed all the libraries with npm
we already have a default app.test.js file , so i just changed the code
My package.json:
{
"name": "****",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "7.1.0",
"#svgr/webpack": "2.4.1",
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"apollo-boost": "^0.1.23",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react": "^16.7.0",
"react-apollo": "^2.3.3",
"react-app-polyfill": "^0.1.3",
"react-dev-utils": "^6.1.1",
"react-dom": "^16.7.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "^3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "mocha src/App.test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-0": "^7.0.0",
"awesome-typescript-loader": "^5.2.1",
"babel-preset-env": "^1.7.0",
"chai": "^4.2.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"jsdom": "^13.2.0",
"mocha": "^5.2.0",
"react-addons-test-utils": "^15.6.2",
"source-map-loader": "^0.2.4",
"typescript": "^3.2.2"
}
}
My App.test.js
import React from 'react';
import { configure , shallow } from 'enzyme'
import { expect } from 'chai'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() });
import App from './App';
describe('App', function() {
it('should work', function() {
const wrapper = shallow(<App />)
expect('1').to.equal('1');
})
});
And my .babelrc : some people told me to install these presets but same problem
{
"presets": ["#babel/preset-react", "#babel/preset-env"]
}
when i run npm test : i have this :
C:\Users\kino96\Desktop\JavaScript\OurFirstProject\src\App.test.js:1
(function (exports, require, module, __filename, __dirname) { import
React from 'react';
SyntaxError: Unexpected identifier
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
...
You need to tell Mocha that it should use Babel for your test files. The documentation (here) seems to be out of date, but this should work:
"devDependencies": {
...
"#babel/register"
},
"scripts": {
...
"test": "mocha --require #babel/register src/App.test.js"
}

ESLint couldn't find the plugin "eslint-plugin-angular" but i'm not using Angular

i'm working on a React application using ES6. The application was created using the create-react-app wrapper.
I'm setting up the ESLint for that application but i'm getting the error ESLint couldn't find the plugin eslint-plugin-angular. The thing is that i'm not using Angular anywhere as far as i know. Did you ever have an error like this?
Could be that the angular plugin is being required for some reason i'm not considering?
This is my package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"repository": {
"type": "git",
"url": "repo"
},
"devDependencies": {
"autoprefixer": "6.5.1",
"axios-mock-adapter": "^1.7.1",
"babel-core": "6.17.0",
"babel-eslint": "7.1.1",
"babel-jest": "17.0.2",
"babel-loader": "6.2.7",
"babel-preset-react-app": "^2.0.1",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.0",
"detect-port": "1.0.1",
"dotenv": "^4.0.0",
"enzyme": "^2.7.0",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.5.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "17.0.2",
"json-loader": "0.5.4",
"node-sass": "^4.0.0",
"object-assign": "4.1.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react-addons-test-utils": "^15.4.1",
"react-dev-utils": "^0.4.2",
"react-test-renderer": "^15.4.1",
"recursive-readdir": "2.1.0",
"redux-mock-store": "^1.2.1",
"sass-loader": "^4.1.0",
"sinon": "^1.17.7",
"socket.io": "^1.7.2",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "1.0.0"
},
"dependencies": {
"axios": "^0.15.3",
"font-awesome": "^4.7.0",
"immutable": "^3.8.1",
"inuitcss": "^6.0.0-beta.4",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^5.0.0",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0",
"socket.io-client": "^1.7.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "NODE_ENV=test node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
}
}
}
This is my .eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
}
And my babel.rc file
{
"presets": [
"react-app"
]
}
Did you guys have this problem before?
Thanks
It looks like this might be a similar problem. Is there a .eslinrc in your user folder? You could try removing it or installing the plugins globally.

Categories