I currently have a react app which is not running / rendering in IE, I think due to an ES5 / ES6 problem.
The error I get is this: Syntax error.
On the line highlighted below.
if(process.env.NODE_ENV == 'production') {
=> module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
At the top of index.js prior to compilation:
import 'babel-polyfill';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
package.json:
{
"name": "reactapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/polyfill": "^7.8.3",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "^3.0.2",
"#sentry/browser": "^5.10.2",
"adblockdetect": "0.0.2",
"animatewithsass": "^3.2.1",
"axios": "^0.18.1",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.5",
"date-fns": "^2.10.0",
"detectrtc": "^1.4.0",
"easy-peasy": "^3.2.0",
"formik": "^2.0.3",
"google-map-react": "^1.1.5",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"material-design-icons": "^3.0.1",
"material-icons": "^0.3.1",
"node-sass": "^4.13.0",
"platform": "^1.3.5",
"query-string": "^6.10.1",
"react": "^16.11.0",
"react-albus": "^2.0.0",
"react-app-polyfill": "^1.0.6",
"react-color": "^2.18.0",
"react-confirm-alert": "^2.4.1",
"react-dom": "^16.11.0",
"react-dropzone": "^11.1.0",
"react-loader-spinner": "^3.1.5",
"react-media-recorder": "^1.2.0",
"react-paginate": "^6.3.2",
"react-router-dom": "^5.1.2",
"react-rtc-real": "^1.11.22",
"react-scripts": "2.1.8",
"react-select": "^3.1.0",
"react-simple-line-icons": "^1.0.8",
"react-spring": "^8.0.27",
"react-stripe-elements": "^5.1.0",
"react-stripe-script-loader": "^1.0.16",
"react-switch": "^5.0.1",
"react-toastify": "^5.4.0",
"react-toggle": "^4.1.1",
"react-tooltip": "^3.11.2",
"regenerator-runtime": "^0.13.5",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.88.2",
"styled-components": "^4.4.1",
"sweetalert2-react": "^0.8.3",
"videojs": "^1.0.0",
"videojs-record": "^4.0.0",
"webfontloader": "^1.6.28",
"webrtc-adapter": "^7.5.1",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "set NODE_ENV=production && react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"IE 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"IE 11"
]
},
"devDependencies": {
"animate-sass": "^0.8.2",
"es-check": "^5.1.1",
"react-app-rewired": "^2.1.6"
}
}
Inside .babelrc
{
"presets": ["#babel/env","#babel/preset-react",["#babel/preset-env", { "targets": "defaults" }]],
"plugins" : ["#babel/plugin-syntax-dynamic-import"]
}
Can anyone guide me in the right direction as to how to get babel to compile things properly for ES5? You'll notice here instead of ejecting, I'm using react-app-rewired, I don't think that should cause issues, so any help appreciated.
Update:
"Object doesn't support property or method 'repeat'" - when running in development mode. How do I polyfill this? I think this may be the problem.
This is very similar to this Github issue in core-js
As suggested in that thread, you might add this to your preset config
{ modules: false,
useBuiltIns: 'entry',
corejs: 3 }
Or import the function directly
import 'core-js/features/string/repeat';
First In the index.js file the import is for import 'babel-polyfill'; think should be #babel/polyfill. But that would not resolve IE 11 issues.
We had a similar issue, had to switch to core-js for bundling - which you already have. But you will need #babel/core and #babel/runtime-corejs3 as dev dependencies.
Your preset needs to be changed
presets: [
[
"#babel/preset-env", {
"useBuiltIns": "usage",
corejs: { version: 3, proposals: true }
}
]
]
And then replace the code in index.js
imports babel/polyfill;
with
import 'core-js/stable';
If you can use typescript then I'll suggest that you can transform your tsconfig.js file and change target to es5.
If not then create .babelrc file and inside it add this:
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"forceAllTransforms": true,
"corejs": "3.0.0",
"targets": {
"ie": "11"
}
}
]
]
}
Related
I've installed the npm package #yaireo/tagify v4.16.4 however when I try to start my react app I get the following error:
./node_modules/#yaireo/tagify/dist/tagify.js 594:33
Module parse failed: Unexpected token (594:33)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| headerRef = this.dropdown.getHeaderRef(),
| footerRef = this.dropdown.getFooterRef();
> newHeaderElem && headerRef?.parentNode.replaceChild(newHeaderElem, headerRef);
| newFooterElem && footerRef?.parentNode.replaceChild(newFooterElem, footerRef);
| },
My package.json looks like this:
{
"name": "portal_service",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"#ant-design/compatible": "1.1.0",
"#ant-design/icons": "4.7.0",
"#babel/plugin-proposal-decorators": "7.16.5",
"#casl/ability": "3.4.0",
"#casl/react": "1.0.4",
"#craco/craco": "6.4.3",
"#fortawesome/fontawesome-svg-core": "1.2.29",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/pro-duotone-svg-icons": "5.13",
"#fortawesome/pro-light-svg-icons": "5.13",
"#fortawesome/pro-regular-svg-icons": "5.13",
"#fortawesome/pro-solid-svg-icons": "5.13",
"#fortawesome/react-fontawesome": "0.1.11",
"#okta/okta-react": "3.0.1",
"#react-hook/resize-observer": "1.2.5",
"#tisoap/react-flow-smart-edge": "1.0.1",
"#yaireo/tagify": "4.13.1",
"ant-design-pro": "2.3.2",
"antd": "4.16.13",
"antd-img-crop": "3.16.0",
"bootstrap": "4.6.1",
"chart.js": "2.8.0",
"chartjs-plugin-zoom": "0.7.0",
"firebase": "9.6.1",
"google-map-react": "1.1.7",
"jsoneditor": "9.7.4",
"jsoneditor-react": "3.1.2",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.21",
"mobx": "5.15.7",
"mobx-react": "5.4.4",
"mobx-react-lite": "1.5.2",
"moment": "2.24.0",
"moment-timezone": "0.5.34",
"papaparse": "5.3.1",
"prop-types": "15.7.2",
"rc-progress": "2.3.0",
"react": "16.14.0",
"react-beautiful-dnd": "13.0.0",
"react-chartjs-2": "2.7.4",
"react-circle-flags": "^0.0.17",
"react-click-outside": "3.0.1",
"react-cropper": "2.1.8",
"react-dom": "16.14.0",
"react-flow-renderer": "10.0.4",
"react-google-login": "5.1.20",
"react-intl": "2.8.0",
"react-onclickoutside": "6.12.1",
"react-phone-number-input": "3.1.44",
"react-quill": "1.3.3",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.3",
"react-select": "5.2.2",
"react-top-loading-bar": "1.2.0",
"reactstrap": "7.1.0",
"slugify": "1.4.0",
"styled-components": "5.3.3",
"superagent": "7.0.1",
"superagent-promise": "1.1.0",
"uuid": "8.3.2"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "craco start",
"start:withMockServer": "npx concurrently --kill-others 'yarn run mock-server' 'yarn start'",
"build": "craco build",
"test": "craco test --env=jsdom",
"test:withLiveCoverage": "npx concurrently --kill-others 'yarn test --coverage --watchAll' 'npx live-server coverage/lcov-report'",
"eject": "react-scripts eject",
"mock-server": "npx json-server src/utils/mockData.js --port 4000 --watch --delay 1500",
"lint": "eslint ./src",
"lint-fix": "eslint ./src --fix"
},
"devDependencies": {
"babel-plugin-styled-components": "2.0.2",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "3.6.2",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"faker": "4.1.0",
"husky": "1.3.1",
"jest-styled-components": "6.3.4",
"json-server": "0.14.2",
"lint-staged": "8.2.1",
"mobx-react-devtools": "6.1.1",
"react-error-overlay": "6.0.9",
"source-map-explorer": "1.8.0"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"git add"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"cracoConfig": "config/craco.config.js",
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
We are using craco to run our react app. The craco config looks like this:
module.exports = {
babel: {
plugins: [
['#babel/plugin-proposal-decorators', { legacy: true }],
['babel-plugin-styled-components'],
],
},
// Disables react-scripts's own ESLint from running on every compilation. This prevents a very long compilation time.
// We don't need react-scripts to run its own ESLint every time, because we have our own ESLint configuration to use with "npm run lint"
eslint: {
enable: false,
},
};
Does anyone know what I can do to fix the error? We've tried different versions of the npm package but all of them throw a similar error. We really need this package for a feature I am working on so there is no option for an alternative.
I started new project with npx create-react-app and after that npm eject. But when everything completed, in the beginning of each file I get this eslint error:
Parsing error: [BABEL] /Users/admin/Desktop/Work/practise/todo-blockchain/scripts/start.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/admin/Desktop/Work/practise/todo-blockchain/node_modules/babel-preset-react-app/index.js")
I've surfed the net a lot but did not found any answers. I tried to change the babel presets, add plugins but nothing helped.
I'm using MacOS and looking forward to your help
This is my package.json:
{
"name": "todo-blockchain",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.16.0",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"#svgr/webpack": "^5.5.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.1.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.1.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"tonweb": "^0.0.40",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start": " node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|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"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app"
]
}
}
Just to close the question
As mentioned in this link https://github.com/facebook/create-react-app/issues/12070#issuecomment-1086568526
It's an issue related to create-react-app that will probably be fixed in the next version.
Adding the code below to the eslintrc.js resolves the issue for now
"parserOptions": { "babelOptions": { "presets": [ ["babel-preset-react-app", false] ] } }
I have written a set of React components which I wish to publish. However when I try to build them to commonjs format with babel before publishing I get the following error which I cannot find a resolution to.
The project is created and ejected from create-react-app
SyntaxError: src/packages/core/src/MyAppBar/MyAppBar.js: Unexpected token, expected ; (20:5)
18 | import {isEmpty} from "lodash";
19 |
> 20 | type MyAppBarPropsType = {
| ^
21 | position?: string,
22 | commandBarActions?: Array<React$Element<React$ElementType>>,
23 | title?: string,
The build line in my npm scripts is
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.js"
I would have thought that #babel/preset-flow would have been sufficient to deal with flow types in my code.
The presets from my babel.config.js file are as follows
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
For completeness my full package.json and babel.config.js are as follows
package.json
{
"name": "react-ccl",
"version": "0.2.0-alpha",
"description": "Common component library based on xyz look and feel guidelines",
"private": true,
"dependencies": {
"#babel/core": "7.6.0",
"#material-ui/core": "3.9.2",
"#material-ui/icons": "3.0.2",
"#material-ui/lab": "3.0.0-alpha.30",
"#material-ui/styles": "3.0.0-alpha.10",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.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-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": "^6.6.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.0",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"highlight": "^0.2.4",
"highlight.js": "^9.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.8.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",
"react": "^16.10.0",
"react-addons-test-utils": "15.5.1",
"react-app-polyfill": "^1.0.3",
"react-dev-utils": "^9.0.4",
"react-dom": "^16.10.0",
"react-test-renderer": "16.10.0",
"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.4",
"url-loader": "2.1.0",
"webpack": "4.40.2",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"#babel/cli": "7.7.7",
"#babel/node": "7.7.7",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/plugin-transform-react-constant-elements": "7.6.0",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.7",
"#babel/preset-flow": "7.7.4",
"#babel/preset-react": "7.7.4",
"#babel/register": "7.0.0",
"babel-cli": "^6.26.0",
"chokidar": "1.6.1",
"cpx": "^1.5.0",
"cross-env": "^6.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.3",
"flow-bin": "0.113.0",
"flow-typed": "^2.6.2",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"lerna": "3.16.4",
"npm-run-all": "4.0.2",
"prop-types": "15.7.2",
"rimraf": "3.0.0",
"react-docgen": "3.0.0"
},
"scripts": {
"prestart": "npm run gen:docs",
"start": "npm-run-all --parallel start:docs gen:docs-watch",
"start:docs": "node scripts/start.js",
"gen:docs": "node scripts/generateComponentData.js",
"gen:docs-watch": "npm run gen:docs -- --watch",
"build:docs": "node scripts/build.js",
"test": "node scripts/test.js",
"predeploy:docs": "npm run build:docs",
"deploy:docs": "gh-pages -d build",
"flow": "flow",
"build:commonjs": "cross-env NODE_ENV=production babel ./src/packages/core/src --out-dir ./lib --ignore spec.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": {
"roots": [
"<rootDir>/src/packages/core"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/jest-test-setup.js"
],
"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.config.js
const productionPlugins = [
'#babel/plugin-transform-react-constant-elements',
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
[
'babel-plugin-transform-react-remove-prop-types',
{
mode: 'unsafe-wrap',
},
],
];
module.exports = {
presets: ['#babel/preset-flow', '#babel/preset-react', ['#babel/preset-env', {modules: 'commonjs'}]],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-object-rest-spread', { loose: true }],
'#babel/plugin-transform-runtime',
// for IE 11 support
'#babel/plugin-transform-object-assign',
],
ignore: [/#babel[\\|/]runtime/], // Fix a Windows issue.
env: {
cjs: {
plugins: productionPlugins,
},
},
};
Evidently preset-flow was not enough for babel to transpile a flow type defined within a JS file. When I added the following line to devDependencies in my package.json the build worked perfectly.
"babel-plugin-react-remove-properties": "^0.3.0",
I try to test my app created via create-react-app. There is only one test file generated automatically:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
This is my package.json (also i have package-lock.json (~ 15k rows)):
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
When i try to test it using test script i get this error:
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".
Details:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export
{ default as a11yDark } from './a11y-dark';
Also, i don't have .babelrc file. I tried to add .babelrc but it didn't help (or maybe i did it incorrectly)
If you are getting this error when trying to import the javascript styles for the component, make sure you are targetting the
react-syntax-highlighter/dist/cjs/...
instead of the
react-syntax-highlighter/dist/esm/...
Jest should be able to parse that.
So, finally i've solved this.
My final configs are:
babel.config.js:
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
};
package.json:
{
"name": "project",
"version": "1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"jest": {
"transformIgnorePatterns": [
"/node_modules/(?!(react-syntax-highlighter)/)"
]
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^6.7.1",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"react-test-renderer": "^16.12.0",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I'm not sure that this is the best solution, but at least it works
I'm trying to run my tests in repo here: https://github.com/Futuratum/moon.holdings
But I'm getting the following error
/Users/leongaban/projects/Futuratum/moon.holdings/jest.config.js:1
(function (exports, require, module, __filename, __dirname) { import { configure } from 'enzyme'
My tests use to work and I haven't changed anything, so curious as to what could be causing this problem?
My jest.config.js file looks correct:
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
package.json
{
"name": "moon.holdings",
"version": "2.0.0",
"description": "Moon Holdings: track your cryptocurrency portfolio.",
"main": "index.js",
"scripts": {
"dev": "next -p 7777",
"build": "next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --watch --no-cache",
"test-win": "SET NODE_ENV=test&& jest --watch"
},
"author": "Futuratum",
"license": "UNLICENSED",
"dependencies": {
"#zeit/next-sass": "^1.0.1",
"#zeit/next-typescript": "^1.1.1",
"axios": "^0.18.0",
"decko": "^1.2.0",
"next": "^8.0.4-canary.10",
"next-routes": "^1.4.2",
"node-sass": "^4.11.0",
"ramda": "^0.26.1",
"ramda-adjunct": "^2.17.0",
"react": "^16.7.0",
"react-adopt": "^0.6.0",
"react-dom": "^16.7.0",
"react-ga": "^2.5.7",
"react-redux": "^6.0.0",
"react-transition-group": "^2.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "4.0.3",
"tslint": "^5.12.1",
"tslint-react": "^3.6.0",
"typescript": "^3.2.4",
"waait": "^1.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.3.0",
"#babel/preset-typescript": "^7.1.0",
"#types/enzyme": "^3.1.15",
"#types/jest": "^23.3.13",
"#types/next": "^7.0.6",
"#types/ramda": "^0.25.49",
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"#types/react-redux": "^7.0.1",
"#types/styled-components": "4.0.3",
"#types/zeit__next-typescript": "^0.1.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"babel-plugin-sass-vars": "^0.2.1",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"jest": "^24.1.0"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
".*": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "babel-jest",
"^.+\\.tsx?$": "babel-jest"
},
"moduleFileExtensions": [
"js",
"json",
"ts",
"tsx"
],
"modulePaths": [
"<rootDir>/components/",
"<rootDir>/pages/",
"<rootDir>/shared/"
]
}
}
Looks like you accidentally renamed jest.setup.js to jest.config.js in this commit.
Change it back to jest.setup.js and it should work.
Details
jest.config.js is a special file that is used to set Jest configuration options.
enzyme configuration is typically done in a setupTestFrameworkScriptFile file for older versions of Jest or setupFilesAfterEnv for newer versions of Jest.
Your package.json has setupTestFrameworkScriptFile set to jest.setup.js.
Based on that info I suspected that maybe jest.setup.js got accidentally renamed, and was able to find the commit where it happened in the repo history.