fix(react): fix issue with postcss and images in webpack config (#8802)

Fixes #8300

Author: jaysoo

packages/react/plugins/webpack.ts

@@ -3,55 +3,45 @@ import ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 // Add React-specific configuration
 function getWebpackConfig(config: Configuration) {
- config.module.rules.push(
- {
- test: /\.(png|jpe?g|gif|webp)$/,
- loader: require.resolve('url-loader'),
- options: {
- limit: 10000, // 10kB
- name: '[name].[hash:7].[ext]',
- },
- },
- {
- test: /\.svg$/,
- oneOf: [
- // If coming from JS/TS or MDX file, then transform into React component using SVGR.
- {
- issuer: /\.(js|ts|md)x?$/,
- use: [
- {
- loader: require.resolve('@svgr/webpack'),
- options: {
- svgo: false,
- titleProp: true,
- ref: true,
- },
+ config.module.rules.push({
+ test: /\.svg$/,
+ oneOf: [
+ // If coming from JS/TS or MDX file, then transform into React component using SVGR.
+ {
+ issuer: /\.(js|ts|md)x?$/,
+ use: [
+ {
+ loader: require.resolve('@svgr/webpack'),
+ options: {
+ svgo: false,
+ titleProp: true,
+ ref: true,
  },
-  {
-  loader: require.resolve('url-loader'),
-  options: {
-  limit: 10000, // 10kB
-  name: '[name].[hash:7].[ext]',
-  esModule: false,
- },
+ },
+ {
+ loader: require.resolve('url-loader'),
+ options: {
+ limit: 10000, // 10kB
+ name: '[name].[hash:7].[ext]',
+ esModule: false,
  },
- ],
- },
-  // Fallback to plain URL loader.
-  {
-  use: [
-  {
-  loader: require.resolve('url-loader'),
-  options: {
-  limit: 10000, // 10kB
-  name: '[name].[hash:7].[ext]',
- },
+ },
+ ],
+ },
+ // Fallback to plain URL loader.
+ {
+ use: [
+ {
+ loader: require.resolve('url-loader'),
+ options: {
+ limit: 10000, // 10kB
+ name: '[name].[hash:7].[ext]',
  },
- ],
- },
- ],
- }
- );
+ },
+ ],
+ },
+ ],
+ });
 
  if (config.mode === 'development' && config['devServer']?.hot) {
  // add `react-refresh/babel` to babel loader plugin

packages/web/src/utils/config.ts

@@ -3,10 +3,10 @@ import * as webpack from 'webpack';
 import { Configuration, WebpackPluginInstance } from 'webpack';
 import { LicenseWebpackPlugin } from 'license-webpack-plugin';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
-import TerserPlugin = require('terser-webpack-plugin');
 import { AssetGlobPattern, BuildBuilderOptions } from './shared-models';
 import { getOutputHashFormat } from './hash-format';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+import TerserPlugin = require('terser-webpack-plugin');
 import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const IGNORED_WEBPACK_WARNINGS = [
@@ -58,6 +58,15 @@ export function getBaseWebpackPartial(
  // Enabled for performance
  unsafeCache: true,
  rules: [
+ {
+ test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: 10_000, // 10 kB
+ },
+ },
+ },
  {
  // There's an issue resolving paths without fully specified extensions
  // See: https://github.com/graphql/graphql-js/issues/2721

packages/web/src/utils/web.config.ts

@@ -7,6 +7,8 @@ import { Configuration } from 'webpack';
 
 import { WebWebpackExecutorOptions } from '../executors/webpack/webpack.impl';
 import { convertBuildOptions } from './normalize';
+
+// TODO(jack): These should be inlined in a single function so it is easier to understand
 import { getBaseWebpackPartial } from './config';
 import { getBrowserConfig } from './webpack/partials/browser';
 import { getCommonConfig } from './webpack/partials/common';
@@ -51,6 +53,7 @@ export function getWebConfig(
  tsConfig,
  tsConfigPath: options.tsConfig,
  };
+ // TODO(jack): Replace merge behavior with an inlined config so it is easier to understand.
  return webpackMerge.merge([
  _getBaseWebpackPartial(
  options,
@@ -67,14 +70,10 @@ export function getWebConfig(
  ),
  getStylesPartial(wco.root, wco.projectRoot, wco.buildOptions, true),
  getCommonPartial(wco),
- getBrowserPartial(wco, options),
+ getBrowserConfig(wco),
  ]);
 }
 
-function getBrowserPartial(wco: any, options: WebWebpackExecutorOptions) {
- return getBrowserConfig(wco);
-}
-
 function _getBaseWebpackPartial(
  options: WebWebpackExecutorOptions,
  esm: boolean,
@@ -144,25 +143,11 @@ export function getStylesPartial(
  },
  importLoaders: 1,
  };
- const postcssOptions: PostcssOptions = (loader) => ({
+ const postcssOptions: PostcssOptions = () => ({
  plugins: [
  postcssImports({
  addModulesDirectories: includePaths,
  resolve: (url: string) => (url.startsWith('~') ? url.substr(1) : url),
- load: (filename: string) => {
- return new Promise<string>((resolve, reject) => {
- loader.fs.readFile(filename, (err: Error, data: Buffer) => {
- if (err) {
- reject(err);
-
- return;
- }
-
- const content = data.toString();
- resolve(content);
- });
- });
- },
  }),
  ],
  });

packages/web/src/utils/webpack/partials/styles.ts

@@ -40,20 +40,6 @@ export function getStylesConfig(
  postcssImports({
  addModulesDirectories: includePaths,
  resolve: (url: string) => (url.startsWith('~') ? url.substr(1) : url),
- load: (filename: string) => {
- return new Promise<string>((resolve, reject) => {
- loader.fs.readFile(filename, (err: Error, data: Buffer) => {
- if (err) {
- reject(err);
-
- return;
- }
-
- const content = data.toString();
- resolve(content);
- });
- });
- },
  }),
  PostcssCliResources({
  baseHref: buildOptions.baseHref,