Infrastructure: Update build tooling to use webpack v5 (#5792)

Co-authored-by: samwhale <samuelestrella226@gmail.com>

.eslintrc

@@ -244,6 +244,7 @@
     "import/resolver": {
       "@web-stories-wp/eslint-import-resolver": {
         "mapping": {
+          "^@googleforcreators\\/(.*)\\/(.*)": "./packages/$1/src/$2",
           "^@googleforcreators\\/(.*)": "./packages/$1/src/",
           "^@web-stories-wp\\/(.*)": "./packages/$1/src/"
         }
@@ -348,7 +349,8 @@
         "jasmine"
       ],
       "env": {
-        "jasmine": true
+        "jasmine": true,
+        "node": true
       },
       "rules": {
         "eslint-comments/require-description": "off",

.github/dependabot.yml

@@ -17,27 +17,7 @@ updates:
       - Dependencies
       - JavaScript
     ignore:
-      # Blocked by https://github.com/googleforcreators/web-stories-wp/pull/5792.
-      - dependency-name: 'webpack'
-        versions:
-          - '>= 5'
-
-      # Blocked by https://github.com/googleforcreators/web-stories-wp/pull/5792.
-      - dependency-name: 'html-webpack-plugin'
-        versions:
-          - '>= 5'
-
-      # Blocked by https://github.com/googleforcreators/web-stories-wp/pull/5792.
-      - dependency-name: 'karma-webpack'
-        versions:
-          - '>= 5'
-
-      # Blocked by https://github.com/googleforcreators/web-stories-wp/pull/5792.
-      - dependency-name: 'source-map-loader'
-        versions:
-          - '>= 2'
-
-      # styled components is not yet compatible.
+      # styled-components is not yet compatible.
       - dependency-name: 'stylis-plugin-rtl'
         versions:
           - '>= 2'

.github/workflows/build-and-deploy.yml

@@ -90,8 +90,8 @@ jobs:
           pattern: '{assets/js/*.js,assets/css/*.css}'
           build-script: 'build:js'
           minimum-change-threshold: 100
-          # Ignore webpack content hash in bundle filenames.
-          strip-hash: '.*-(\w{20})\.js$'
+          # Ignore chunk and module hashes in bundle filenames.
+          strip-hash: '.*-(\w{20})|^(\d{2,5})\.js$'
 
   build:
     name: Package ZIP files
@@ -142,7 +142,7 @@ jobs:
       - name: Bundle development version
         run: |
           rm -rf assets/css/* assets/js/*
-          NODE_ENV=development npx webpack --config webpack.config.cjs
+          npx webpack --node-env=development
           npm run workflow:build-plugin
           mv build/web-stories build/web-stories-dev/
 

.github/workflows/plugin-release.yml

@@ -414,7 +414,7 @@ jobs:
       - name: Bundle development version
         run: |
           rm -rf assets/css/* assets/js/*
-          NODE_ENV=development npx webpack --config webpack.config.cjs
+          npx webpack --node-env=development
           npm run workflow:build-plugin -- --zip web-stories-dev.zip
 
       - name: Prepare release artifacts

.npmpackagejsonlintrc.json

@@ -53,6 +53,7 @@
         "files",
         "type",
         "workspaces",
+        "customExports",
         "exports",
         "main",
         "module",
@@ -102,10 +103,8 @@
     "require-scripts": "off",
     "require-version": "off",
     "scripts-type": "error",
-    "valid-values-author": ["error", [
-      "Google"
-    ]],
-    "valid-values-license": [ "error", [ "Apache-2.0" ] ],
+    "valid-values-author": ["error", ["Google"]],
+    "valid-values-license": ["error", ["Apache-2.0"]],
     "valid-values-private": "off",
     "version-format": "error",
     "version-type": "error"

.storybook/main.cjs

@@ -16,8 +16,26 @@
 /**
  * External dependencies
  */
+const path = require('path');
 const webpack = require('webpack');
 
+/**
+ * Storybook Workaround: https://github.com/storybookjs/storybook/issues/14877#issuecomment-1000441696
+ *
+ * @param {string} filePath Original file path
+ * @param {string} newExtension Extension to use (such as .cjs or .html)
+ * @return {Object} updated path
+ */
+const replaceFileExtension = (filePath, newExtension) => {
+  const { name, root, dir } = path.parse(filePath);
+  return path.format({
+    name,
+    root,
+    dir,
+    ext: newExtension,
+  });
+};
+
 module.exports = {
   stories: [
     './stories/**/*.js',
@@ -33,28 +51,59 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-storysource/register',
   ],
+  core: {
+    builder: 'webpack5',
+  },
   reactOptions: {
-    fastRefresh: true,
+    // Disabled due to compatibility issues with webpack 5.
+    // See https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/308
+    fastRefresh: false,
     strictMode: true,
   },
   //eslint-disable-next-line require-await -- Negligible.
   webpackFinal: async (config) => {
-    // Modifies storybook's webpack config to use svgr instead of file-loader.
-    // see https://github.com/storybookjs/storybook/issues/5613
-
-    const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
-    const assetLoader = {
-      loader: assetRule.loader,
-      options: assetRule.options || assetRule.query,
+    // webpack < 5 used to include polyfills for node.js core modules by default.
+    // Prevent ModuleNotFoundError for this dependency.
+    config.resolve = {
+      ...config.resolve,
+      // Fixes resolving packages in the monorepo so we use the "src" folder, not "dist".
+      // This should be sync'd with the config in `webpack.config.cjs`.
+      exportsFields: ['customExports', 'exports'],
     };
 
+    // Avoid having to provide full file extension for imports.
+    // See https://webpack.js.org/configuration/module/#resolvefullyspecified
+
+    config.module.rules = config.module.rules.map((rule) => ({
+      ...rule,
+      resolve: {
+        ...rule.resolve,
+        fullySpecified: false,
+      },
+    }));
+
+    // These should be sync'd with the config in `webpack.config.cjs`.
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        WEB_STORIES_CI: JSON.stringify(process.env.CI),
+        WEB_STORIES_ENV: JSON.stringify(process.env.NODE_ENV),
+        WEB_STORIES_DISABLE_ERROR_BOUNDARIES: JSON.stringify(
+          process.env.DISABLE_ERROR_BOUNDARIES
+        ),
+        WEB_STORIES_DISABLE_OPTIMIZED_RENDERING: JSON.stringify(
+          process.env.DISABLE_OPTIMIZED_RENDERING
+        ),
+        WEB_STORIES_DISABLE_PREVENT: JSON.stringify(
+          process.env.DISABLE_PREVENT
+        ),
+        WEB_STORIES_DISABLE_QUICK_TIPS: JSON.stringify(
+          process.env.DISABLE_QUICK_TIPS
+        ),
+      })
+    );
+
     // These should be sync'd with the config in `webpack.config.cjs`.
 
-    config.resolve = {
-      // Fixes resolving packages in the monorepo so we use the "src" folder, not "dist".
-      // TODO: Revisit after upgrading to webpack v5 or when splitting repository.
-      mainFields: ['browser', 'module', 'main', 'source'],
-    };
     config.plugins.push(
       new webpack.DefinePlugin({
         WEB_STORIES_CI: JSON.stringify(process.env.CI),
@@ -74,76 +123,126 @@ module.exports = {
       })
     );
 
+    // Ensure SVGR is the only loader used for files with .svg extension.
+    const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
+    assetRule.exclude = /\.svg/;
+
     config.module.rules.unshift(
       {
         test: /\.svg$/,
-        use: [
+        // Use asset SVG and SVGR together.
+        // Not using resourceQuery because it doesn't work well with Rollup.
+        // https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+        oneOf: [
           {
-            loader: '@svgr/webpack',
-            options: {
-              titleProp: true,
-              svgo: true,
-              memo: true,
-              svgoConfig: {
-                plugins: [
-                  {
-                    removeViewBox: false,
-                    removeDimensions: true,
-                    convertColors: {
-                      currentColor: /^(?!url|none)/i,
-                    },
+            type: 'asset/inline',
+            include: [/inline-icons\/.*\.svg$/],
+          },
+          {
+            issuer: /\.js?$/,
+            include: [/\/icons\/.*\.svg$/],
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  titleProp: true,
+                  svgo: true,
+                  memo: true,
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false,
+                            convertColors: {
+                              currentColor: /^(?!url|none)/i,
+                            },
+                          },
+                        },
+                      },
+                      'removeDimensions',
+                    ],
                   },
-                ],
+                },
               },
-            },
+            ],
           },
-          'url-loader',
-          assetLoader,
-        ],
-        exclude: [/images\/.*\.svg$/],
-      },
-      {
-        test: /\.svg$/,
-        use: [
           {
-            loader: '@svgr/webpack',
-            options: {
-              titleProp: true,
-              svgo: true,
-              memo: true,
-              svgoConfig: {
-                plugins: [
-                  {
-                    removeViewBox: false,
-                    removeDimensions: true,
-                    convertColors: {
-                      // See https://github.com/googleforcreators/web-stories-wp/pull/6361
-                      currentColor: false,
-                    },
+            issuer: /\.js?$/,
+            include: [/images\/.*\.svg$/],
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  titleProp: true,
+                  svgo: true,
+                  memo: true,
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false,
+                            convertColors: {
+                              // See https://github.com/googleforcreators/web-stories-wp/pull/6361
+                              currentColor: false,
+                            },
+                          },
+                        },
+                      },
+                      'removeDimensions',
+                    ],
                   },
-                ],
+                },
               },
-            },
+            ],
           },
-          'url-loader',
         ],
-        include: [/images\/.*\.svg$/],
       },
       {
         test: /\.(png|jpe?g|gif|webp)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              outputPath: 'images',
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          outputPath: 'images/',
+        },
       }
     );
 
-    // only the first matching rule is used when there is a match.
-    config.module.rules = [{ oneOf: config.module.rules }];
+    /*
+    Webpack + Storybook 6.4 - webpack crashing due to plugins
+    that are compiled to CJS while project uses ESM.
+    TODO: 10696: Remove with storybook 6.5
+    */
+    // https://github.com/storybookjs/storybook/issues/14877#issuecomment-1000441696
+
+    // Find the plugin instance that needs to be mutated
+    const virtualModulesPlugin = config.plugins.find(
+      (plugin) => plugin.constructor.name === 'VirtualModulesPlugin'
+    );
+
+    // Change the file extension to .cjs for all files that end with "generated-stories-entry.js"
+    virtualModulesPlugin._staticModules = Object.fromEntries(
+      Object.entries(virtualModulesPlugin._staticModules).map(
+        ([key, value]) => {
+          if (key.endsWith('generated-stories-entry.js')) {
+            return [replaceFileExtension(key, '.cjs'), value];
+          }
+          return [key, value];
+        }
+      )
+    );
+
+    // Change the entry points to point to the appropriate .cjs files
+    config.entry = config.entry.map((entry) => {
+      if (entry.endsWith('generated-stories-entry.js')) {
+        return replaceFileExtension(entry, '.cjs');
+      }
+      return entry;
+    });
+
+    /* End storybook 6.4 non .cjs extension patch */
 
     return config;
   },

.storybook/stories/playground/story-editor/api/fonts.js

@@ -16,7 +16,7 @@
 
 export async function getFonts(params) {
   let { default: fonts } = await import(
-    /* webpackChunkName: "chunk-fonts" */ '@googleforcreators/fonts/src/fonts.json' //eslint-disable-line import/no-internal-modules -- TODO: Improve export in module.
+    /* webpackChunkName: "chunk-fonts" */ '@googleforcreators/fonts/fonts.json' // eslint-disable-line import/no-internal-modules -- This is fine here.
   );
 
   fonts = fonts.map((font) => ({

babel.config.cjs

@@ -47,12 +47,6 @@ module.exports = function (api) {
     plugins: [
       '@wordpress/babel-plugin-import-jsx-pragma',
       'babel-plugin-styled-components',
-      '@babel/plugin-proposal-class-properties',
-      '@babel/plugin-proposal-private-methods',
-      'babel-plugin-inline-json-import',
-      '@babel/plugin-syntax-top-level-await',
-      '@babel/plugin-proposal-optional-chaining',
-      '@babel/plugin-proposal-nullish-coalescing-operator',
     ],
     sourceMaps: true,
     env: {