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