fix: Webpack 5 automatic publicPath error (#23760)

* fix: Webpack 5 automatic publicPath error

* update webpack-preprocessor test

* fix: disable webpack-preprocessor chunking

* stub LimitChunkCountPlugin

Co-authored-by: Zachary Williams <zachjw34@gmail.com>

npm/webpack-preprocessor/index.ts

@@ -202,6 +202,8 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
       // we need to set entry and output
       entry,
       output: {
+        // disable automatic publicPath
+        publicPath: '',
         path: path.dirname(outputPath),
         filename: path.basename(outputPath),
       },
@@ -220,6 +222,10 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
 
       // override typescript to always generate proper source maps
       overrideSourceMaps(true, options.typescript)
+
+      // To support dynamic imports, we have to disable any code splitting.
+      debug('Limiting number of chunks to 1')
+      opts.plugins = (opts.plugins || []).concat(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }))
     })
     .value() as any
 

npm/webpack-preprocessor/test/unit/index.spec.js

@@ -10,6 +10,11 @@ const expect = chai.expect
 chai.use(require('sinon-chai'))
 
 const webpack = sinon.stub()
+const LimitChunkCountPluginStub = sinon.stub()
+
+webpack.optimize = {
+  LimitChunkCountPlugin: LimitChunkCountPluginStub,
+}
 
 mockery.enable({
   warnOnUnregistered: false,
@@ -149,6 +154,7 @@ describe('webpack preprocessor', function () {
 
         return this.run().then(() => {
           expect(webpack.lastCall.args[0].output).to.eql({
+            publicPath: '',
             path: 'output',
             filename: 'output.ts.js',
           })

system-tests/projects/webpack-preprocessor-webpack-5/cypress.config.js

@@ -0,0 +1,50 @@
+// Since we are linking the `@cypress/webpack-preprocessor` package,
+// `require('webpack')` will resolve the version found in our repo (v4).
+// We need to override the webpack require to point to the local node_modules
+const Module = require('module')
+
+const originalModuleLoad = Module._load
+
+Module._load = function (request, parent, isMain) {
+  if (request === 'webpack' || request.startsWith('webpack/')) {
+    const resolvePath = require.resolve(request, {
+      paths: [__dirname],
+    })
+
+    return originalModuleLoad(resolvePath, parent, isMain)
+  }
+
+  return originalModuleLoad(request, parent, isMain)
+}
+
+const { defineConfig } = require('cypress')
+const wp = require('@cypress/webpack-preprocessor')
+
+module.exports = defineConfig({
+  e2e: {
+    supportFile: false,
+    setupNodeEvents (on, config) {
+      on('file:preprocessor', wp({
+        webpackOptions: {
+          module: {
+            rules: [
+              {
+                test: /\.m?js$/,
+                exclude: /node_modules/,
+                use: {
+                  loader: 'babel-loader',
+                  options: {
+                    presets: [
+                      ['@babel/preset-env', { targets: 'defaults' }],
+                    ],
+                    plugins: ['@babel/plugin-transform-runtime'],
+                  },
+                },
+              },
+            ],
+          },
+        },
+      }))
+    },
+  },
+})

system-tests/projects/webpack-preprocessor-webpack-5/cypress/e2e/dynamic-import.cy.js

@@ -0,0 +1,5 @@
+it('should work', async () => {
+  const { default: lazyModule } = await import('./lazy.js')
+
+  expect(lazyModule.hello).eq('world')
+})

system-tests/projects/webpack-preprocessor-webpack-5/cypress/e2e/lazy.js

@@ -0,0 +1 @@
+export default { hello: 'world' }

system-tests/projects/webpack-preprocessor-webpack-5/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@babel/core": "7.19.0",
+    "@babel/plugin-transform-runtime": "7.18.10",
+    "@babel/preset-env": "7.19.0",
+    "@cypress/webpack-preprocessor": "file:../../../npm/webpack-preprocessor",
+    "babel-loader": "8.2.5",
+    "webpack": "^5.74.0"
+  }
+}

system-tests/test/webpack_preprocessor_spec.ts

@@ -0,0 +1,13 @@
+import systemTests from '../lib/system-tests'
+
+describe('@cypress/webpack-preprocessor', function () {
+  systemTests.setup()
+
+  systemTests.it('with Webpack 5', {
+    project: 'webpack-preprocessor-webpack-5',
+    testingType: 'e2e',
+    spec: '**/*.cy.js',
+    browser: 'chrome',
+    expectedExitCode: 0,
+  })
+})