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"
}
Related
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
I am using a react portfolio template. I am new to react and webpack. I am trying to use Spline to add a 3D model to my page, but I'm getting the following error.
./node_modules/#splinetool/runtime/build/runtime.js 19847:16
Module parse failed: Unexpected token (19847:16)
You may need an appropriate loader to handle this file type.
| function fI(r, e) {
| var t = typeof r; > return e = e ?? hI, !!e && (t == "number" || t != "symbol" && dI.test(r)) && r > -1 && r % 1 == 0 && r < e;
| }
|
I have also installed react-script package and typescript which are required for spline to work.
My package.json file:
"name": "portfolio",
"version": "0.1.0",
"private": true,
"homepage": "/",
"basename": "/",
"dependencies": {
"#babel/core": "7.4.3",
"#splinetool/react-spline": "^2.2.1",
"#splinetool/runtime": "^0.9.73",
"#svgr/webpack": "4.1.0",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"babel-eslint": "10.0.1",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react-app": "^9.1.2",
"bootstrap": "^4.5.3",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "^1.7.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.7",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.14.0",
"react-accessible-accordion": "^3.3.3",
"react-animate-on-scroll": "^2.1.5",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.4.0",
"react-countup": "^4.3.3",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-icons": "^3.11.0",
"react-iframe": "^1.8.0",
"react-image-lightbox": "^5.1.1",
"react-modal-video": "^1.2.6",
"react-parallax": "^3.1.2",
"react-particles-js": "^2.7.1",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-scroll-up": "^1.3.5",
"react-scrollspy": "^3.4.3",
"react-slick": "^0.24.0",
"react-tabs": "^3.1.1",
"react-text-loop": "^2.3.0",
"react-tilt": "^0.1.4",
"react-video-tag": "0.0.10",
"react-visibility-sensor": "^5.1.1",
"resolve": "1.10.0",
"sass-loader": "^7.3.1",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-pnp": "1.1.2",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"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)$"
],
"modulePaths": [],
"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"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/preset-react": "^7.18.6",
"#babel/runtime": "^7.18.6",
"sass": "^1.53.0",
"typescript": "^4.7.4"
}
}
Part of my React code:
class SliderOne extends Component {
render() {
return (
<div className="slider-activation">
<div className="inner">
<Spline scene="https://prod.spline.design/zijR8dif6Kg3gTyC/scene.splinecode" />
</div>
</div>```
I had the same problem, my version of node js was in 12.x.x, I changed to 16.x.x and everything works
I built the NPM package based on components written in React and Typescript.
Export that package as npm
Install package into another React with TS repo
Result: Error appear:
Failed to compile.
./node_modules/#nikolatrajkovic123/ec-general-section-form/HubSectionPack.tsx
10:5 Module parse failed: Unexpected token (10:5) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders | import
'./package-styles.scss'; |
type HubSectionPackProps = { | sectionName: SectionName; | // eslint-disable-next-line
Babel
{
"presets": ["#babel/preset-env", "#babel/preset-react", "env", "react"],
"plugins": ["transform-class-properties"]
}
Webpack:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/index.tsx',
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides',
),
},
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss'],
},
plugins: [new webpack.CleanPlugin()],
output: {
filename: '[name].[contenthash].js',
path: path.join(__dirname, 'dist'),
},
};
Package.json of the package:
{
"name": "#nikolatrajkovic123/hub-section-form",
"version": "1.3.8",
"description": "Enrollment / Hub section form",
"main": "./index.ts",
"module": "./dist/index.es.js",
"types": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/Bestowinc/enrollment-client.git"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"author": "Direct Team",
"license": "MIT",
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#bestowinc/bestow-logger": "1.0.26",
"#bestowinc/enroll-sdk-core": "^0.9.40",
"#bestowinc/kindred-ds": "^0.6.2",
"#hookform/resolvers": "^2.7.1",
"#sentry/minimal": "^6.14.1",
"#sentry/react": "^6.3.6",
"#sentry/tracing": "^6.3.6",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^12.1.2",
"#tippyjs/react": "^4.2.5",
"#types/react-slider": "^1.3.1",
"#types/uuid": "^8.3.1",
"#xstate/inspect": "^0.4.1",
"#xstate/react": "^1.3.1",
"auth0-js": "^9.16.4",
"autoprefixer": "^9",
"cleave.js": "^1.6.0",
"fast-glob": "^3.2.7",
"file-loader": "^6.2.0",
"ismobilejs": "^1.1.1",
"jest": "^26.6.3",
"jwt-decode": "^3.1.2",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"lodash.noop": "^3.0.1",
"lodash.unset": "^4.5.2",
"path": "^0.12.7",
"postcss": "^8.3.11",
"postcss-loader": "^4.2.0",
"postcss-scss": "^3.0.4",
"react-hook-form": "^7.15.3",
"react-router-dom": "^5.2.0",
"react-slider": "^1.3.1",
"sass": "^1.32.7",
"styled-components": "^5.3.2",
"styled-system": "^5.1.5",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"tippy.js": "^6.3.1",
"tsconfig": "^7.0.0",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"xstate": "^4.17.0",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.16.4",
"#babel/preset-flow": "^7.16.0",
"#babel/preset-react": "^7.12.10",
"#babel/preset-typescript": "^7.16.0",
"#bestowinc/xray-test-util": "^1.1.4",
"#craco/craco": "^6.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^21.0.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^11.1.1",
"#rollup/plugin-replace": "^3.0.0",
"#rollup/plugin-url": "^6.1.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#types/auth0-js": "^9.14.2",
"#types/chance": "^1.1.1",
"#types/cleave.js": "^1.4.4",
"#types/history": "4.7.9",
"#types/jest": "^26.0.19",
"#types/lodash.get": "^4.4.6",
"#types/lodash.merge": "^4.6.6",
"#types/lodash.noop": "^3.0.6",
"#types/lodash.pick": "^4.4.6",
"#types/node": "^12.19.9",
"#types/react": "^16.14.2",
"#types/react-dom": "^17.0.7",
"#types/react-router-dom": "^5.1.7",
"#types/react-slider": "^1.3.1",
"#types/segment-analytics": "^0.0.34",
"#types/styled-components": "^5.1.15",
"#types/styled-system": "^5.1.13",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "^4.15.0",
"#typescript-eslint/parser": "^4.15.0",
"babel-loader": "8.1.0",
"babel-plugin-styled-components": "^1.13.3",
"chance": "^1.1.7",
"circle-github-bot": "^2.1.0",
"css-loader": "^5.0.2",
"cypress": "9.0.0",
"cypress-terminal-report": "^3.3.4",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"firebase-tools": "^9.10.2",
"husky": "^6.0.0",
"jsonwebtoken": "^8.5.1",
"luxon": "^1.26.0",
"mini-css-extract-plugin": "^1.3.6",
"neat-csv": "^6.0.1",
"pdf-parse": "^1.1.1",
"prettier": "2.2.1",
"progress-bar-webpack-plugin": "^2.1.0",
"react-scripts": "4.0.1",
"rollup": "^2.38.4",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^3.0.1",
"rollup-plugin-url-resolve": "^0.2.0",
"sass-loader": "10.1.1",
"sinon": "^9.2.4",
"source-map-explorer": "^2.5.2",
"style-loader": "^2.0.0",
"typescript": "4.2.2"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"resolutions": {
"tslib": "2.3.1"
},
"external": [
"react",
"react-dom"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "rollup -c --watch",
"build": "rollup -c"
},
"bugs": {
"url": "https://github.com/issues"
},
"homepage": "https://github.com/readme"
}
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.
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.