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"
},
Related
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?
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"
},
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.
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"
}
I am facing random test failures when running Test Suite with an exception of 'cannot read property of undefined'
I am guessing it has something to do with race conditions happening somewhere but to my knowledge wherever the code failure points i have a await in front of those methods.
I read somewhere it could be a version issue with
"react-test-renderer": "^16.5.2"
Below are the dependencies that i am using:
"devDependencies": {
"apollo-boost": "^0.1.9",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^23.0.1",
"babel-loader": "^7.1.4",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-css-modules": "^3.4.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"classnames": "^2.2.6",
"commander": "^2.16.0",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"enzyme-to-json": "^3.3.4",
"eslint-plugin-graphql": "^3.0.3",
"file-loader": "^1.1.11",
"flow": "^0.2.3",
"flow-bin": "^0.93.0",
"flow-typed": "^2.5.1",
"graphql-code-generator": "^0.17.0",
"graphql-codegen-flow": "^0.17.0",
"graphql-codegen-flow-resolvers": "^0.17.0",
"graphql-tag": "^2.9.2",
"graphql-tools": "^4.0.4",
"grid-styled": "^4.1.1",
"isomorphic-fetch": "^2.2.1",
"jest": "^23.1.0",
"leasot": "^6.3.0",
"nock": "^9.4.3",
"nodemon": "^1.18.6",
"normalize.css": "^8.0.0",
"npm-watch": "^0.6.0",
"react": "^16.7.0",
"react-apollo": "^2.3.2",
"react-dates": "^17.2.0",
"react-dom": "^16.3.1",
"react-ga": "^2.5.7",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-test-renderer": "^16.5.2",
"react-toastify": "^4.2.0",
"recharts": "^1.1.0",
"redis-mock": "^0.43.0",
"redux": "^4.0.0",
"reselect": "^3.0.1",
"rimraf": "^2.6.2",
"sinon": "^6.0.0",
"umzug": "^2.1.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.3",
"webpack-dev-middleware": "^3.1.3"
}
"dependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"bluebird": "^3.5.0",
"body-parser": "^1.16.0",
"camelcase": "^5.0.0",
"casual-browserify": "^1.5.19-2",
"cheerio": "^1.0.0-rc.2",
"connect-redis": "^3.4.0",
"cookie-parser": "^1.4.3",
"date-fns": "^1.29.0",
"elasticsearch": "^15.1.1",
"express": "^4.14.0",
"express-graphql": "^0.6.12",
"express-session": "^1.15.6",
"express-socket.io-session": "^1.3.5",
"file-loader": "^1.1.11",
"graphql": "^0.13.2",
"graphql-bigint": "^1.0.0",
"graphql-relay": "^0.5.5",
"graphql-sequelize": "^8.3.1",
"graygelf": "^1.2.0",
"immutable": "^4.0.0-rc.9",
"lodash": "^4.17.10",
"mkdirp": "^0.5.1",
"moment": "^2.22.2",
"mysql2": "^1.5.3",
"n": "^2.1.12",
"nc": "^1.0.2",
"node-resque": "^5.5.1",
"node-schedule": "^1.3.2",
"pm2": "^2.2.3",
"redis": "^2.8.0",
"request": "^2.87.0",
"request-promise": "^4.2.2",
"winston": "^3.0.0"
}
I am expecting tests to be consistent with either failures/success.
Can someone help understand what is going wrong?
Looks like there was some race condition in the code and adding waits(which is probably the worst way of solving anything!) helped.