Issue 1:
💻

Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

class x { static { var x = 42; } }

Configuration file name

No response

Configuration

No response

Current and expected behavior

The input code has no problem, but Babel throws error while transpiling the code.

$ node
Welcome to Node.js v18.11.0.
Type ".help" for more information.
> class x { static { var x = 42; } }
undefined

Environment

Reproduction on Babel's own REPL

Possible solution

No response

Additional context

No response

Issue 2:
Bug Report

Current Behavior

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.

Input Code

*** package.json ***

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

*** webpack.config.js ***

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&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&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: [

]
};

*** babel.config.js ***

module.exports = function(api) {
api.cache(true);

const presets = [
[
"@babel/preset-env", {
"targets": {
ie: 11,
"browsers": ["> 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": ["> 0.25%, not dead, not op_mini all"]
}
}
]
]
}
}
}
}

*** src/index.js ***

import registerServiceWorker from './registerServiceWorker';
import {registerApplication, start} from 'single-spa';

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

start();
registerServiceWorker();

*** src/root.app.js ***

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

Environment

Babel version(s): 7.0.0

Node/npm version: node v10.15.1 / npm 6.7.0

OS: Red Hat Enterprise Linux Server release 7.5 (Maipo)

Monorepo: no

How you are using Babel: babel and webpack configs

I made a previous attempt to upgrade when using webpack 3 but IE was not working. but now I am using webpack v4 https://stackoverflow.com/questions/56985455/ie11-not-working-when-using-babel-v7-script1010-expected-identifier