feat(webpack): remove support for legacy browsers

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/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();
 

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

@@ -209,8 +209,8 @@ function buildTargetWebpack(
       typeof options.optimization === 'boolean'
         ? options.optimization
         : options.optimization && options.optimization.scripts
-        ? options.optimization.scripts
-        : false;
+          ? options.optimization.scripts
+          : false;
 
     customWebpack = resolveCustomWebpackConfig(
       options.webpackConfig,
@@ -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/generators/application/application.spec.ts

@@ -344,7 +344,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/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'],
     })
   );
 

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

@@ -1,7 +1,6 @@
 import * as path from 'path';
 import { posix, resolve } from 'path';
 import { readTsConfig } from '@nrwl/workspace/src/utilities/typescript';
-import { ScriptTarget } from 'typescript';
 import { getHashDigest, interpolateName } from 'loader-utils';
 import type { Configuration } from 'webpack';
 
@@ -34,7 +33,6 @@ interface GetWebpackConfigOverrides {
 export function getWebpackConfig(
   context: ExecutorContext,
   options: NormalizedWebpackExecutorOptions,
-  esm?: boolean,
   isScriptOptimizeOn?: boolean,
   overrides?: GetWebpackConfigOverrides
 ): Configuration {
@@ -53,19 +51,11 @@ export function getWebpackConfig(
     sourceRoot = project.sourceRoot;
   }
 
-  if (isScriptOptimizeOn) {
-    // Angular CLI uses an environment variable (NG_BUILD_DIFFERENTIAL_FULL)
-    // to determine whether to use the scriptTargetOverride
-    // or the tsConfig target
-    // We want to force the target if overridden
-    tsConfig.options.target = ScriptTarget.ES5;
-  }
   const wco: any = {
     root: workspaceRoot,
     projectRoot: resolve(workspaceRoot, projectRoot),
     sourceRoot: resolve(workspaceRoot, sourceRoot),
     buildOptions: convertBuildOptions(options),
-    esm,
     console,
     tsConfig,
     tsConfigPath: options.tsConfig,
@@ -75,18 +65,12 @@ export function getWebpackConfig(
     _getBaseWebpackPartial(
       context,
       options,
-      esm,
       isScriptOptimizeOn,
       tsConfig.options.emitDecoratorMetadata,
       overrides
     ),
     options.target === 'web'
-      ? getPolyfillsPartial(
-          options.polyfills,
-          options.es2015Polyfills,
-          esm,
-          isScriptOptimizeOn
-        )
+      ? getPolyfillsPartial(options.polyfills, isScriptOptimizeOn)
       : {},
     options.target === 'web'
       ? getStylesPartial(
@@ -105,15 +89,13 @@ export function getWebpackConfig(
 function _getBaseWebpackPartial(
   context: ExecutorContext,
   options: NormalizedWebpackExecutorOptions,
-  esm: boolean,
   isScriptOptimizeOn: boolean,
   emitDecoratorMetadata: boolean,
   overrides?: GetWebpackConfigOverrides
 ) {
   let partial = getBaseWebpackPartial(
     options,
     {
-      esm,
       isScriptOptimizeOn,
       emitDecoratorMetadata,
       configuration: overrides?.configuration ?? context.configurationName,
@@ -271,33 +253,23 @@ export function getStylesPartial(
 
 export function getPolyfillsPartial(
   polyfills: string,
-  es2015Polyfills: string,
-  esm: boolean,
   isScriptOptimizeOn: boolean
 ): Configuration {
   const config = {
     entry: {} as { [key: string]: string[] },
   };
 
-  if (polyfills && esm && isScriptOptimizeOn) {
+  if (polyfills && isScriptOptimizeOn) {
     // Safari 10.1 supports <script type="module"> but not <script nomodule>.
     // Need to patch it up so the browser doesn't load both sets.
     config.entry.polyfills = [
       require.resolve('@nrwl/webpack/src/utils/webpack/safari-nomodule.js'),
       ...(polyfills ? [polyfills] : []),
     ];
-  } else if (es2015Polyfills && !esm && isScriptOptimizeOn) {
-    config.entry.polyfills = [
-      es2015Polyfills,
-      ...(polyfills ? [polyfills] : []),
-    ];
   } else {
     if (polyfills) {
       config.entry.polyfills = [polyfills];
     }
-    if (es2015Polyfills) {
-      config.entry['polyfills-es5'] = [es2015Polyfills];
-    }
   }
 
   return config;

packages/webpack/src/executors/webpack/lib/normalize-options.ts

@@ -5,8 +5,8 @@ import { normalizePath } from '@nrwl/devkit';
 import type {
   AssetGlobPattern,
   FileReplacement,
-  WebpackExecutorOptions,
   NormalizedWebpackExecutorOptions,
+  WebpackExecutorOptions,
 } from '../schema';
 
 export function normalizeOptions(
@@ -34,11 +34,9 @@ export function normalizeOptions(
           }
         : options.optimization,
     polyfills: options.polyfills ? resolve(root, options.polyfills) : undefined,
-    es2015Polyfills: options.es2015Polyfills
-      ? resolve(root, options.es2015Polyfills)
-      : undefined,
   };
 }
+
 function normalizeFileReplacements(
   root: string,
   fileReplacements: FileReplacement[]

packages/webpack/src/executors/webpack/schema.d.ts

@@ -47,7 +47,6 @@ export interface WebpackExecutorOptions {
   crossOrigin?: CrossOriginValue;
   deleteOutputPath?: boolean;
   deployUrl?: string;
-  es2015Polyfills?: string;
   externalDependencies?: 'all' | 'none' | string[];
   extractCss?: boolean;
   extractLicenses?: boolean;

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

@@ -228,10 +228,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.",