5.4.0 Regression: Webpack Compilation Error when browserslist is present in project root

[carlos426]

Current behavior

I get the error when trying to run tests through the Runner:

Error: Webpack Compilation Error
./cypress/integration/main/login-page.test.js
Module build failed (from C:/Users/user/AppData/Local/Cypress/Cache/5.4.0/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):
C:\Users\user\IdeaProjects\admin\project\project-ui\browserslist:1
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
^

SyntaxError: Invalid or unexpected token

Desired behavior

The error does not occur.

Test code to reproduce

Cypress update to version 5.4.0

Additionally, what I did to fix the problem:

• I deleted the cache from the location: C:\Users\user\AppData\Local\Cypress\Cache
• Deleted from the .node_modules directory the directory from cypress and babel-loader.
• I reinstalled [email protected]

Versions

Windows 10 64bit
Browser: Chrome 86, FF 81, Electron 85, Edge86

[prodehghan]

The problem can be worked around by removing the "browserslist" file and reopening Cypress. But this is not a fix. Don't know how webpack tries to compile the "browserslist" file!

[gerardl123]

Having the same issue. I've also worked around it by renaming the browserslists file to .browserslistrc
Not sure what side effects this might cause though but I was no longer getting the error.

[chadbrewbaker]

I really wish this would emit line numbers/stacktrace. Using eBPF to spy on what is opening the file and getting a stack trace is a bit of a yak shave.

DEBUG=cypress:webpack cypress run

Confirmed gerardl123's workaround works:

git mv browserlists ./browserlistsrc

[carlos426]

Confirmed gerardl123's workaround works:

git mv browserlists ./browserlistsrc

I cannot apply this solution.
Because if I implement them, the application is not building during the start.
An unhandled exception occurred: Cannot find module 'browserslist'

[gerardl123]

I guess it would depend on the application. Mine is an Angular application and I guess the webpack configuration is ok with either browserslist or .browserslistrc file.

[carlos426]

My application is built in angular version 9

Module build failed (from C:/Users/user/AppData/Local/Cypress/Cache/5.4.0/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):
C:\Users\user\IdeaProjects\project\project-ui\browserslist:1
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
^

SyntaxError: Invalid or unexpected token
    at Watching.handle [as handler] (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:171:23)
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._done (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:98:28)
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:73:19
    at Compiler.emitRecords (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:54:20
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:464:33
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\graceful-fs\graceful-fs.js:111:16
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:61:14
    at C:\Users\user\AppData\Local\Cypress\Cache\5.4.0\Cypress\resources\app\packages\server\node_modules\graceful-fs\graceful-fs.js:45:10
    at FSReqCallback.oncomplete (fs.js:159:23) +11ms
Webpack Compilation Error

[jennifer-shehane]

Can anyone provide a repo that shows this problem?

[prodehghan]

@jennifer-shehane Here is a sample project that fails with the mentioned error:
https://github.com/mdunicorn/cypress-issue-8864

It is just an empty Angular 9 project, with [email protected] added.

[Mrgove10]

Same issue here on angular10. had absolutely no issues with 5.3.0

[carlos426]

@jennifer-shehane I confirm what @mdunicorn wrote an empty Angular 9 project is enough.

[vrknetha]

I have fixed this issue by moving the browser list to package.json

[carlos426]

@vrknetha

I have fixed this issue by moving the browser list to package.json

You mean "cypress:run": "cypress run --browser chrome" in package.json ?

[vrknetha]

If you are on an Angular project. we give the list of browsers to support which is a file called 'browserlist'. That is the file causing the issue here. So, rather than as a file, we can give those options in package.json like this

"browserslist": [
		"> 0.5%",
		"last 2 versions",
		"Firefox ESR",
		"not dead",
		"not IE 9-11"
	],

[pablosangueza]

Is there any solution for this issue? I'm having the same problem with cypress 5.5.0. I'm guessing that only happens with the las version of cypress because I have another project with 3.8.3 and it work fine.

[jennifer-shehane]

I can recreate the issue from the provided repo: https://github.com/mdunicorn/cypress-issue-8864

This is a regression in 5.4.0 and was introduced in this PR: #8826

Workaround

You can downgrade to 5.3.0, or follow the directions below.

• Move the browserlist definitions into your package.json.
• Delete the browserslist file at the root of the project.

example package.json

{
  "scripts": {...},
  "dependencies": {...},
  "devDependencies": {...},
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead",
    "not IE 9-11"
  ]
}

[bjowes]

@jennifer-shehane - please add the easiest workaround, rename browserslist to .browserslistrc. According to the Angular docs, this renaming is actually applied when performing an upgrade to Angular 10, so this is the preferred filename from Angular.

[EnriqueKhai]

TLDR: Just delete the browserslist file.

If you take a look inside the browserslist file, there is a link to an external website. There, it states that Cypress will, upon running, try to locate an explicit definition of browserslist from the user. It will try to locate said definition from a variety of sources, failing which it will fall back on a default specification.

                > 0.5%,
                last 2 versions,
                Firefox ESR,
                not dead,
                not IE 9-11

My guess is that this browserslist file we have (that was located by Cypress) is invalid because its format is incorrect. This I inferred.

My fix to delete this browserslist file hinges on the fact that Cypress will fall back on its own set of (valid) specifications if it fails to obtain a definition from the user. It appears to work.

[inorganik]

Deleting browserslist file is a bad idea, it's used by angular to determine which browsers you want to support, for differential loading, and by other packages as well such as CSS auto-prefixer.

Better to rename it to .browserslistrc as others have mentioned.

[cypress-bot]

The code for this is done in cypress-io/cypress#14754, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 6.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v6.4.0, please open a new issue.