Cypress doesn't work with Webpack 5 #5713

ArielGueta · 2021-05-19T09:24:44Z

After upgrading to Webpack 5, we get this error:

Automatic publicPath is not supported in this browser

It seems that you need to update @cypress/webpack-preprocessor to latest version.

The text was updated successfully, but these errors were encountered:

vincentpalita · 2021-05-31T09:11:33Z

I confirm that, adding
"@cypress/webpack-preprocessor": "^5.9.0"
to the resolutions section of our package.json file fixed the issue for us.

vincentpalita · 2021-06-01T08:35:23Z

I have in fact sometime the error you mention:

Automatic publicPath is not supported in this browser

But some specs are passing and some not, will try to find out why.

markhus-aurelius · 2021-06-09T23:34:42Z

I confirm that, adding
"@cypress/webpack-preprocessor": "^5.9.0"
to the resolutions section of our package.json file fixed the issue for us.

Cypress hangs on 'tests loading' for me when I force this resolution. But at least the publicPath error is not showing, hah.

I have in fact sometime the error you mention:

Automatic publicPath is not supported in this browser

But some specs are passing and some not, will try to find out why.

Otherwise also getting the issue where some tests are fine other show the Automatic publicPath is not supported in this browser error.

Did you find a solution for this?

vincentpalita · 2021-06-14T06:57:19Z

@markhus-aurelius as of now I haven't had a chance to find why. I am guessing a library that some of our specs are depending on has a problem when webpack is requiring it.
I'll update you as soon as I find out.

ubergeoff · 2021-06-15T13:25:16Z

I had this issue where some cypress tests passed, while others failed with the error (after the ng12 upgrade):

> Automatic publicPath is not supported in this browser

I found that I was making use of tsconfig paths within my Cypress test classes:

import { SbgConstants } from '@sbg-web/common';

If I changed these references to absolute paths. Then everything started working again:

// tslint:disable-next-line: nx-enforce-module-boundaries
import { SbgConstants } from '../../../../libs/common/src/lib/constants/sbg-constants';

(Webpack 5 + Cypress) has issues with the tsconfig paths ..? No sure..?

Side note: I'm still using Cypress 6.9.1

vincentpalita · 2021-06-15T15:02:48Z

@markhus-aurelius, @ubergeoff we seem to have found a solution by removing the use of preprocessTypescript function provided by Nx and just install the 2 following dev dependencies:
"@cypress/webpack-dev-server"
"webpack-dev-server"

since cypress v4.4.0 you don't need any filePreprocessor to use Typescript to write your specs, nonetheless you will need the dependencies listed above.

@FrozenPandaz I am pinging you here because I saw this PR that was merged in April, it might be the cause of this issue: cypress-io/cypress#15839

My guess is that maybe the filePreprocessor provided by Nx could be deprecated, there was already a thread about that: #3037

Or we need to find a way to make the publicPath work when using webpack 5.

ubergeoff · 2021-06-15T15:44:12Z

Thank you @vincentpalita - yes I can confirm that after installing:

"@cypress/webpack-dev-server": "^1.3.1",

And updating my plugins/index.js file to the below also fixes this issue...

module.exports = function(on, config) {
    //on('file:preprocessor', preprocessTypescript(config));
    // `on` is used to hook into various events Cypress emits
    // `config` is the resolved Cypress config
};

markhus-aurelius · 2021-06-16T02:48:19Z

@vincentpalita Absolute legend mate, this got it working for me. Appreciate the help.

eulersson · 2021-07-22T10:23:31Z

@markhus-aurelius @vincentpalita Do you speak about React applications or Angular applications? If I do what you suggest instead of the publicPath error message I get this one (I suspect it's perhaps because I use Angular?):

Error: Webpack Compilation Error
/Users/ramon/Watchity/frontend/libs/shared/ui/src/index.ts 15:9
Module parse failed: Unexpected token (15:9)
File was processed with these loaders:
 * ../../../../Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export * from './lib/store/ui.actions';
| export * from './lib/store/ui.selectors';
> export * as fromUi from './lib/store/ui.reducer';
| // Service.
| export * from './lib/services/toast.service';
 @ /Users/ramon/Watchity/frontend/libs/shared/login/src/lib/interceptors/login.interceptor.ts 13:0-62 86:40-63 90:40-63 94:40-63
 @ /Users/ramon/Watchity/frontend/libs/shared/login/src/index.ts
 @ ./src/support/modules/login/login.commands.ts
 @ ./src/support/index.ts
    at Watching.handle [as handler] (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:172:23)
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:54:20
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:2818:7
    at done (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:111:16
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:61:14
    at /Users/ramon/Library/Caches/Cypress/7.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:45:10
    at FSReqCallback.oncomplete (fs.js:171:23)

If I install "@cypress/webpack-dev-server shouldn't I add it to my e2e project plugins/index.ts? Just as the usage suggests in https://www.npmjs.com/package/@cypress/webpack-preprocessor

paustint · 2021-09-22T13:56:26Z

I am posting here just in case anyone stumbles on this thread because of the error message, even though the cause of the error was different in my case.

After upgrading to webpack 5, my react app would not load with the error Automatic publicPath is not supported in this browser.

The issue for me was that I was referencing url in css - example background-image: url('assets/images/split-grip-vertical.png'); and apparently that causes issues with mini-css-extract-plugin (or something else) and I found this thread: https://stackoverflow.com/questions/64294706/webpack5-automatic-publicpath-is-not-supported-in-this-browser.

I fixed it by setting outputPath to an empty string in my webpack config.

Here is a simplified example:

const getWebpackConfig = require('@nrwl/react/plugins/webpack');

module.exports = (config) => {
  config = getWebpackConfig(config);
  config.output.publicPath = '';
  return config;
};

barbados-clemens · 2022-02-18T20:30:40Z

Hi there is this still an issue with the latest version of nx? if so feel free to re open 😄

github-actions · 2023-03-22T23:05:35Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

ArielGueta added the type: bug label May 19, 2021

FrozenPandaz added the scope: testing tools Issues related to Cypress / Jest / Playwright / Vitest support in Nx label May 22, 2021

eulersson mentioned this issue Jul 22, 2021

Deprecate @nrwl/cypress/plugins/preprocessor #3037

Closed

W01fw00d mentioned this issue Oct 5, 2021

Improve PROD performance W01fw00d/cooking-with-amateurs#70

Merged

6 tasks

barbados-clemens closed this as completed Feb 18, 2022

github-actions bot added the outdated label Mar 22, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress doesn't work with Webpack 5 #5713

Cypress doesn't work with Webpack 5 #5713

ArielGueta commented May 19, 2021 •

edited

Loading

vincentpalita commented May 31, 2021

vincentpalita commented Jun 1, 2021 •

edited

Loading

markhus-aurelius commented Jun 9, 2021

vincentpalita commented Jun 14, 2021

ubergeoff commented Jun 15, 2021 •

edited

Loading

vincentpalita commented Jun 15, 2021

ubergeoff commented Jun 15, 2021 •

edited

Loading

markhus-aurelius commented Jun 16, 2021

eulersson commented Jul 22, 2021 •

edited

Loading

paustint commented Sep 22, 2021

barbados-clemens commented Feb 18, 2022

github-actions bot commented Mar 22, 2023

Cypress doesn't work with Webpack 5 #5713

Cypress doesn't work with Webpack 5 #5713

Comments

ArielGueta commented May 19, 2021 • edited Loading

vincentpalita commented May 31, 2021

vincentpalita commented Jun 1, 2021 • edited Loading

markhus-aurelius commented Jun 9, 2021

vincentpalita commented Jun 14, 2021

ubergeoff commented Jun 15, 2021 • edited Loading

vincentpalita commented Jun 15, 2021

ubergeoff commented Jun 15, 2021 • edited Loading

markhus-aurelius commented Jun 16, 2021

eulersson commented Jul 22, 2021 • edited Loading

paustint commented Sep 22, 2021

barbados-clemens commented Feb 18, 2022

github-actions bot commented Mar 22, 2023

ArielGueta commented May 19, 2021 •

edited

Loading

vincentpalita commented Jun 1, 2021 •

edited

Loading

ubergeoff commented Jun 15, 2021 •

edited

Loading

ubergeoff commented Jun 15, 2021 •

edited

Loading

eulersson commented Jul 22, 2021 •

edited

Loading