EsLint issue of undefined 'Version' in React js - reactjs

node: 14.17.0
React js: 17.0.2
I commit my code I get the error :
✖ npm run lint:eslint:fix found some errors. Please fix them and try committing again.
TypeError: Cannot read property 'version' of undefined
Dev Dependicies:
"devDependencies": {
"#babel/cli": "7.4.3",
"#babel/core": "^7.4.3",
"#babel/eslint-parser": "^7.16.5",
"#babel/eslint-plugin": "^7.16.5",
"#babel/node": "^7.17.10",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"#babel/plugin-proposal-optional-chaining": "^7.14.5",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-modules-commonjs": "7.4.3",
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/preset-env": "^7.17.12",
"#babel/preset-react": "^7.17.12",
"#babel/register": "7.4.0",
"#squoosh/lib": "^0.4.0",
"#types/hoist-non-react-statics": "^3.3.1",
"add-asset-html-webpack-plugin": "3.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"chai": "^4.2.0",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.2",
"css-loader": "3.4.2",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "^8.0.1",
"imports-loader": "0.8.0",
"lint-staged": "8.1.5",
"ngrok": "^4.2.2",
"node-plop": "0.18.0",
"node-sass": "^4.14.1",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"plop": "2.3.0",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "^1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-router-sitemap-generator": "^0.0.8",
"react-test-renderer": "16.8.6",
"rimraf": "2.6.3",
"sass-loader": "^7.1.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.4",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.46.0",
"webpack-cli": "3.3.12",
"webpack-dev-middleware": "3.7.3",
"webpack-hot-middleware": "2.25.1",
"webpack-pwa-manifest": "4.3.0",
"whatwg-fetch": "3.0.0"
}
why I am getting this error. what I did wrong?

Related

lingui macros throw error with bable-plugin-macros

I'm using lingui package in my React project with CRA and
I get an error when using lingui/macro modules t method.
When I build project got webpack warning message.
Like this.
Critical dependency: the request of a dependency is an expression
This seems to be due to bable-plugin-macro, but I don't know the exact cause. Help me!!
Here my error & codes
import { t } from '#lingui/macro';
render() {
return (
<ListItemText primary={i18n._(t`Apps`)} />
)
}
error:
ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in 'D:\myProject\node_modules\import-fresh\node_modules\resolve-from'
# ./node_modules/import-fresh/node_modules/resolve-from/index.js 3:15-32
# ./node_modules/import-fresh/index.js
# ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
# ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
package.json:
"dependencies": {
"#babel/core": "^7.10.2",
"#condenast/xml-to-react": "^1.0.0",
"#date-io/moment": "1.3.13",
"#lingui/core": "^2.9.1",
"#lingui/react": "^2.9.1",
"#loadable/component": "^5.12.0",
"#material-ui/core": "^4.2.1",
"#material-ui/icons": "^4.2.1",
"#material-ui/lab": "^4.0.0-alpha.21",
"#material-ui/pickers": "^3.2.10",
"#svgr/webpack": "4.1.0",
"#types/crypto-js": "^3.1.43",
"#types/jxon": "^2.0.0",
"#types/lingui__macro": "^2.7.3",
"#types/lingui__react": "^2.8.2",
"#types/loadable__component": "^5.10.0",
"#types/lodash": "^4.14.149",
"#types/material-ui": "^0.21.7",
"#types/node": "^12.12.21",
"#types/react-beautiful-dnd": "^12.1.2",
"#types/react-loadable": "^5.5.3",
"#types/react-router-dom": "^5.1.3",
"#types/recharts": "^1.8.10",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.1",
"babel-jest": "^24.8.0",
"babel-loader": "^8.1.0",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^9.0.0",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"crypto-js": "^4.0.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.5.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"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",
"jxon": "^2.0.0-beta.5",
"lodash": "^4.17.15",
"material-table": "^1.54.2",
"md5": "^2.2.1",
"mini-css-extract-plugin": "0.5.0",
"mobx": "4.3.1",
"mobx-react": "^6.1.1",
"moment": "^2.24.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.8.6",
"react-app-polyfill": "^1.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-contenteditable": "^3.3.2",
"react-dev-utils": "^9.0.1",
"react-dom": "^16.8.6",
"react-json-editor-ajrm": "^2.5.9",
"react-loadable": "^5.5.0",
"react-perf-devtool": "^3.1.8",
"react-router-dom": "^5.0.1",
"recharts": "^1.8.5",
"resolve": "1.10.0",
"semver": "6.0.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-pnp": "1.1.2",
"tslint": "^5.20.1",
"url-loader": "1.1.2",
"uuid": "^7.0.2",
"validator": "^11.1.0",
"webpack": "4.29.6",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"babel": {
"presets": [
"react-app",
"babel-preset-env",
"babel-preset-react",
"#lingui/babel-preset-react"
],
"plugins": [
"macros",
"babel-plugin-macros",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
]
],
"ignore": [
"node_modules",
"public/dist"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.7.4",
"#babel/preset-env": "^7.10.2",
"#lingui/cli": "^2.9.1",
"#lingui/macro": "^2.9.1",
"autoprefixer": "^9.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-macros": "^2.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.2.0",
"cssnano": "^4.1.10",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"fork-ts-checker-webpack-plugin": "^3.1.1",
"hard-source-webpack-plugin": "^0.13.1",
"node-cmd": "^3.0.0",
"node-sass": "^4.9.3",
"prettier": "^1.18.2",
"prettier-eslint": "^9.0.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"ts-loader": "^6.2.1",
"typescript": "^3.7.3",
"typescript-eslint-parser": "^18.0.0",
"webpack-cli": "^3.3.6"
},

React Jest test error Messages must be statically evaluate-able for extraction

When I am trying to run my tests i am facing below error
Tests are failing with below error
SyntaxError: /Users/Documents/projects/src/components/common/abc/xyz.js: [React Intl] Messages must be statically evaluate-able for extraction.
at File.buildCodeFrameError (node_modules/#babel/core/lib/transformation/file/file.js:262:12)
at NodePath.buildCodeFrameError (node_modules/#babel/traverse/lib/path/index.js:157:21)
at evaluatePath (node_modules/babel-plugin-react-intl/lib/index.js:60:20)
at getMessageDescriptorValue (node_modules/babel-plugin-react-intl/lib/index.js:77:31)
at node_modules/babel-plugin-react-intl/lib/index.js:134:35
**at Array.forEach (<anonymous>)**
at evaluateMessageDescriptor (node_modules/babel-plugin-react-intl/lib/index.js:128:41)
at PluginPass.JSXOpeningElement (node_modules/babel-plugin-react-intl/lib/index.js:265:38)
at newFn (node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (node_modules/#babel/traverse/lib/path/context.js:53:20)
Below is my babelrc
{
"presets": [
"#babel/preset-env",
"react-app",
"#babel/preset-flow",
],
"plugins": [
"#babel/plugin-transform-destructuring",
"#babel/plugin-proposal-object-rest-spread",
[
"#babel/plugin-transform-runtime",
{
"corejs": 2
}
],
[
"react-intl",
{
"messagesDir": "./src/assets/i18n/messages",
"enforceDescriptions": false
}
]
]
}
Jest Config
module.exports = {
verbose: true,
coverageReporters: ["lcov", "text"],
suiteName: "jest tests",
output: "test/junit.xml",
classNameTemplate: "{classname} - {title}",
titleTemplate: "{classname} - {title}",
ancestorSeparator: " > ",
usePathForSuiteName: "true",
testURL: "http://localhost/",
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper":{
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(gif|ttf|eot|svg|png)$": "<rootDir>/__mocks__/fileMock.js",
"^react-dnd$": "<rootDir>/node_modules/react-dnd/lib/cjs",
"^dnd-core$": "<rootDir>/node_modules/dnd-core/lib/cjs",
"^react-dnd-html5-backend$":
"<rootDir>/node_modules/react-dnd-html5-backend/lib/cjs",
"^react-dnd-touch-backend$":
"<rootDir>/node_modules/react-dnd-touch-backend/lib/cjs",
"^react-dnd-test-backend$":
"<rootDir>/node_modules/react-dnd-test-backend/lib/cjs",
"^react-dnd-test-utils$":
"<rootDir>/node_modules/react-dnd-test-utils/lib/cjs"
},
"setupFiles": ["jest-canvas-mock"]
};
Package Json
"dependencies": {
"#babel/core": "^7.0.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/runtime-corejs2": "^7.5.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.0",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.0",
"bootstrap-daterangepicker": "^2.1.30",
"bootstrap-sass": "^3.3.7",
"britecharts": "^2.9.2",
"browser-locale": "^1.0.3",
"bytes": "^3.0.0",
"classnames": "^2.2.5",
"crypto-browserify": "^3.12.0",
"css-loader": "^0.28.7",
"d3-selection": "^1.0.0-alpha.12",
"dom-to-image": "^2.0.6",
"eslint-config-react-tools": "^1.1.2",
"fast-memoize": "^2.5.1",
"flow-bin": "^0.69.0",
"font-awesome": "^4.7.0",
"glob": "^7.1.2",
"history": "^4.7.2",
"html-webpack-plugin": "^2.30.1",
"https-browserify": "^1.0.0",
"husky": "^0.14.3",
"immutability-helper": "^2.5.1",
"immutable": "^3.8.1",
"jest": "^22.4.3",
"jquery": "^3.2.1",
"jspdf": "^1.3.5",
"lint-staged": "^7.0.5",
"loadash": "^1.0.0",
"lodash": "^4.17.10",
"lodash-webpack-plugin": "^0.11.5",
"mkdirp": "^0.5.1",
"moment": "^2.22.1",
"moment-with-locales-es6": "^1.0.1",
"node-sass": "^4.9.0",
"node-sass-chokidar": "^1.3.5",
"normalizr": "^3.2.4",
"npm-run-all": "^4.1.1",
"os-browserify": "^0.3.0",
"popper.js": "^1.14.7",
"prop-types": "^15.6.0",
"query-string": "^5.1.1",
"react": "^16.9.0",
"react-big-calendar": "^0.19.0",
"react-bootstrap": "^0.31.5",
"react-bootstrap-daterangepicker": "^4.1.0",
"react-calendar": "^2.14.0",
"react-contextmenu": "^2.8.0",
"react-cropper": "^1.0.1",
"react-data-grid": "^2.0.73",
"react-data-grid-addons": "^2.0.73",
"react-dom": "16.9.0",
"react-files": "^2.4.3",
"react-grid-layout": "^0.16.0",
"react-highlight-words": "^0.11.0",
"react-iframe": "^1.1.0",
"react-intl": "^2.4.0",
"react-loadable": "^5.3.1",
"react-modal": "^3.3.2",
"react-onclickoutside": "^6.7.0",
"react-redux": "^5.0.6",
"react-redux-loading-bar": "^3.1.0",
"react-router": "4.2.0",
"react-router-dom": "4.2.2",
"react-router-redux": "^4.0.8",
"react-saga": "^0.2.6",
"react-scripts": "^1.1.3",
"react-select": "^1.1.0",
"react-sortable-tree": "^2.1.1",
"react-table": "^6.8.6",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-form": "7.1.2",
"redux-immutable": "^4.0.0",
"redux-router": "^2.1.2",
"redux-saga": "^0.15.6",
"reselect": "^3.0.1",
"sass-loader": "^6.0.6",
"shx": "^0.2.2",
"style-loader": "^0.19.0",
"underscore": "^1.8.3",
"uuid": "^3.2.1",
"webpack": "^3.6.0"
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/node": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-destructuring": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-flow": "^7.0.0",
"#types/jest": "^21.1.8",
"babel-eslint": "^9.0.0",
"babel-plugin-react-intl": "^2.3.1",
"babel-preset-react-app": "^7.0.2",
"cross-env": "^5.0.5",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^4.3.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-standard": "^3.1.0",
"jest-canvas-mock": "^2.2.0",
"jest-junit": "^3.4.1",
"json-server": "^0.12.1",
"prettier": "^1.12.1",
"prettier-eslint": "^8.2.2",
"react-test-renderer": "^16.3.2",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-saga-testing": "^1.0.5"
},
"jest-junit": {
"suiteName": "jest tests",
"output": "test/junit.xml",
"classNameTemplate": "{classname} - {title}",
"titleTemplate": "{classname} - {title}",
"ancestorSeparator": " > ",
"usePathForSuiteName": "true"
}

MobX with React

I am new to MobX with React. So wanted to practice a bit. I created a project with Create React App. I have my package.json as
{
"dependencies": {
"#babel/core": "7.6.0",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"mini-css-extract-plugin": "0.8.0",
"mobx": "^5.15.1",
"mobx-react": "^6.1.4",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-app-polyfill": "^1.0.4",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.4",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"source-map-explorer": "^2.0.1",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.41.0",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.1.1",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"flow-bin": "^0.111.3",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0"
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy", { "legacy": true, "decoratorsBeforeExport": false }]
]
}
}
But this is throwing me an error as below
I searched online. Everywhere it is showing to add the above options like legacy, decoratorsBeforeExport, but still no luck. I tried removing all the options, keeping one at a time and the above config also for babel plugins. Still, I am getting this issue.

Babel 5 plugin is being run with an unsupported Babel version. Tried to update babel-relay-plugin

Doing Lynda - Building and Deploying a Full-Stack React Application tutorial, and get stuck at a point, get following error:
./src/index.js
Error: [BABEL] /Users/kukodajanos/Workspace/ticket/src/index.js: The (relay-query) Babel 5 plugin is being run with an unsupported Babel version. (While processing: "/Users/kukodajanos/Workspace/ticket/node_modules/babel-plugin-react-relay/lib/index.js")
at Array.reduce (<anonymous>)
I tried suggestion written here: https://github.com/facebookarchive/relay-starter-kit/issues/74
npm i babel-relay-plugin#latest --save
It did not help, give same error.
Dependencies from package.json here:
"dependencies": {
"#babel/core": "7.5.5",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "1.13.0",
"#typescript-eslint/parser": "1.13.0",
"babel-eslint": "10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.3",
"babel-preset-react-app": "^9.0.1",
"babel-relay-plugin": "^0.11.0",
"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": "^6.1.0",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.8.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0",
"jest-watch-typeahead": "0.3.1",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-router": "3.0.2",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.2",
"url-loader": "2.1.0",
"webpack": "4.39.1",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
}
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}

Jest is not running in react project

I am getting the following error:
Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In
D:\final-repo\ISGCustomerPortalClientSide\node_modules\babel-preset-react\lib\index.js
Any idea as to why Jest won't run ? I read it has something to do with babel, but I didn't manage to grasp as to why.
"devDependencies": {
"autoprefixer": "7.1.4",
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.6",
"babel-polyfill": "6.23.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-1": "6.24.1",
"browser-sync": "2.26.7",
"chalk": "2.0.1",
"concurrently": "3.5.0",
"connect-history-api-fallback": "1.3.0",
"coveralls": "3.0.4",
"css-loader": "3.0.0",
"enzyme": "3.9.0",
"enzyme-adapter-react-16": "1.12.1",
"eslint": "4.2.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-react": "7.3.0",
"eslint-watch": "5.1.2",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "1.1.11",
"hard-source-webpack-plugin": "0.7.4",
"history": "4.6.0",
"html-webpack-plugin": "3.2.0",
"identity-obj-proxy": "3.0.0",
"jest": "24.8.0",
"jest-cli": "24.8.0",
"json-loader": "0.5.4",
"mock-local-storage": "1.0.5",
"mockdate": "2.0.1",
"node": "8.9.4",
"node-sass": "4.11.0",
"opn-cli": "3.1.0",
"postcss-loader": "2.0.6",
"prompt": "1.0.0",
"prop-types": "15.5.10",
"raf": "3.3.2",
"react-hot-loader": "4.0.1",
"react-test-renderer": "16.0.0",
"redux-immutable-state-invariant": "2.0.0",
"redux-mock-store": "1.3.0",
"replace": "1.1.0",
"rimraf": "2.6.1",
"sass-loader": "6.0.6",
"style-loader": "0.21.0",
"url-loader": "1.0.1",
"webpack": "4.6.0",
"webpack-bundle-analyzer": "3.3.2",
"webpack-dev-middleware": "3.1.3",
"webpack-hot-middleware": "2.22.1",
"webpack-md5-hash": "0.0.6"
},

Resources