<h3 dir="auto"><g-emoji class="g-emoji" alias="computer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png">💻</g-emoji></h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Would you like to work on a fix?</li>
</ul>
<h3 dir="auto">How are you using Babel?</h3>
<p dir="auto">Other (Next.js, Gatsby, vue-cli, ...)</p>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class x { static { var x = 42; } }"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-s1">x</span> <span class="pl-kos">{</span> <span class="pl-k">static</span> <span class="pl-kos">{</span> <span class="pl-k">var</span> <span class="pl-c1">x</span> <span class="pl-c1">=</span> <span class="pl-c1">42</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Configuration</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Current and expected behavior</h3>
<p dir="auto">The input code has no problem, but Babel throws error while transpiling the code.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ node
Welcome to Node.js v18.11.0.
Type &quot;.help&quot; for more information.
&gt; class x { static { var x = 42; } }
undefined"><pre class="notranslate"><code class="notranslate">$ node
Welcome to Node.js v18.11.0.
Type ".help" for more information.
&gt; class x { static { var x = 42; } }
undefined
</code></pre></div>
<h3 dir="auto">Environment</h3>
<p dir="auto"><a href="https://babeljs.io/repl#?browsers=&amp;build=&amp;builtIns=false&amp;corejs=3.21&amp;spec=false&amp;loose=false&amp;code_lz=MYGwhgzhAEAe0G9oQC5hQS2I6A3MATnNALzQAsATANzQC-9QA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=script&amp;lineWrap=true&amp;presets=env%2Creact%2Cstage-2&amp;prettier=true&amp;targets=&amp;version=7.20.0&amp;externalPlugins=&amp;assumptions=%7B%7D" rel="nofollow">Reproduction on Babel's own REPL</a></p>
<h3 dir="auto">Possible solution</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Additional context</h3>
<p dir="auto"><em>No response</em></p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
When i webpack i get this error. I am trying to upgrade babel 6 to 7. I am using webpack 4. It also needs to support IE11.</p>
<p dir="auto"><strong>Input Code</strong><br>
*** package.json ***</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
    &quot;name&quot;: &quot;ccp&quot;,
    &quot;version&quot;: &quot;0.2.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
        &quot;dev&quot;: &quot;npm run development&quot;,
        &quot;development&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
        &quot;watch&quot;: &quot;npm run development -- --watch&quot;,
        &quot;watch-poll&quot;: &quot;npm run watch -- --watch-poll&quot;,
        &quot;hot&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
        &quot;prod&quot;: &quot;npm run production&quot;,
        &quot;production&quot;: &quot;cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
        &quot;lint&quot;: &quot;eslint src/&quot;,
        &quot;lint:fix&quot;: &quot;eslint src/ --fix&quot;,
        &quot;start&quot;: &quot;node src/server.js&quot;,
        &quot;test&quot;: &quot;node_modules/.bin/jest&quot;
    },
    &quot;dependencies&quot;: {
        &quot;@babel/core&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-decorators&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-do-expressions&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-export-default-from&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-export-namespace-from&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-function-bind&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-function-sent&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-json-strings&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-logical-assignment-operators&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-nullish-coalescing-operator&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-numeric-separator&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-pipeline-operator&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-proposal-throw-expressions&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-syntax-import-meta&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-transform-regenerator&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/preset-env&quot;: &quot;^7.0.0&quot;,
        &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.15&quot;,
        &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.7.2&quot;,
        &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.4&quot;,
        &quot;audit&quot;: &quot;0.0.6&quot;,
        &quot;axios&quot;: &quot;^0.18.1&quot;,
        &quot;body-parser&quot;: &quot;^1.19.0&quot;,
        &quot;bootstrap-fileinput&quot;: &quot;^4.5.2&quot;,
        &quot;braces&quot;: &quot;^2.3.2&quot;,
        &quot;console-polyfill&quot;: &quot;^0.3.0&quot;,
        &quot;core-js&quot;: &quot;^2.6.9&quot;,
        &quot;cors&quot;: &quot;^2.8.5&quot;,
        &quot;crypto-js&quot;: &quot;^3.1.9-1&quot;,
        &quot;cssnano&quot;: &quot;^4.1.10&quot;,
        &quot;dompurify&quot;: &quot;^1.0.10&quot;,
        &quot;es3ify&quot;: &quot;^0.2.2&quot;,
        &quot;es5-shim&quot;: &quot;^4.5.13&quot;,
        &quot;express&quot;: &quot;^4.17.1&quot;,
        &quot;file-loader&quot;: &quot;^1.1.11&quot;,
        &quot;file-saver&quot;: &quot;^2.0.1&quot;,
        &quot;font-awesome&quot;: &quot;^4.7.0&quot;,
        &quot;html-react-parser&quot;: &quot;^0.4.7&quot;,
        &quot;jquery&quot;: &quot;^3.4.0&quot;,
        &quot;jsx-to-string&quot;: &quot;^1.4.0&quot;,
        &quot;lodash&quot;: &quot;^4.17.11&quot;,
        &quot;moment&quot;: &quot;^2.24.0&quot;,
        &quot;node-sass&quot;: &quot;^4.12.0&quot;,
        &quot;npm&quot;: &quot;^6.10.1&quot;,
        &quot;npm-audit&quot;: &quot;0.0.3&quot;,
        &quot;postcss-cssnext&quot;: &quot;^3.0.2&quot;,
        &quot;postcss-import&quot;: &quot;^11.1.0&quot;,
        &quot;prop-types&quot;: &quot;^15.7.2&quot;,
        &quot;pusher&quot;: &quot;^2.2.0&quot;,
        &quot;pusher-js&quot;: &quot;^4.4.0&quot;,
        &quot;react&quot;: &quot;^16.8.4&quot;,
        &quot;react-bootstrap&quot;: &quot;^0.32.4&quot;,
        &quot;react-bootstrap-table&quot;: &quot;^4.3.1&quot;,
        &quot;react-bootstrap-table-next&quot;: &quot;^0.1.15&quot;,
        &quot;react-dates&quot;: &quot;^17.2.0&quot;,
        &quot;react-dom&quot;: &quot;^16.8.4&quot;,
        &quot;react-dropzone&quot;: &quot;^4.3.0&quot;,
        &quot;react-fontawesome&quot;: &quot;^1.6.1&quot;,
        &quot;react-ga&quot;: &quot;^2.5.7&quot;,
        &quot;react-html-parser&quot;: &quot;^2.0.2&quot;,
        &quot;react-moment&quot;: &quot;^0.8.4&quot;,
        &quot;react-quill&quot;: &quot;^1.3.3&quot;,
        &quot;react-redux&quot;: &quot;^5.1.1&quot;,
        &quot;react-router&quot;: &quot;^4.3.1&quot;,
        &quot;react-router-dom&quot;: &quot;^4.3.1&quot;,
        &quot;react-router-redux&quot;: &quot;^4.0.8&quot;,
        &quot;react-scripts&quot;: &quot;^3.0.1&quot;,
        &quot;react-select&quot;: &quot;^1.3.0&quot;,
        &quot;react-sortable-tree&quot;: &quot;^2.6.0&quot;,
        &quot;react-stringify&quot;: &quot;^1.0.0&quot;,
        &quot;react-table&quot;: &quot;^6.9.2&quot;,
        &quot;react-tooltip&quot;: &quot;^3.10.0&quot;,
        &quot;react-vis&quot;: &quot;^1.11.6&quot;,
        &quot;react-websocket&quot;: &quot;^2.0.1&quot;,
        &quot;react-widgets&quot;: &quot;^4.4.10&quot;,
        &quot;redux&quot;: &quot;^3.7.2&quot;,
        &quot;redux-file-upload&quot;: &quot;0.0.19&quot;,
        &quot;redux-form&quot;: &quot;^7.4.2&quot;,
        &quot;redux-listeners&quot;: &quot;^0.4.1&quot;,
        &quot;redux-logger&quot;: &quot;^3.0.6&quot;,
        &quot;redux-promise&quot;: &quot;^0.5.3&quot;,
        &quot;redux-title&quot;: &quot;0.0.3&quot;,
        &quot;single-spa&quot;: &quot;^4.3.5&quot;,
        &quot;single-spa-react&quot;: &quot;^2.10.2&quot;,
        &quot;socket.io&quot;: &quot;^2.2.0&quot;,
        &quot;socket.io-client&quot;: &quot;^2.2.0&quot;,
        &quot;sugarss&quot;: &quot;^1.0.1&quot;,
        &quot;supervisor&quot;: &quot;^0.12.0&quot;,
        &quot;url-search-params&quot;: &quot;^0.10.2&quot;,
        &quot;viz&quot;: &quot;0.0.1&quot;
    },
    &quot;devDependencies&quot;: {
        &quot;@babel/core&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/plugin-transform-react-inline-elements&quot;: &quot;^7.2.0&quot;,
        &quot;@babel/polyfill&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/preset-env&quot;: &quot;^7.0.0&quot;,
        &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
        &quot;autoprefixer-loader&quot;: &quot;^3.2.0&quot;,
        &quot;axios-mock-adapter&quot;: &quot;^1.16.0&quot;,
        &quot;babel-core&quot;: &quot;^7.0.0-bridge.0&quot;,
        &quot;babel-env&quot;: &quot;^2.4.1&quot;,
        &quot;babel-jest&quot;: &quot;^23.4.2&quot;,
        &quot;babel-loader&quot;: &quot;^8.0.0&quot;,
        &quot;bootstrap&quot;: &quot;^4.3.1&quot;,
        &quot;clean-webpack-plugin&quot;: &quot;^3.0.0&quot;,
        &quot;copy-webpack-plugin&quot;: &quot;^4.6.0&quot;,
        &quot;cross-env&quot;: &quot;^5.1&quot;,
        &quot;css-loader&quot;: &quot;^2.1.1&quot;,
        &quot;enzyme&quot;: &quot;^3.10.0&quot;,
        &quot;enzyme-adapter-react-16&quot;: &quot;^1.14.0&quot;,
        &quot;eslint&quot;: &quot;^5.16.0&quot;,
        &quot;eslint-config-airbnb&quot;: &quot;^17.1.0&quot;,
        &quot;eslint-config-rallycoding&quot;: &quot;^3.2.0&quot;,
        &quot;eslint-plugin-babel&quot;: &quot;^5.3.0&quot;,
        &quot;eslint-plugin-import&quot;: &quot;^2.17.2&quot;,
        &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.3&quot;,
        &quot;eslint-plugin-react&quot;: &quot;^7.14.2&quot;,
        &quot;expect&quot;: &quot;^24.4.0&quot;,
        &quot;fetch-mock&quot;: &quot;^6.5.2&quot;,
        &quot;html-loader&quot;: &quot;^0.5.5&quot;,
        &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
        &quot;jest&quot;: &quot;latest&quot;,
        &quot;jest-html-reporter&quot;: &quot;^2.5.0&quot;,
        &quot;json-loader&quot;: &quot;^0.5.7&quot;,
        &quot;laravel-mix&quot;: &quot;^4.0.15&quot;,
        &quot;lodash&quot;: &quot;^4.17.5&quot;,
        &quot;mini-css-extract-plugin&quot;: &quot;^0.7.0&quot;,
        &quot;popper.js&quot;: &quot;^1.14.7&quot;,
        &quot;prettier&quot;: &quot;1.11.1&quot;,
        &quot;react-addons-test-utils&quot;: &quot;^15.6.2&quot;,
        &quot;react-test-renderer&quot;: &quot;^16.8.6&quot;,
        &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
        &quot;redux-mock-store&quot;: &quot;^1.5.3&quot;,
        &quot;resolve-url-loader&quot;: &quot;^2.3.2&quot;,
        &quot;riek&quot;: &quot;^1.1.0&quot;,
        &quot;sass&quot;: &quot;^1.22.4&quot;,
        &quot;sass-loader&quot;: &quot;^7.1.0&quot;,
        &quot;style-loader&quot;: &quot;^0.23.1&quot;,
        &quot;uglifyjs-webpack-plugin&quot;: &quot;^1.3.0&quot;,
        &quot;vue&quot;: &quot;^2.6.8&quot;,
        &quot;webpack&quot;: &quot;^4.35.3&quot;,
        &quot;webpack-cli&quot;: &quot;^3.3.6&quot;
    }
}"><pre class="notranslate"><code class="notranslate">{
    "name": "ccp",
    "version": "0.2.0",
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "lint": "eslint src/",
        "lint:fix": "eslint src/ --fix",
        "start": "node src/server.js",
        "test": "node_modules/.bin/jest"
    },
    "dependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.0.0",
        "@babel/plugin-proposal-do-expressions": "^7.0.0",
        "@babel/plugin-proposal-export-default-from": "^7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-bind": "^7.0.0",
        "@babel/plugin-proposal-function-sent": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
        "@babel/plugin-proposal-numeric-separator": "^7.0.0",
        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^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.0.0",
        "@fortawesome/fontawesome-svg-core": "^1.2.15",
        "@fortawesome/free-solid-svg-icons": "^5.7.2",
        "@fortawesome/react-fontawesome": "^0.1.4",
        "audit": "0.0.6",
        "axios": "^0.18.1",
        "body-parser": "^1.19.0",
        "bootstrap-fileinput": "^4.5.2",
        "braces": "^2.3.2",
        "console-polyfill": "^0.3.0",
        "core-js": "^2.6.9",
        "cors": "^2.8.5",
        "crypto-js": "^3.1.9-1",
        "cssnano": "^4.1.10",
        "dompurify": "^1.0.10",
        "es3ify": "^0.2.2",
        "es5-shim": "^4.5.13",
        "express": "^4.17.1",
        "file-loader": "^1.1.11",
        "file-saver": "^2.0.1",
        "font-awesome": "^4.7.0",
        "html-react-parser": "^0.4.7",
        "jquery": "^3.4.0",
        "jsx-to-string": "^1.4.0",
        "lodash": "^4.17.11",
        "moment": "^2.24.0",
        "node-sass": "^4.12.0",
        "npm": "^6.10.1",
        "npm-audit": "0.0.3",
        "postcss-cssnext": "^3.0.2",
        "postcss-import": "^11.1.0",
        "prop-types": "^15.7.2",
        "pusher": "^2.2.0",
        "pusher-js": "^4.4.0",
        "react": "^16.8.4",
        "react-bootstrap": "^0.32.4",
        "react-bootstrap-table": "^4.3.1",
        "react-bootstrap-table-next": "^0.1.15",
        "react-dates": "^17.2.0",
        "react-dom": "^16.8.4",
        "react-dropzone": "^4.3.0",
        "react-fontawesome": "^1.6.1",
        "react-ga": "^2.5.7",
        "react-html-parser": "^2.0.2",
        "react-moment": "^0.8.4",
        "react-quill": "^1.3.3",
        "react-redux": "^5.1.1",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-router-redux": "^4.0.8",
        "react-scripts": "^3.0.1",
        "react-select": "^1.3.0",
        "react-sortable-tree": "^2.6.0",
        "react-stringify": "^1.0.0",
        "react-table": "^6.9.2",
        "react-tooltip": "^3.10.0",
        "react-vis": "^1.11.6",
        "react-websocket": "^2.0.1",
        "react-widgets": "^4.4.10",
        "redux": "^3.7.2",
        "redux-file-upload": "0.0.19",
        "redux-form": "^7.4.2",
        "redux-listeners": "^0.4.1",
        "redux-logger": "^3.0.6",
        "redux-promise": "^0.5.3",
        "redux-title": "0.0.3",
        "single-spa": "^4.3.5",
        "single-spa-react": "^2.10.2",
        "socket.io": "^2.2.0",
        "socket.io-client": "^2.2.0",
        "sugarss": "^1.0.1",
        "supervisor": "^0.12.0",
        "url-search-params": "^0.10.2",
        "viz": "0.0.1"
    },
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-transform-react-inline-elements": "^7.2.0",
        "@babel/polyfill": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "autoprefixer-loader": "^3.2.0",
        "axios-mock-adapter": "^1.16.0",
        "babel-core": "^7.0.0-bridge.0",
        "babel-env": "^2.4.1",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.0",
        "bootstrap": "^4.3.1",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^4.6.0",
        "cross-env": "^5.1",
        "css-loader": "^2.1.1",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.14.0",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.0",
        "eslint-config-rallycoding": "^3.2.0",
        "eslint-plugin-babel": "^5.3.0",
        "eslint-plugin-import": "^2.17.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.14.2",
        "expect": "^24.4.0",
        "fetch-mock": "^6.5.2",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "jest": "latest",
        "jest-html-reporter": "^2.5.0",
        "json-loader": "^0.5.7",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.5",
        "mini-css-extract-plugin": "^0.7.0",
        "popper.js": "^1.14.7",
        "prettier": "1.11.1",
        "react-addons-test-utils": "^15.6.2",
        "react-test-renderer": "^16.8.6",
        "redux-devtools-extension": "^2.13.8",
        "redux-mock-store": "^1.5.3",
        "resolve-url-loader": "^2.3.2",
        "riek": "^1.1.0",
        "sass": "^1.22.4",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "uglifyjs-webpack-plugin": "^1.3.0",
        "vue": "^2.6.8",
        "webpack": "^4.35.3",
        "webpack-cli": "^3.3.6"
    }
}
</code></pre></div>
<p dir="auto">*** webpack.config.js ***</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
const path = require(&quot;path&quot;);
const webpack = require(&quot;webpack&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: [
        './src/index.js',
    ],
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/docs',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: [ '@babel/preset-env' ],
                    plugins: [ '@babel/transform-runtime', '@babel/transform-regenerator' ]
                }
            },
             {
                test: /\.css$/,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      // you can specify a publicPath here
                      // by default it uses publicPath in webpackOptions.output
                      publicPath: __dirname + '/docs/stylesheets',
                      hmr: process.env.NODE_ENV === 'development',
                    },
                  },
                  'css-loader',
                ]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.png$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&amp;mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&amp;mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&amp;mimetype=image/svg+xml'
            }
        ]
    },
    node: {
        fs: 'empty'
    },
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules')],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: true
        }),
        //new UglifyJsPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
                'REACT_APP_GA_TRACKING_ID' : JSON.stringify('UA-11111-1'),
                'VERSION': JSON.stringify('57.1')
            }
        }),
        new webpack.ProvidePlugin({
            jQuery: &quot;jquery&quot;,
            $: &quot;jquery&quot;,
            jquery: 'jquery'
        }),

        //new ExtractTextPlugin(&quot;[name].bundle.css&quot;)
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    devtool: 'source-map',
    externals: [

        ]
};
"><pre class="notranslate"><code class="notranslate">
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: [
        './src/index.js',
    ],
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/docs',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: [ '@babel/preset-env' ],
                    plugins: [ '@babel/transform-runtime', '@babel/transform-regenerator' ]
                }
            },
             {
                test: /\.css$/,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      // you can specify a publicPath here
                      // by default it uses publicPath in webpackOptions.output
                      publicPath: __dirname + '/docs/stylesheets',
                      hmr: process.env.NODE_ENV === 'development',
                    },
                  },
                  'css-loader',
                ]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.png$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&amp;mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&amp;mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&amp;mimetype=image/svg+xml'
            }
        ]
    },
    node: {
        fs: 'empty'
    },
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules')],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: true
        }),
        //new UglifyJsPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
                'REACT_APP_GA_TRACKING_ID' : JSON.stringify('UA-11111-1'),
                'VERSION': JSON.stringify('57.1')
            }
        }),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            jquery: 'jquery'
        }),

        //new ExtractTextPlugin("[name].bundle.css")
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    devtool: 'source-map',
    externals: [

        ]
};

</code></pre></div>
<p dir="auto">*** babel.config.js ***</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
module.exports = function(api) {
    api.cache(true);

    const presets = [
        [
            &quot;@babel/preset-env&quot;, {
                &quot;targets&quot;: {
                     ie: 11,
                    &quot;browsers&quot;: [&quot;&gt; 0.2%, not dead, not op_mini all&quot;]
                },
                &quot;modules&quot;: false,
                &quot;debug&quot;:true,
                &quot;useBuiltIns&quot;: 'usage',
                'corejs' : '3',
            }
        ],
        [&quot;@babel/preset-react&quot;]
    ];
    const plugins = [
        &quot;@babel/plugin-syntax-dynamic-import&quot;,
        &quot;@babel/plugin-proposal-object-rest-spread&quot;,
        &quot;@babel/plugin-transform-regenerator&quot;,
        &quot;@babel/plugin-proposal-class-properties&quot;,
        [
            &quot;@babel/plugin-proposal-decorators&quot;,
            {
                legacy: true
            }
        ],
        &quot;@babel/plugin-transform-react-constant-elements&quot;,
        &quot;@babel/plugin-transform-react-inline-elements&quot;,
        &quot;transform-es2015-shorthand-properties&quot;,
        &quot;@babel/plugin-transform-runtime&quot;
    ];

    return {
        presets,
        plugins,
        &quot;env&quot;: {
            &quot;test&quot;: {
                &quot;presets&quot;: [
                    [
                        &quot;@babel/preset-env&quot;,
                        {
                            &quot;targets&quot;: {
                                &quot;node&quot;: &quot;current&quot;,
                                &quot;browsers&quot;: [&quot;&gt; 0.25%, not dead, not op_mini all&quot;]
                            }
                        }
                    ]
                ]
            }
        }
    }
}
"><pre class="notranslate"><code class="notranslate">
module.exports = function(api) {
    api.cache(true);

    const presets = [
        [
            "@babel/preset-env", {
                "targets": {
                     ie: 11,
                    "browsers": ["&gt; 0.2%, not dead, not op_mini all"]
                },
                "modules": false,
                "debug":true,
                "useBuiltIns": 'usage',
                'corejs' : '3',
            }
        ],
        ["@babel/preset-react"]
    ];
    const plugins = [
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-regenerator",
        "@babel/plugin-proposal-class-properties",
        [
            "@babel/plugin-proposal-decorators",
            {
                legacy: true
            }
        ],
        "@babel/plugin-transform-react-constant-elements",
        "@babel/plugin-transform-react-inline-elements",
        "transform-es2015-shorthand-properties",
        "@babel/plugin-transform-runtime"
    ];

    return {
        presets,
        plugins,
        "env": {
            "test": {
                "presets": [
                    [
                        "@babel/preset-env",
                        {
                            "targets": {
                                "node": "current",
                                "browsers": ["&gt; 0.25%, not dead, not op_mini all"]
                            }
                        }
                    ]
                ]
            }
        }
    }
}

</code></pre></div>
<p dir="auto">*** src/index.js ***</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import registerServiceWorker from './registerServiceWorker';
import {registerApplication, start} from 'single-spa';

registerApplication(
  'CCP',          // Name of this single-spa application
  () =&gt; import('./root.app.js'),//loadingFunction, // Our loading function
  () =&gt; true//activityFunction // Our activity function
  //(location) =&gt; location.pathname === &quot;&quot; || location.pathname === &quot;/&quot; ||  location.pathname.startsWith('/home')
);

start();
registerServiceWorker();
"><pre class="notranslate"><code class="notranslate">import registerServiceWorker from './registerServiceWorker';
import {registerApplication, start} from 'single-spa';

registerApplication(
  'CCP',          // Name of this single-spa application
  () =&gt; import('./root.app.js'),//loadingFunction, // Our loading function
  () =&gt; true//activityFunction // Our activity function
  //(location) =&gt; location.pathname === "" || location.pathname === "/" ||  location.pathname.startsWith('/home')
);

start();
registerServiceWorker();

</code></pre></div>
<p dir="auto">*** src/root.app.js ***</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import CCPApp from './containers/CCP.App.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: CCPApp,
  domElementGetter,
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

function domElementGetter() {
  // This is where single-spa will mount our application
  return document.getElementById(&quot;root&quot;);
}
"><pre class="notranslate"><code class="notranslate">import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import CCPApp from './containers/CCP.App.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: CCPApp,
  domElementGetter,
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

function domElementGetter() {
  // This is where single-spa will mount our application
  return document.getElementById("root");
}

</code></pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.0.0</li>
<li>Node/npm version: node v10.15.1 / npm 6.7.0</li>
<li>OS: Red Hat Enterprise Linux Server release 7.5 (Maipo)</li>
<li>Monorepo: no</li>
<li>How you are using Babel: babel and webpack configs</li>
</ul>
<p dir="auto">I made a previous attempt to upgrade when using webpack 3 but IE was not working. but now I am using webpack v4 <a href="https://stackoverflow.com/questions/56985455/ie11-not-working-when-using-babel-v7-script1010-expected-identifier" rel="nofollow">https://stackoverflow.com/questions/56985455/ie11-not-working-when-using-babel-v7-script1010-expected-identifier</a></p>