@griddo/ax 12.2.2 → 12.2.3-rc.0

package/config/webpack.config.js

@@ -2,26 +2,23 @@ const fs = require("fs");
 const path = require("path");
 const webpack = require("webpack");
 const resolve = require("resolve");
-const PnpWebpackPlugin = require("pnp-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-const safePostCssParser = require("postcss-safe-parser");
-const ManifestPlugin = require("webpack-manifest-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
-const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
-const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
 const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
 const paths = require("./paths");
 const modules = require("./modules");
 const getClientEnvironment = require("./env");
 const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
 const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
-const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const createEnvironmentHash = require("./webpack/persistentCache/createEnvironmentHash");
 
 const postcssNormalize = require("postcss-normalize");
 
@@ -51,9 +48,6 @@ const appPackageJson = require(paths.appPackageJson);
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
 
-const webpackDevClientEntry = require.resolve("react-dev-utils/webpackHotDevClient");
-const reactRefreshOverlayEntry = require.resolve("react-dev-utils/refreshOverlayInterop");
-
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
@@ -63,8 +57,9 @@ const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || "10
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
-// Get the path to the uncompiled service worker (if it exists).
-const swSrc = paths.swSrc;
+// CI runners are memory-capped containers with a throwaway filesystem, so webpack 5
+// defaults that assume a long-lived dev machine work against us there.
+const isCI = process.env.CI === "true";
 
 // style files regexes
 const cssRegex = /\.css$/;
@@ -115,7 +110,9 @@ module.exports = function (webpackEnv) {
 			},
 			{
 				loader: require.resolve("css-loader"),
-				options: cssOptions,
+				options: {
+					...cssOptions,
+				},
 			},
 			{
 				// Options for PostCSS as we reference these options twice
@@ -123,26 +120,23 @@ module.exports = function (webpackEnv) {
 				// package.json
 				loader: require.resolve("postcss-loader"),
 				options: {
-					// Necessary for external CSS imports to work
-					// https://github.com/facebook/create-react-app/issues/2677
-					ident: "postcss",
-					plugins: () => [
-						require("postcss-flexbugs-fixes"),
-						require("postcss-preset-env")({
-							autoprefixer: {
-								flexbox: "no-2009",
-							},
-							stage: 3,
-						}),
-
-						// PostCSS plugins from components.
-						...postcssConfigPlugins,
-
-						// Adds PostCSS Normalize as the reset css with default options,
-						// so that it honors browserslist config in package.json
-						// which in turn let's users customize the target behavior as per their needs.
-						postcssNormalize(),
-					],
+					postcssOptions: {
+						plugins: [
+							require("postcss-flexbugs-fixes"),
+							require("postcss-preset-env")({
+								autoprefixer: {
+									flexbox: "no-2009",
+								},
+								stage: 3,
+							}),
+							// PostCSS plugins from components.
+							...postcssConfigPlugins,
+							// Adds PostCSS Normalize as the reset css with default options,
+							// so that it honors browserslist config in package.json.
+							// postcss-preset-env 6 does not bundle normalize, so we keep it.
+							postcssNormalize(),
+						],
+					},
 					sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 				},
 			},
@@ -160,7 +154,8 @@ module.exports = function (webpackEnv) {
 				{
 					loader: require.resolve(preProcessor),
 					options: {
-						sourceMap: true,
+						api: "modern-compiler",
+						sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 						...preProcessorOptions,
 					},
 				},
@@ -180,31 +175,7 @@ module.exports = function (webpackEnv) {
 			: isEnvDevelopment && "cheap-module-source-map",
 		// These are the "entry points" to our application.
 		// This means they will be the "root" imports that are included in JS bundle.
-		entry:
-			isEnvDevelopment && !shouldUseReactRefresh
-				? [
-						// Include an alternative client for WebpackDevServer. A client's job is to
-						// connect to WebpackDevServer by a socket and get notified about changes.
-						// When you save a file, the client will either apply hot updates (in case
-						// of CSS changes), or refresh the page (in case of JS changes). When you
-						// make a syntax error, this client will display a syntax error overlay.
-						// Note: instead of the default WebpackDevServer client, we use a custom one
-						// to bring better experience for Create React App users. You can replace
-						// the line below with these two lines if you prefer the stock client:
-						//
-						// require.resolve('webpack-dev-server/client') + '?/',
-						// require.resolve('webpack/hot/dev-server'),
-						//
-						// When using the experimental react-refresh integration,
-						// the webpack plugin takes care of injecting the dev client for us.
-						webpackDevClientEntry,
-						// Finally, this is your app's code:
-						paths.appIndexJs,
-						// We include the app code last so that if there is a runtime error during
-						// initialization, it doesn't blow up the WebpackDevServer client, and
-						// changing JS code would still trigger a refresh.
-					]
-				: paths.appIndexJs,
+		entry: paths.appIndexJs,
 		output: {
 			// The build folder.
 			path: isEnvProduction ? paths.appBuild : undefined,
@@ -212,13 +183,12 @@ module.exports = function (webpackEnv) {
 			pathinfo: isEnvDevelopment,
 			// There will be one main bundle, and one file per asynchronous chunk.
 			// In development, it does not produce real files.
-			filename: isEnvProduction ? "static/js/[name].[contenthash:8].js" : isEnvDevelopment && "static/js/bundle.js",
-			// TODO: remove this when upgrading to webpack 5
-			futureEmitAssets: true,
+			filename: isEnvProduction ? "static/js/[name].[contenthash:8].js" : isEnvDevelopment && "static/js/[name].js",
 			// There are also additional JS chunk files if you use code splitting.
 			chunkFilename: isEnvProduction
 				? "static/js/[name].[contenthash:8].chunk.js"
 				: isEnvDevelopment && "static/js/[name].chunk.js",
+			assetModuleFilename: "static/media/[name].[contenthash:8][ext]",
 			// webpack uses `publicPath` to determine where the app is being served from.
 			// It requires a trailing slash, or the file assets will get an incorrect path.
 			// We inferred the "public path" (such as / or /my-project) from homepage.
@@ -229,16 +199,40 @@ module.exports = function (webpackEnv) {
 				: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
 			// Prevents conflicts when multiple webpack runtimes (from different apps)
 			// are used on the same page.
-			jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+			chunkLoadingGlobal: `webpackJsonp${appPackageJson.name}`,
 			// this defaults to 'window', but by setting it to 'this' then
 			// module chunks which are built will work in web workers as well.
 			globalObject: "this",
+			// Node.js 17+ (OpenSSL 3.0) dropped MD4, webpack 5's default hash function.
+			// xxhash64 avoids the `digital envelope routines::unsupported` error and lets
+			// us drop the `--openssl-legacy-provider` workaround.
+			hashFunction: "xxhash64",
 		},
+		// The persistent cache pays off on a dev machine, but CI installs node_modules
+		// from scratch on every run: the ~640 MB pack is built, held in memory to be
+		// serialized and then thrown away, for zero reuse.
+		cache: isCI
+			? false
+			: {
+					type: "filesystem",
+					version: createEnvironmentHash(env.raw),
+					cacheDirectory: paths.appWebpackCache,
+					store: "pack",
+					buildDependencies: {
+						defaultWebpack: ["webpack/lib/"],
+						config: [__filename],
+						tsconfig: [paths.appTsConfig].filter(Boolean),
+					},
+				},
 		optimization: {
 			minimize: isEnvProduction,
 			minimizer: [
 				// This is only used in production mode
 				new TerserPlugin({
+					// Inside a container os.cpus() reports the host's cores, so the default
+					// (cores - 1) forks far more workers than the pod can feed, each one a
+					// Node process inheriting NODE_OPTIONS' heap ceiling.
+					parallel: isCI ? 2 : true,
 					terserOptions: {
 						parse: {
 							// We want terser to parse ecma 8 code. However, we don't want it
@@ -276,34 +270,15 @@ module.exports = function (webpackEnv) {
 							ascii_only: true,
 						},
 					},
-					sourceMap: shouldUseSourceMap,
 				}),
 				// This is only used in production mode
-				new OptimizeCSSAssetsPlugin({
-					cssProcessorOptions: {
-						parser: safePostCssParser,
-						map: shouldUseSourceMap
-							? {
-									// `inline: false` forces the sourcemap to be output into a
-									// separate file
-									inline: false,
-									// `annotation: true` appends the sourceMappingURL to the end of
-									// the css file, helping the browser find the sourcemap
-									annotation: true,
-								}
-							: false,
-					},
-					cssProcessorPluginOptions: {
-						preset: ["default", { minifyFontValues: { removeQuotes: false } }],
-					},
-				}),
+				new CssMinimizerPlugin(),
 			],
 			// Automatically split vendor and commons
 			// https://twitter.com/wSokra/status/969633336732905474
 			// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
 			splitChunks: {
 				chunks: "all",
-				name: isEnvDevelopment,
 			},
 			// Keep the runtime chunk separated to enable long term caching
 			// https://twitter.com/wSokra/status/969679223278505985
@@ -339,49 +314,52 @@ module.exports = function (webpackEnv) {
 				...(modules.webpackAliases || {}),
 				...projectAliases,
 			},
-			plugins: [
-				// Adds support for installing with Plug'n'Play, leading to faster installs and adding
-				// guards against forgotten dependencies and such.
-				PnpWebpackPlugin,
-			],
-		},
-		resolveLoader: {
-			plugins: [
-				// Also related to Plug'n'Play, but this time it tells webpack to load its loaders
-				// from the current package.
-				PnpWebpackPlugin.moduleLoader(module),
-			],
+			// Stub Node builtins that have no browser equivalent (webpack 4 mocked these via
+			// its old core-module block: module, dgram, dns, fs, http2, net, tls, child_process).
+			// Everything with a browser polyfill (buffer, stream, crypto, http, https, zlib,
+			// util, process, ...) is provided by NodePolyfillPlugin, restoring webpack 4's
+			// auto-polyfill behaviour so legacy client instances keep building.
+			fallback: {
+				fs: false,
+				net: false,
+				tls: false,
+				child_process: false,
+				dns: false,
+				http2: false,
+				module: false,
+				dgram: false,
+			},
 		},
 		module: {
 			strictExportPresence: true,
 			rules: [
-				// Disable require.ensure as it's not a standard language feature.
-				{ parser: { requireEnsure: false } },
 				{
 					// "oneOf" will traverse all following loaders until one will
 					// match the requirements. When no loader matches it will fall
-					// back to the "file" loader at the end of the loader list.
+					// back to the "resource" asset module at the end of the loader list.
 					oneOf: [
 						// TODO: Merge this config once `image/avif` is in the mime-db
 						// https://github.com/jshttp/mime-db
 						{
 							test: [/\.avif$/],
-							loader: require.resolve("url-loader"),
-							options: {
-								limit: imageInlineSizeLimit,
-								mimetype: "image/avif",
-								name: "static/media/[name].[hash:8].[ext]",
+							type: "asset",
+							mimetype: "image/avif",
+							parser: {
+								dataUrlCondition: {
+									maxSize: imageInlineSizeLimit,
+								},
 							},
 						},
-						// "url" loader works like "file" loader except that it embeds assets
+						// "asset" loader works like "file" loader except that it embeds assets
 						// smaller than specified limit in bytes as data URLs to avoid requests.
 						// A missing `test` is equivalent to a match.
 						{
 							test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-							loader: require.resolve("url-loader"),
-							options: {
-								limit: imageInlineSizeLimit,
-								name: "static/media/[name].[hash:8].[ext]",
+							type: "asset",
+							parser: {
+								dataUrlCondition: {
+									maxSize: imageInlineSizeLimit,
+								},
 							},
 						},
 						// Process application JS with Babel.
@@ -475,6 +453,14 @@ module.exports = function (webpackEnv) {
 								importLoaders: 1,
 								sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 								modules: {
+									// css-loader v6 defaults `esModule: true`, so `import * as styles`
+									// only sees locals as named exports when `namedExport` is on.
+									// griddo-components relies on `import * as styles` heavily.
+									namedExport: true,
+									// `dashesOnly` converts only hyphenated names (foo-bar -> fooBar) so
+									// `composes: heading-sm` works, while leaving JS-reserved names such as
+									// `@keyframes _in` untouched (camelCaseOnly would break those).
+									exportLocalsConvention: "dashesOnly",
 									getLocalIdent: getCSSModuleLocalIdent,
 								},
 							}),
@@ -507,6 +493,8 @@ module.exports = function (webpackEnv) {
 									importLoaders: 3,
 									sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
 									modules: {
+										namedExport: true,
+										exportLocalsConvention: "dashesOnly",
 										getLocalIdent: getCSSModuleLocalIdent,
 									},
 								},
@@ -515,30 +503,20 @@ module.exports = function (webpackEnv) {
 						},
 						{
 							test: /\.(woff|woff2)$/,
-							use: ["url-loader"],
+							type: "asset/resource",
 						},
 						{
 							test: /\.svg$/,
 							use: ["@svgr/webpack"],
 						},
-						// "file" loader makes sure those assets get served by WebpackDevServer.
-						// When you `import` an asset, you get its (virtual) filename.
-						// In production, they would get copied to the `build` folder.
-						// This loader doesn't use a "test" so it will catch all modules
-						// that fall through the other loaders.
+						// Catch-all: anything not handled above is emitted as a separate file.
+						// This replaces the old file-loader catch-all.
 						{
-							loader: require.resolve("file-loader"),
-							// Exclude `js` files to keep "css" loader working as it injects
-							// its runtime that would otherwise be processed through "file" loader.
-							// Also exclude `html` and `json` extensions so they get processed
-							// by webpacks internal loaders.
 							exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-							options: {
-								name: "static/media/[name].[hash:8].[ext]",
-							},
+							type: "asset/resource",
 						},
 						// ** STOP ** Are you adding a new loader?
-						// Make sure to add the new loader(s) before the "file" loader.
+						// Make sure to add the new loader(s) before the "asset/resource" catch-all.
 					],
 				},
 				{
@@ -549,6 +527,12 @@ module.exports = function (webpackEnv) {
 			],
 		},
 		plugins: [
+			// Restore webpack 4's Node core-module handling for browser bundles. Clients run
+			// `griddo build` (this config) against their own instance, so this guards legacy
+			// instances against "Module not found" for Node builtins that webpack 5 no longer
+			// polyfills automatically. Browser-polyfillable builtins are provided here; the
+			// server-only ones are stubbed via resolve.fallback above.
+			new NodePolyfillPlugin(),
 			// Generates an `index.html` file with the <script> injected.
 			new HtmlWebpackPlugin(
 				Object.assign(
@@ -594,32 +578,23 @@ module.exports = function (webpackEnv) {
 			// during a production build.
 			// Otherwise React will be compiled in the very slow development mode.
 			new webpack.DefinePlugin(env.stringified),
-			// This is necessary to emit hot updates (CSS and Fast Refresh):
-			isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-			// Experimental hot reloading for React .
+			// HMR is handled by WebpackDevServer 4 (`hot: true` in webpackDevServer.config.js),
+			// which registers HotModuleReplacementPlugin automatically. We no longer add it
+			// manually to avoid a duplicate-plugin instance.
+			// Experimental hot reloading for React (Fast Refresh).
 			// https://github.com/facebook/react/tree/master/packages/react-refresh
 			isEnvDevelopment &&
 				shouldUseReactRefresh &&
 				new ReactRefreshWebpackPlugin({
-					overlay: {
-						entry: webpackDevClientEntry,
-						// The expected exports are slightly different from what the overlay exports,
-						// so an interop is included here to enable feedback on module-level errors.
-						module: reactRefreshOverlayEntry,
-						// Since we ship a custom dev client and overlay integration,
-						// the bundled socket handling logic can be eliminated.
-						sockIntegration: false,
-					},
+					// The error overlay is served by WebpackDevServer 4's native client
+					// (see `client.overlay` in webpackDevServer.config.js). Disable the
+					// Fast Refresh plugin overlay to avoid two overlays fighting.
+					overlay: false,
 				}),
 			// Watcher doesn't work well if you mistype casing in a path so we use
 			// a plugin that prints an error when you attempt to do this.
 			// See https://github.com/facebook/create-react-app/issues/240
 			isEnvDevelopment && new CaseSensitivePathsPlugin(),
-			// If you require a missing module and then `npm install` it, you still have
-			// to restart the development server for webpack to discover it. This plugin
-			// makes the discovery automatic so you don't have to restart.
-			// See https://github.com/facebook/create-react-app/issues/186
-			isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
 			isEnvProduction &&
 				new MiniCssExtractPlugin({
 					// Options similar to the same options in webpackOptions.output
@@ -633,7 +608,7 @@ module.exports = function (webpackEnv) {
 			//   `index.html`
 			// - "entrypoints" key: Array of files which are included in `index.html`,
 			//   can be used to reconstruct the HTML if necessary
-			new ManifestPlugin({
+			new WebpackManifestPlugin({
 				fileName: "asset-manifest.json",
 				publicPath: paths.publicUrlOrPath,
 				generate: (seed, files, entrypoints) => {
@@ -654,60 +629,49 @@ module.exports = function (webpackEnv) {
 			// solution that requires the user to opt into importing specific locales.
 			// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
 			// You can remove this if you don't use Moment.js:
-			new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-			// Generate a service worker script that will precache, and keep up to date,
-			// the HTML & assets that are part of the webpack build.
-			isEnvProduction &&
-				fs.existsSync(swSrc) &&
-				new WorkboxWebpackPlugin.InjectManifest({
-					swSrc,
-					dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
-					exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
-					// Bump up the default maximum size (2mb) that's precached,
-					// to make lazy-loading failure scenarios less likely.
-					// See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
-					maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
-				}),
+			new webpack.IgnorePlugin({
+				resourceRegExp: /^\.\/locale$/,
+				contextRegExp: /moment$/,
+			}),
 			// TypeScript type checking
 			useTypeScript &&
 				new ForkTsCheckerWebpackPlugin({
-					typescript: resolve.sync("typescript", {
-						basedir: paths.appNodeModules,
-					}),
 					async: isEnvDevelopment,
-					checkSyntacticErrors: true,
-					resolveModuleNameModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
-					resolveTypeReferenceDirectiveModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
-					tsconfig: paths.appTsConfig,
-					reportFiles: [
-						// This one is specifically to match during CI tests,
-						// as micromatch doesn't match
-						// '../cra-template-typescript/template/src/App.tsx'
-						// otherwise.
-						"../**/src/**/*.{ts,tsx}",
-						"**/src/**/*.{ts,tsx}",
-						"!**/src/**/__tests__/**",
-						"!**/src/**/?(*.)(spec|test).*",
-						"!**/src/setupProxy.*",
-						"!**/src/setupTests.*",
-					],
-					silent: true,
-					// The formatter is invoked directly in WebpackDevServerUtils during development
-					formatter: isEnvProduction ? typescriptFormatter : undefined,
+					typescript: {
+						typescriptPath: resolve.sync("typescript", {
+							basedir: paths.appNodeModules,
+						}),
+						configOverwrite: {
+							compilerOptions: {
+								sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+								skipLibCheck: true,
+								inlineSourceMap: false,
+								declarationMap: false,
+								noEmit: true,
+								incremental: true,
+								tsBuildInfoFile: paths.appTsBuildInfoFile,
+							},
+						},
+						context: paths.appPath,
+						diagnosticOptions: {
+							syntactic: true,
+						},
+						mode: "write-references",
+					},
+					issue: {
+						include: [{ file: "../**/src/**/*.{ts,tsx}" }, { file: "**/src/**/*.{ts,tsx}" }],
+						exclude: [
+							{ file: "**/src/**/__tests__/**" },
+							{ file: "**/src/**/?(*.){spec|test}.*" },
+							{ file: "**/src/setupProxy.*" },
+							{ file: "**/src/setupTests.*" },
+						],
+					},
+					logger: {
+						infrastructure: "silent",
+					},
 				}),
 		].filter(Boolean),
-		// Some libraries import Node modules but don't use them in the browser.
-		// Tell webpack to provide empty mocks for them so importing them works.
-		node: {
-			module: "empty",
-			dgram: "empty",
-			dns: "mock",
-			fs: "empty",
-			http2: "empty",
-			net: "empty",
-			tls: "empty",
-			child_process: "empty",
-		},
 		// Turn off performance processing because we utilize
 		// our own hints via the FileSizeReporter
 		performance: false,