Babel 7 spread syntax in IE/Edge not working - reactjs

So i have babel 7 installed, along with the plugin "#babel/plugin-proposal-object-rest-spread" included within my preset-env, however I'm still getting the following error as it hasn't transpiled my spread operators back into es2015.
SCRIPT1028: Expected identifier, string or number
I've tried referencing the plugin in the plugin array within my .babelrc file.
My .babelrc file:
{
"presets": [
"#babel/preset-react",
"#babel/preset-env", {
"include": [
"#babel/plugin-proposal-object-rest-spread"
]
}
],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
]
}
My package.json dependencies/dev dependencies:
"dependencies": {
"#babel/polyfill": "^7.2.5",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.3",
"core-js": "^2.6.3",
"dotenv": "^6.1.0",
"get-base64": "^1.3.0",
"history": "^4.7.2",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react": "^16.6.0",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.6.0",
"react-onclickoutside": "^6.7.1",
"react-redux": "^5.1.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-select": "^2.1.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.5",
"redux-thunk": "^2.3.0",
"svg-url-loader": "^2.3.2",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.3.1",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.0",
"eslint": "^5.8.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"interpolate-html-plugin": "^3.0.0",
"node-sass": "^4.9.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglify-es-webpack-plugin": "^0.10.0",
"url-loader": "^1.1.2"

Looks like you're using Webpack, and you have babel-loader installed.
That being the case, here are two quick things to check:
Are you sure you're using that loader in your webpack config for js files?
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
Are there any js assets bypassing Webpack, "missing out" on that loader?
(Edit): And if "no" to those, might you also need "#babel/plugin-transform-spread" to capture spreads in an array, since "#babel/plugin-proposal-object-rest-spread" is object-specific?

Related

Version upgrade issue of react-scripts v4-> v5 and craco v6 -> v7

In existing project we were trying to upgrade react-scripts from V4.0.3 => V5.0.1. After upgrade, Craco also need upgradation, so we have upgraded Craco V6.1.2 => V7.0.0. It creating issue with webpack-modernizr-loader. webpack-dev-server also not working. Below i have mentioned errors which i am facing.
node_modules/#craco/craco/dist/lib/plugin-utils.js:26
throw new Error("".concat(message, "\n\n") +
^
Error: failed to add webpack-modernizr-loader
This error probably occurred because you updated react-scripts or craco. Please try updating craco to the latest version:
$ yarn upgrade craco
Or:
$ npm update craco
If that doesn't work, craco needs to be fixed to support the latest version.
Please check to see if there's already an issue in the gsoft-inc/craco repo:
https://github.com/gsoft-inc/craco/issues?q=is%3Aissue+webpack
If not, please open an issue and we'll take a look. (Or you can send a PR!)
You might also want to look for related issues in the craco and create-react-app repos:
https://github.com/dilanx/craco/issues?q=is%3Aissue+webpack
https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack
at throwUnexpectedConfigError (/node_modules/#craco/craco/dist/lib/plugin-utils.js:26:11)
at throwError (/client/craco.config.js:6:5)
at configure (/client/craco.config.js:52:40)
at giveTotalControl (/node_modules/#craco/craco/dist/lib/features/webpack/merge-webpack-config.js:76:25)
at mergeWebpackConfig (/node_modules/#craco/craco/dist/lib/features/webpack/merge-webpack-config.js:116:38)
at overrideWebpackDev (/node_modules/#craco/craco/dist/lib/features/webpack/override.js:8:80)
at //node_modules/#craco/craco/dist/scripts/start.js:21:39
npm ERR! Lifecycle script start-local failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: client#1.0.0
npm ERR! at location: /client
Warning for Https & Middleware. Unable to resolve from config options.
waring
Craco Config:
const path = require('path');
const { addBeforeLoader, loaderByName, throwUnexpectedConfigError } = require('#craco/craco');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const throwError = (message) =>
throwUnexpectedConfigError({
packageName: 'craco',
githubRepo: 'gsoft-inc/craco',
message,
githubIssueQuery: 'webpack',
});
module.exports = () => {
const plugins = [];
// if (process.env.NODE_ENV !== "production") {
// plugins.push(new BundleAnalyzerPlugin())
// }
return {
eslint: {
enable: true,
},
style: {
css: {
loaderOptions: {
modules: { localIdentName: '[local]_[hash:base64:5]' },
},
},
},
webpack: {
alias: {
react: path.resolve(__dirname, '../node_modules', 'react'),
'react-dom': path.resolve(__dirname, '../node_modules', 'react-dom'),
'modernizr': path.resolve(__dirname, "./.modernizrrc.js")
},
plugins,
configure: webpackConfig => {
// Adding modernizr loader Start
const modernizrLoader = {
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/,
};
const { isAdded: modernizrLoaderIsAdded } = addBeforeLoader(webpackConfig, loaderByName('url-loader'), modernizrLoader);
if (!modernizrLoaderIsAdded) throwError('failed to add webpack-modernizr-loader');
// Adding modernizr loader End
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
);
const [ clientSrc ] = webpackConfig.resolve.plugins[scopePluginIndex].appSrcs;
const psvServices = path.resolve(clientSrc,'../..');
webpackConfig.resolve.plugins[scopePluginIndex].appSrcs.push(psvServices);
return webpackConfig;
}
}
}
};
Tried to upgrade craco with react-scripts to latest versions. It's not working for me. Application is breaking by upgradation. Craco config style object not configuring properly, haviny issue with webpack-modernizr-loader.
Project dependencies:
"dependencies": {
"#babel/polyfill": "^7.0.0",
"#babel/runtime-corejs2": "^7.4.3",
"#instana/collector": "^1.129.0",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.49",
"algoliasearch": "^3.29.0",
"apollo-errors": "^1.9.0",
"apollo-server-koa": "^1.3.4",
"aws-sdk": "^2.281.1",
"base-64": "^0.1.0",
"basic-auth": "^2.0.0",
"blocked": "^1.3.0",
"bunyan": "^1.8.12",
"cheerio": "^1.0.0-rc.2",
"classnames": "^2.2.6",
"cls-hooked": "^4.2.2",
"consul": "^0.34.0",
"cross-env": "^5.2.0",
"crypto-js": "^3.1.9-1",
"csvtojson": "^1.1.9",
"date-fns": "^2.11.1",
"debug": "^3.1.0",
"dotenv": "^8.2.0",
"draft-js": "0.10.4",
"draft-js-export-html": "^1.3.3",
"draft-js-plugins-editor": "^2.1.1",
"ejs": "^3.1.8",
"element-scroll-polyfill": "^1.0.1",
"eslint-plugin-react-hooks": "^4.2.0",
"fetch-timeout": "^0.0.2",
"flexboxgrid": "^6.3.1",
"form-data": "^2.3.2",
"graphql": "^0.13.2",
"graphql-tools": "^3.0.5",
"hare-niemeyer": "^2.0.0",
"history": "^4.7.2",
"humps": "^2.0.1",
"jest-canvas-mock": "^2.2.0",
"joi": "^17.6.4",
"jsonwebtoken": "^8.3.0",
"koa": "^2.5.2",
"koa-body": "^4.0.4",
"koa-bunyan-logger": "^2.1.0",
"koa-compress": "^3.0.0",
"koa-convert": "^1.2.0",
"koa-cookie": "^1.0.0",
"koa-cors": "0.0.16",
"koa-json": "^2.0.2",
"koa-router": "^7.4.0",
"koa-validate": "^1.0.7",
"lodash": "^4.17.21",
"memoize-one": "^5.1.1",
"merge-graphql-schemas": "^1.5.1",
"modernizr": "^3.12.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.21",
"mutation-observer": "^1.0.3",
"node-fetch": "^2.6.7",
"normalize.css": "^8.0.0",
"npm-link-shared": "^0.5.6",
"oauth-1.0a": "^2.2.4",
"object-hash": "^1.3.1",
"openapi-request-validator": "^10.0.0",
"openapi-response-validator": "^10.0.0",
"openapi-schema-validator": "^10.0.0",
"parse-domain": "^2.1.6",
"pg": "^8.6.0",
"pg-format": "^1.0.4",
"pg-pool": "^3.2.2",
"prop-types": "^15.6.2",
"puresql": "^1.8.0",
"query-string": "5",
"raf": "^3.4.1",
"react": "^17.0.2",
"react-aria-live": "^2.0.5",
"react-card-flip": "^1.0.11",
"react-copy-to-clipboard": "^5.0.1",
"react-day-picker": "^7.1.10",
"react-dom": "^17.0.2",
"react-dotdotdot": "^1.2.3",
"react-dropzone": "^4.2.13",
"react-grid-layout": "^0.18.3",
"react-html-parser": "^2.0.2",
"react-lazyload": "^2.6.2",
"react-media": "^1.8.0",
"react-modal": "^3.5.1",
"react-paginate": "^6.2.1",
"react-popper": "^1.3.3",
"react-redux": "^7.2.6",
"react-router-dom": "5.3.0",
"react-scroll": "^1.7.10",
"react-split-pane": "^0.1.87",
"react-sticky": "^6.0.3",
"react-tabs": "^2.2.2",
"react-timeout": "^1.1.1",
"react-tooltip": "^3.11.1",
"react-transition-group": "^4.4.1",
"react-truncate": "^2.4.0",
"react-virtualized": "^9.21.0",
"reactable": "1.0.0",
"recharts": "^2.1.15",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.7",
"redux-localstorage": "^0.4.1",
"redux-thunk": "^2.3.0",
"request": "^2.88.0",
"request-ip": "^2.1.3",
"reselect": "^4.0.0",
"resize-observer-polyfill": "^1.5.1",
"sequelize": "^6.6.5",
"swagger2-koa": "^1.0.2",
"text-encoding": "^0.6.4",
"uglify-js": "^3.13.3",
"universal-cookie": "^2.2.0",
"url-pattern": "^1.0.3",
"use-resize-observer": "^6.1.0-alpha.3",
"uuid": "^3.3.2",
"validate.js": "^0.12.0",
"whatwg-fetch": "^3.4.1",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#babel/cli": "^7.12.10",
"#babel/core": "^7.14.6",
"#babel/node": "^7.14.7",
"#babel/eslint-parser": "^7.19.1",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#craco/craco": "^7.0.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/react-hooks": "^7.0.0",
"#testing-library/user-event": "^12.1.10",
"#welldone-software/why-did-you-render": "^2.4.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"autoprefixer": "^9.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.23.0",
"browser-sync": "^2.27.10",
"command-line-args": "^5.0.2",
"concurrently": "^6.3.0",
"connect-history-api-fallback": "^1.5.0",
"css-loader": "^6.7.1",
"cypress-failed-log": "^2.1.0",
"enzyme": "^3.11.0",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"file-loader": "^1.1.11",
"highlight.js": "^9.12.0",
"husky": "^8.0.1",
"hygen": "^6.2.11",
"identity-obj-proxy": "^3.0.0",
"jest-junit": "^1.5.1",
"json-loader": "^0.5.7",
"lerna": "^5.4.0",
"local-ssl-proxy": "^1.3.0",
"madge": "^5.0.1",
"markdown-it": "^13.0.0",
"nodemon": "^2.0.20",
"path-to-regexp": "^2.2.1",
"pixrem": "^5.0.0",
"postcss": "^7.0.14",
"postcss-apply": "^0.12.0",
"postcss-calc": "^7.0.1",
"postcss-custom-properties": "^8.0.10",
"postcss-custom-selectors": "^5.1.2",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-media-minmax": "^4.0.0",
"postcss-nesting": "^7.0.0",
"postcss-selector-matches": "^4.0.0",
"postcss-selector-not": "^4.0.0",
"prettier": "^2.3.0",
"react-hot-loader": "^4.3.4",
"react-router-sitemap": "^1.2.0",
"react-scripts": "^5.0.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "^1.5.3",
"regenerator-runtime": "^0.13.2",
"rimraf": "^2.6.2",
"should": "^13.2.2",
"sqlite3": "^5.1.1",
"style-loader": "^3.3.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^19.0.0",
"url-loader": "^4.1.1",
"wait-for-expect": "^3.0.1",
"webpack-bundle-analyzer": "^4.4.2"
},

babel 7 how to connect polyfill correctly?

How to connect polyfill correctly?
I read all the documentation Babel 7 and followed it. Below you can see my settings.
if I add this in the webpack config
entry: [
'core-js/stable',
'regenerator-runtime/runtime',
'./main.js'
],
then everything works. but according to the documentation this line can be removed, since all the settings in the babel.config.js
If i remove from entry this line, redux store not working in IE11
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: [
[
'#babel/preset-env',
{
debug: true,
useBuiltIns: 'entry',
corejs: {
version: '3.6',
proposals: false
},
}
],
'#babel/preset-react',
'rsuite'
],
plugins: [
'react-hot-loader/babel',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-export-default-from',
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-syntax-object-rest-spread',
'#babel/plugin-transform-arrow-functions',
'#babel/plugin-transform-async-to-generator',
'#babel/plugin-transform-classes',
'#babel/plugin-transform-parameters',
'#babel/plugin-transform-property-literals',
['#babel/plugin-transform-runtime',
{
corejs: {
version: 3,
proposals: true
}
}
],
'#babel/plugin-transform-spread',
'#babel/plugin-transform-template-literals',
'babel-plugin-styled-components',
]
};
};
package.json
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/plugin-proposal-object-rest-spread": "^7.9.5",
"#babel/plugin-syntax-object-rest-spread": "^7.8.3",
"#babel/plugin-transform-arrow-functions": "^7.8.3",
"#babel/plugin-transform-async-to-generator": "^7.8.3",
"#babel/plugin-transform-classes": "^7.9.5",
"#babel/plugin-transform-parameters": "^7.9.5",
"#babel/plugin-transform-property-literals": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/plugin-transform-spread": "^7.8.3",
"#babel/plugin-transform-template-literals": "^7.8.3",
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#devexpress/dx-react-grid-material-ui": "^2.4.0",
"babel-eslint": "^7.2.3",
"babel-helper-annotate-as-pure": "^7.0.0-beta.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.2",
"babel-plugin-styled-components": "^1.10.7",
"babel-preset-rsuite": "^4.0.1",
"clean-webpack-plugin": "^3.0.0",
"colors": "^1.3.2",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.7.0",
"optimize-css-assets-webpack-plugin": "^3.2.1",
"react-highlight-words": "^0.10.0",
"react-hot-loader": "^4.7.2",
"redux-saga": "^0.16.2",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"webpack": "^4.42.1",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"#babel/runtime": "^7.9.2",
"#babel/runtime-corejs3": "^7.9.2",
"#hot-loader/react-dom": "^16.13.0",
"axios": "^0.19.2",
"c3": "0.4.11",
"cookie": "^0.3.1",
"core-js": "^3.6.5",
"date-fns": "^2.0.0",
"file-saver": "^2.0.2",
"jquery": "^3.4.1",
"js-base64": "^2.5.2",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"normalizr": "^3.3.0",
"prop-types": "^15.7.2",
"query-string": "^5.1.1",
"ramda": "^0.26.1",
"rc-tree": "^3.1.1",
"react": "^16.8.3",
"react-datepicker": "^2.8.0",
"react-dom": "^16.8.3",
"react-html-parser": "^2.0.2",
"react-paginate": "^6.3.0",
"react-redux": "^7.1.0-rc.1",
"react-router-dom": "^4.4.0-beta.7",
"react-scrollbar": "^0.5.6",
"react-select": "^2.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.5",
"reselect": "^3.0.1",
"rsuite": "^4.1.4",
"styled-components": "^4.1.3"
}
webpack rules
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.less$/,
exclude: /node_modules/,
use: cssLoaders('less-loader')
},
{
test: /\.(png|jpg|svg|gif?)$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2|eot|ttf|otf?)$/,
use: 'file-loader'
},
]
},
Just don't remove these lines you've added for the polyfills
entry: [
'core-js/stable',
'regenerator-runtime/runtime',
'./main.js'
],
You are doing right, give us the link to the documentation where it is said this line can be removed. I think it's a misunderstanding.
Or maybe you are missing an other babel plugin ;)
UPDATE 2020-04-17
As it is said for #babel-polyfill
As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):
So install npm i core-js and npm i regenerator-runtime
Then in your webpack config file you manage the entry points like that
...
entry: {
bundle: [require.resolve('core-js/stable'), require.resolve('regenerator-runtime/runtime'), paths.srcClient]
},
...
Then you are good to go
I think this is due to the fact that the react does not support ie10. I get an error in ie10 Set in undefined and in ie11 the redux store is not loaded. According to the documentation, the react needs to be imported polyfill globally.
https://reactjs.org/docs/javascript-environment-requirements.html

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"
}

Uncaught Error: only one instance of babel-polyfill is allowed error on production

I tried all the potential solutions but they did not work. What happens if I have babel-polyfill error on production. Some browsers do not work?
📷
I am currently using react-loadable to create chunks by page. After that I am getting babel-polyfill error.
webpack.prod.js
entry: ['babel-polyfill', path.resolve(CWD, './react/containers/root/root.prod.js')],
.babelrc
{
"presets":[
"react",
"es2015",
"stage-2"
],
"plugins":[
"react-loadable/babel",
"syntax-dynamic-import",
"dynamic-import-node",
[
"babel-plugin-webpack-alias",
{
"config":"${PWD}/config/aliases/aliases.config.js"
}
],
[
"import-inspector",
{
"serverSideRequirePath":true,
"webpackRequireWeakId":true
}
]
]
}
​
and uses babelrc with babel-core like this for node server
babel-core/register(babelrc)
And adding this plugins to the babel-loader
const plugins = [
// 'transform-decorators-legacy',
'syntax-dynamic-import',
'transform-react-loadable',
'react-loadable/babel',
'recharts',
'transform-runtime',
['import-inspector', {
'serverSideRequirePath': true,
'webpackRequireWeakId': true,
}],
]
​
And there is no other place using babel-polyfill in my code.
I went through most of the similar questions in reddit and stackoverflow. Most of the cases this issue resolves when they remove duplicate poly fill.
I never had this issue until I implemented code split...
Added dev dependencies
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.0",
"babel-jest": "^22.4.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-webpack-alias": "^2.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-jest": "^22.4.3",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chalk": "^2.4.0",
"compression-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.5.1",
"css-modules-require-hook": "4.0.6",
"eslint": "^4.6.1",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-airbnb-base": "^12.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-watch": "^3.1.2",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"husky": "^0.15.0-rc.9",
"ignore-loader": "^0.1.2",
"jest": "^22.4.3",
"lazysizes": "^4.0.1",
"mobile-detect": "^1.4.1",
"postcss-loader": "^2.0.9",
"postcss-modules-values": "^1.3.0",
"postcss-nested": "^2.1.2",
"puppeteer": "^1.4.0",
"rc-tooltip": "^3.7.2",
"react-hot-loader": "^3.1.3",
"react-id-swiper": "^1.6.4",
"react-masonry-component": "^6.0.0",
"react-scroll": "^1.7.9",
"react-tabbordion": "^1.0.2",
"react-vertical-timeline-component": "^2.2.0",
"react-visibility-sensor": "^3.11.0",
"recharts": "^1.0.0-beta.10",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.4.0",
"redux-logger": "^3.0.6",
"style-loader": "^0.19.0",
"svg-to-json-webpack-plugin": "^1.1.1",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "4.19.1",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "^3.0.0",
"webpack-hot-middleware": "^2.21.2",
"webpack-merge": "^4.1.2",
"why-did-you-update": "^0.1.1",
"workbox-webpack-plugin": "^3.1.0"
}
You are using babel-polyfill as an entry. Are you also requiring babel-polyfill in your files?
If not maybe some other library is requiring it.
source

Swiper ES module web.config for IE11 support

I am using swiper in a react app. In Internet Explorer 11 it pop up syntax error
(about arrow function since it is not supported by IE11)
I added the code suggested by the github repository but it doesn't work still getting syntax error on dom modular. Which use function arrow instead of been transformed into ES5. Anyone can help me correct this issue?
Syntax Error:
Object.key(Methods).forEach((methodName) => { WEBPACK_IMPORTED_MODULE_0_mod7_dist_dom7_modular...});
.babelrc:
{
"presets": [
"es2015",
"react"
]
}
webpack file part:
test: /\.js$/,
exclude: /(node_modules|bower_components|node_modules\/(?!(dom7|ssr-window|swiper)\/).*)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
},
},
},
package json
"dependencies": {
"#firebase/firestore": "^0.1.4",
"#google-cloud/bigquery": "^0.9.6",
"#google-cloud/pubsub": "^0.14.5",
"autoprefixer": "^6.6.1",
"axios": "^0.15.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.9.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-stage-1": "^6.5.0",
"babel-register": "^6.26.0",
"classnames": "^2.2.5",
"cross-env": "^3.2.4",
"css-loader": "^0.28.5",
"cssnano": "^3.7.1",
"dotenv-webpack": "^1.5.4",
"es6-promise": "^3.2.1",
"firebase": "^4.6.2",
"firebase-admin": "5.4.1",
"firebase-functions": "0.7.1",
"firebase-tools": "^3.15.1",
"firebaseui": "2.3.0",
"glob": "^7.0.5",
"hashbuster": "^1.0.1",
"immutability-helper": "^2.1.1",
"json-loader": "^0.5.4",
"material-ui": "^0.20.0",
"minimist": "^1.2.0",
"node-geopoint": "^1.0.1",
"node-sass": "^4.5.3",
"normalize.css": "^5.0.0",
"postcss": "^5.0.21",
"postcss-flexbugs-fixes": "^2.0.0",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.2.1",
"postcss-pxtorem": "^3.3.1",
"prop-types": "^15.6.0",
"pubsub-js": "^1.5.3",
"react": "^16.0.0",
"react-avatar-editor": "^10.3.0",
"react-css-modules": "^4.1.0",
"react-dom": "^16.0.0",
"react-geosuggest": "^2.6.0",
"react-google-maps": "^9.4.2",
"react-modal": "^3.1.6",
"react-onclickoutside": "^5.11.1",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.7",
"react-router-sitemap": "^1.1.3",
"react-scrollchor": "^4.0.0",
"react-svg-inline": "^2.0.0",
"react-times": "^2.2.8",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"resolve-url-loader": "^2.1.0",
"script-loader": "^0.7.0",
"slug": "^0.9.1",
"swiper": "^4.1.6"
},

Resources