feat(webpack): remove support for legacy browsers (#14190)

docs/generated/packages/react/generators/init.json

@@ -37,7 +37,7 @@
         "default": false
       },
       "skipHelperLibs": {
-        "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).",
+        "description": "Do not install  tslib.",
         "type": "boolean",
         "default": false,
         "hidden": true

docs/generated/packages/web/executors/webpack.json

@@ -300,10 +300,6 @@
         "description": "Extract CSS into a `.css` file.",
         "default": true
       },
-      "es2015Polyfills": {
-        "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-        "type": "string"
-      },
       "subresourceIntegrity": {
         "type": "boolean",
         "description": "Enables the use of subresource integrity validation.",

docs/generated/packages/webpack/executors/webpack.json

@@ -307,10 +307,6 @@
         "description": "Extract CSS into a `.css` file.",
         "default": true
       },
-      "es2015Polyfills": {
-        "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-        "type": "string"
-      },
       "subresourceIntegrity": {
         "type": "boolean",
         "description": "Enables the use of subresource integrity validation.",

e2e/nx-run/src/affected-graph.test.ts

@@ -597,7 +597,6 @@ describe('Nx Affected and Graph Tests', () => {
       expect(() => checkFilesExist('project-graph.html')).not.toThrow();
       expect(() => checkFilesExist('static/styles.css')).not.toThrow();
       expect(() => checkFilesExist('static/runtime.js')).not.toThrow();
-      expect(() => checkFilesExist('static/polyfills.js')).not.toThrow();
       expect(() => checkFilesExist('static/main.js')).not.toThrow();
       expect(() => checkFilesExist('static/environment.js')).not.toThrow();
 

e2e/web/src/file-server.test.ts

@@ -26,10 +26,7 @@ describe('file-server', () => {
     const p = await runCommandUntil(
       `serve ${appName} --port=${port}`,
       (output) => {
-        return (
-          output.indexOf('webpack compiled') > -1 &&
-          output.indexOf(`localhost:${port}`) > -1
-        );
+        return output.indexOf(`localhost:${port}`) > -1;
       }
     );
 
@@ -39,5 +36,5 @@ describe('file-server', () => {
     } catch {
       // ignore
     }
-  }, 1000000);
+  }, 300_000);
 });

e2e/web/src/web.test.ts

@@ -112,23 +112,6 @@ describe('Web Components Applications', () => {
     checkFilesExist(`dist/libs/${libName}/_should_keep.txt`);
   }, 120000);
 
-  it('should do another build if differential loading is needed', async () => {
-    const appName = uniq('app');
-
-    runCLI(
-      `generate @nrwl/web:app ${appName} --bundler=webpack --no-interactive`
-    );
-
-    updateFile(`apps/${appName}/browserslist`, `IE 9-11`);
-
-    runCLI(`build ${appName} --outputHashing=none`);
-
-    checkFilesExist(
-      `dist/apps/${appName}/main.js`,
-      `dist/apps/${appName}/main.es5.js`
-    );
-  }, 120000);
-
   it('should emit decorator metadata when it is enabled in tsconfig', async () => {
     const appName = uniq('app');
     runCLI(

packages/react/plugins/component-testing/index.ts

@@ -222,7 +222,6 @@ function buildTargetWebpack(
       const defaultWebpack = getWebpackConfig(
         context,
         options,
-        true,
         isScriptOptimizeOn,
         {
           root: ctProjectConfig.root,

packages/react/plugins/storybook/index.ts

@@ -1,11 +1,7 @@
 import {
-  ExecutorContext,
   joinPathFragments,
   logger,
-  ProjectGraph,
   readJsonFile,
-  readNxJson,
-  TargetConfiguration,
   workspaceRoot,
 } from '@nrwl/devkit';
 import { getBaseWebpackPartial } from '@nrwl/webpack/src/utils/config';
@@ -17,7 +13,6 @@ import { gte } from 'semver';
 import { Configuration, DefinePlugin, WebpackPluginInstance } from 'webpack';
 import * as mergeWebpack from 'webpack-merge';
 import { mergePlugins } from './merge-plugins';
-import { readProjectsConfigurationFromProjectGraph } from 'nx/src/project-graph/project-graph';
 
 const reactWebpackConfig = require('../webpack');
 
@@ -119,14 +114,12 @@ export const webpack = async (
     target: 'web',
   };
 
-  const esm = true;
   const isScriptOptimizeOn = storybookWebpackConfig.mode !== 'development';
   const extractCss = storybookWebpackConfig.mode === 'production';
 
   // ESM build for modern browsers.
   const baseWebpackConfig = mergeWebpack.merge([
     getBaseWebpackPartial(builderOptions, {
-      esm,
       isScriptOptimizeOn,
       skipTypeCheck: true,
     }),

packages/react/src/generators/application/application.spec.ts

@@ -73,7 +73,6 @@ describe('app', () => {
       await applicationGenerator(appTree, schema);
 
       expect(appTree.exists('apps/my-app/.babelrc')).toBeTruthy();
-      expect(appTree.exists('apps/my-app/.browserslistrc')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/main.tsx')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
       expect(appTree.exists('apps/my-app/src/app/app.spec.tsx')).toBeTruthy();
@@ -312,7 +311,6 @@ describe('app', () => {
       main: 'apps/my-app/src/main.tsx',
       baseHref: '/',
       outputPath: 'dist/apps/my-app',
-      polyfills: 'apps/my-app/src/polyfills.ts',
       scripts: [],
       styles: ['apps/my-app/src/styles.css'],
       tsConfig: 'apps/my-app/tsconfig.app.json',
@@ -810,19 +808,6 @@ describe('app', () => {
     ).toBeUndefined();
   });
 
-  it('should add required polyfills for core-js and regenerator', async () => {
-    await applicationGenerator(appTree, {
-      ...schema,
-    });
-
-    const polyfillsSource = appTree
-      .read('apps/my-app/src/polyfills.ts')
-      .toString();
-
-    expect(polyfillsSource).toContain('regenerator');
-    expect(polyfillsSource).toContain('core-js');
-  });
-
   describe('--skipWorkspaceJson', () => {
     it('should update workspace with defaults when --skipWorkspaceJson=false', async () => {
       await applicationGenerator(appTree, {

packages/react/src/generators/application/lib/add-project.ts

@@ -57,10 +57,6 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
         options.appProjectRoot,
         maybeJs(options, `src/main.tsx`)
       ),
-      polyfills: joinPathFragments(
-        options.appProjectRoot,
-        maybeJs(options, 'src/polyfills.ts')
-      ),
       tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
       assets: [
         joinPathFragments(options.appProjectRoot, 'src/favicon.ico'),

packages/react/src/generators/init/init.ts

@@ -52,8 +52,6 @@ function updateDependencies(host: Tree, schema: InitSchema) {
   };
 
   if (!schema.skipHelperLibs) {
-    dependencies['core-js'] = '^3.6.5';
-    dependencies['regenerator-runtime'] = '0.13.7';
     dependencies['tslib'] = tsLibVersion;
   }
 

packages/react/src/generators/init/schema.json

@@ -34,7 +34,7 @@
       "default": false
     },
     "skipHelperLibs": {
-      "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).",
+      "description": "Do not install  tslib.",
       "type": "boolean",
       "default": false,
       "hidden": true

packages/web/babel.ts

@@ -43,7 +43,6 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
           ? { targets: { node: 'current' }, loose: true }
           : {
               // Allow importing core-js in entrypoint and use browserlist to select polyfills.
-              // This is needed for differential loading as well.
               useBuiltIns: options.useBuiltIns ?? 'entry',
               corejs: 3,
               // Do not transform modules to CJS

packages/web/src/executors/webpack/schema.json

@@ -176,10 +176,6 @@
       "description": "Extract CSS into a `.css` file.",
       "default": true
     },
-    "es2015Polyfills": {
-      "description": "Conditional polyfills loaded in browsers which do not support `ES2015`.",
-      "type": "string"
-    },
     "subresourceIntegrity": {
       "type": "boolean",
       "description": "Enables the use of subresource integrity validation.",

packages/web/src/generators/application/application.spec.ts

@@ -348,7 +348,6 @@ describe('app', () => {
       baseHref: '/',
       main: 'apps/my-app/src/main.ts',
       outputPath: 'dist/apps/my-app',
-      polyfills: 'apps/my-app/src/polyfills.ts',
       scripts: [],
       styles: ['apps/my-app/src/styles.css'],
       tsConfig: 'apps/my-app/tsconfig.app.json',

packages/web/src/generators/application/application.ts

@@ -91,10 +91,6 @@ async function setupBundler(tree: Tree, options: NormalizedSchema) {
       'src/index.html'
     );
     buildOptions.baseHref = '/';
-    buildOptions.polyfills = joinPathFragments(
-      options.appProjectRoot,
-      'src/polyfills.ts'
-    );
     buildOptions.styles = [
       joinPathFragments(options.appProjectRoot, `src/styles.${options.style}`),
     ];

packages/webpack/migrations.json

@@ -7,5 +7,11 @@
       "factory": "./src/migrations/update-15-0-0/add-babel-inputs"
     }
   },
+  "remove-es2015-polyfills-option": {
+    "cli": "nx",
+    "version": "15.4.5-beta.0",
+    "description": "Removes es2015Polyfills option since legacy browsers are no longer supported.",
+    "factory": "./src/migrations/update-15-4-5/remove-es2015-polyfills-option"
+  },
   "packageJsonUpdates": {}
 }

packages/webpack/package.json

@@ -34,8 +34,6 @@
     "@nrwl/workspace": "file:../workspace",
     "autoprefixer": "^10.4.9",
     "babel-loader": "^8.2.2",
-    "browserslist": "^4.21.4",
-    "caniuse-lite": "^1.0.30001394",
     "chalk": "4.1.0",
     "chokidar": "^3.5.1",
     "copy-webpack-plugin": "^10.2.4",

packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts

@@ -23,7 +23,6 @@ export function getDevServerConfig(
   const webpackConfig = getWebpackConfig(
     context,
     buildOptions,
-    true,
     typeof buildOptions.optimization === 'boolean'
       ? buildOptions.optimization
       : buildOptions.optimization?.scripts
@@ -53,7 +52,6 @@ export function getDevServerConfig(
       deployUrl,
       sri: subresourceIntegrity,
       moduleEntrypoints: [],
-      noModuleEntrypoints: ['polyfills-es5'],
     })
   );