Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Sep 3, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 10 additions & 1 deletion e2e/react/src/react-webpack-5.test.ts
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ import {
readFile,
runCLI,
runCypressTests,
updateFile,
uniq,
} from '@nrwl/e2e/utils';

Expand All @@ -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(
Expand Down
10 changes: 1 addition & 9 deletions packages/web/src/utils/third-party/cli-files/models/webpack-configs/browser.ts
View file
Open in desktop
Expand Up @@ -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,
Expand Down Expand Up @@ -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 && {
Expand Down
12 changes: 6 additions & 6 deletions packages/web/src/utils/third-party/cli-files/plugins/named-chunks-plugin.ts
View file
Open in desktop
Expand Up @@ -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.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to move it here since later versions of webpack 5 doesn't have these modules anymore, causing the build to 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) => {
Expand Down