fix: use acorn and drop babel-loader by default (#9320)

packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap

@@ -90,17 +90,6 @@ exports[`angular configuration for android 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -446,17 +435,6 @@ exports[`angular configuration for ios 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap

@@ -105,17 +105,6 @@ exports[`base configuration for android 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -406,17 +395,6 @@ exports[`base configuration for ios 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap

@@ -105,17 +105,6 @@ exports[`javascript configuration for android 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -444,17 +433,6 @@ exports[`javascript configuration for ios 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap

@@ -120,17 +120,6 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -438,17 +427,6 @@ exports[`react configuration > android > base config 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -756,17 +734,6 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -1075,17 +1042,6 @@ exports[`react configuration > ios > base config 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap

@@ -107,17 +107,6 @@ exports[`svelte configuration for android 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -433,17 +422,6 @@ exports[`svelte configuration for ios 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap

@@ -105,17 +105,6 @@ exports[`typescript configuration for android 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -444,17 +433,6 @@ exports[`typescript configuration for ios 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap

@@ -111,17 +111,6 @@ exports[`vue configuration for android 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */
@@ -444,17 +433,6 @@ exports[`vue configuration for ios 1`] = `
         test: /\\\\.js$/,
         exclude: [
           /node_modules/
-        ],
-        use: [
-          /* config.module.rule('js').use('babel-loader') */
-          {
-            loader: 'babel-loader',
-            options: {
-              generatorOpts: {
-                compact: false
-              }
-            }
-          }
         ]
       },
       /* config.module.rule('workers') */

packages/webpack5/package.json

@@ -19,6 +19,7 @@
 	"dependencies": {
 		"@babel/core": "7.13.14",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+		"acorn-stage3": "^4.0.0",
 		"babel-loader": "8.2.2",
 		"chalk": "4.1.0",
 		"cli-highlight": "2.1.11",

packages/webpack5/src/configuration/base.ts

@@ -208,19 +208,11 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	});
 
 	// set up js
-	// todo: do we need babel-loader? It's useful to support it
 	config.module
 		.rule('js')
 		.test(/\.js$/)
 		.exclude.add(/node_modules/)
-		.end()
+		.end();
-		.use('babel-loader')
-		.loader('babel-loader')
-		.options({
-			generatorOpts: {
-				compact: false,
-			},
-		});
 
 	config.module
 		.rule('workers')

packages/webpack5/src/index.ts

@@ -1,3 +1,11 @@
+// Make sure the Acorn Parser (used by Webpack) can parse ES-Stage3 code
+// This must be at the top BEFORE webpack is loaded so that we can extend
+// and replace the parser before webpack uses it
+// Based on the issue: https://github.com/webpack/webpack/issues/10216
+const stage3 = require('acorn-stage3');
+const acorn = require('acorn');
+acorn.Parser = acorn.Parser.extend(stage3);
+
 import { highlight } from 'cli-highlight';
 import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';