webpack v5 error when module contains dynamic import: "Automatic publicPath is not supported in this browser"

Current behavior

When using webpack v5 and a test contains a dynamic import (or imports a module that contains a dynamic import) the test will fail with the following error: Automatic publicPath is not supported in this browser.

  Running:  example.test.js                                                                 (1 of 1)


  1) An uncaught error was detected outside of a test

  0 passing (214ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     Error: The following error originated from your test code, not from Cypress.

  > Automatic publicPath is not supported in this browser

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
      at eval (http://localhost:61013/__cypress/tests?p=cypress/integration/example.test.js:155:34)
      at eval (http://localhost:61013/__cypress/tests?p=cypress/integration/example.test.js:158:13)
      at eval (http://localhost:61013/__cypress/tests?p=cypress/integration/example.test.js:261:12)
      at eval (<anonymous>)

Desired behavior

No error.

Test code to reproduce

Full reduced test case: https://github.com/OliverJAsh/cypress-webpack-5-public-path-error

This might seem like a contrived example because I have reduced it down from a much larger use case.

cypress/integration/lazy.js:

export const a = 1;

cypress/integration/example.test.js:

() => import('./lazy');

describe("foo", () => {
    it("works", () => {});
});

cypress/plugins/index.js:

const webpackPreprocessor = require("@cypress/webpack-preprocessor");

module.exports = (on, config) => {
    on(
        "file:preprocessor",
        webpackPreprocessor({
            webpackOptions: {},
        })
    );
};

cypress.json:

{}

package.json:

{
  "dependencies": {
    "@cypress/webpack-preprocessor": "^5.9.1",
    "cypress": "^8.5.0",
    "webpack": "^5.58.1"
  }
}

Cypress Version

8.5.0

Other

I was able to workaround the error by setting publicPath: '' inside of here:

https://github.com/cypress-io/cypress/blob/2c6cd9e09923c853ad96df3efc3496e27a7c1b3e/npm/webpack-preprocessor/index.ts#L204

I’m not really sure I understand why this issue happens nor how this fixes the issue, but FWIW this fix was recommended here: https://stackoverflow.com/questions/64294706/webpack5-automatic-publicpath-is-not-supported-in-this-browser?rq=1.

The issue does not reproduce when using webpack v4.

[shahzaibkhalid]

Is there any update on this? Seems like it’s breaking even when I’m not using mini-css-extract-plugin.

[NiklasPor]

@Circle6 copying this over from another issue. Add the following code into your plugins/index.js file

  const publicPath = ' ';
  let outputOptions;
  Object.defineProperty(webpackOptions, 'output', {
    get: () => {
      return { ...outputOptions, publicPath };
    },
    set: function (x) {
      outputOptions = x;
    },
  });

My complete plugins/index.js config file looks like this (Angular + Nx):

import { dynamicImport } from 'tsimportlib';

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = async (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  const linkerPlugin = await dynamicImport('@angular/compiler-cli/linker/babel', module);
  const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
  const webpackOptions = webpackPreprocessor.defaultOptions.webpackOptions;

  webpackOptions.module.rules.unshift({
    test: /\.mjs$/,
    loader: 'babel-loader',
    options: {
      compact: false,
      plugins: [linkerPlugin.default],
    },
    resolve: {
      fullySpecified: false,
    },
  });

  const publicPath = ' ';
  let outputOptions;
  Object.defineProperty(webpackOptions, 'output', {
    get: () => {
      return { ...outputOptions, publicPath };
    },
    set: function (x) {
      outputOptions = x;
    },
  });

  on(
    'file:preprocessor',
    webpackPreprocessor({
      webpackOptions: webpackOptions,
      typescript: require.resolve('typescript'),
    })
  );

  return config;
};