fix(react): fix extracCss option for webpack 5 (#6925)

nrwl · Sep 3, 2021 · 06d2035 · 06d2035
1 parent 26f82b9
commit 06d2035
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/e2e/react/src/react-webpack-5.test.ts b/e2e/react/src/react-webpack-5.test.ts
@@ -7,6 +7,7 @@ import {
   readFile,
   runCLI,
   runCypressTests,
+  updateFile,
   uniq,
 } from '@nrwl/e2e/utils';
 
@@ -15,9 +16,17 @@ describe('Webpack 5: React Apps', () => {
     const appName = uniq('app');
 
     newProject();
-    runCLI(`generate @nrwl/react:app ${appName}`);
+    runCLI(`generate @nrwl/react:app ${appName} --style css`);
     runCLI(`generate @nrwl/web:webpack5`);
 
+    // Make the entry file large to make sure it doesn't split
+    updateFile(
+      `apps/${appName}/src/styles.css`,
+      Array.from({ length: 2000 })
+        .map((_, i) => `.class-${i} { color: red; }`)
+        .join('\n')
+    );
+
     runCLI(`build ${appName} --prod --output-hashing none`);
 
     checkFilesExist(

diff --git a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/browser.ts b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/browser.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { LicenseWebpackPlugin } from 'license-webpack-plugin';
-import { WebpackConfigOptions, BuildOptions } from '../build-options';
+import { WebpackConfigOptions } from '../build-options';
 import {
   getSourceMapDevTool,
   isPolyfillsEntry,
@@ -111,14 +111,6 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
             enforce: true,
             priority: 5,
           },
-          ...(isWebpack5
-            ? {
-                styles: {
-                  type: 'css/mini-extract',
-                  chunks: 'all',
-                },
-              }
-            : {}),
           vendors: false,
           // TODO(jack): Support both 4 and 5
           vendor: !!buildOptions.vendorChunk && {

diff --git a/packages/web/src/utils/third-party/cli-files/plugins/named-chunks-plugin.ts b/packages/web/src/utils/third-party/cli-files/plugins/named-chunks-plugin.ts
@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Compiler } from 'webpack';
-// Webpack doesn't export these so the deep imports can potentially break.
-// There doesn't seem to exist any ergonomic way to alter chunk names for non-context lazy chunks
-// (https://github.com/webpack/webpack/issues/9075) so this is the best alternative for now.
-const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
-const ImportDependenciesBlock = require('webpack/lib/dependencies/ImportDependenciesBlock');
-const Template = require('webpack/lib/Template');
 
 export class NamedLazyChunksPlugin {
   constructor() {}
   apply(compiler: Compiler): void {
+    // Webpack doesn't export these so the deep imports can potentially break.
+    // There doesn't seem to exist any ergonomic way to alter chunk names for non-context lazy chunks
+    // (https://github.com/webpack/webpack/issues/9075) so this is the best alternative for now.
+    const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
+    const ImportDependenciesBlock = require('webpack/lib/dependencies/ImportDependenciesBlock');
+    const Template = require('webpack/lib/Template');
     compiler.hooks.compilation.tap(
       'named-lazy-chunks-plugin',
       (compilation) => {