E2E test fails with webpack and certain .browserslistrc entries

MikeMcC399 commented 1 year ago

This issue follows on from https://github.com/cypress-io/cypress-documentation/issues/5530.

Current behavior

If .browserslistrc from the npm module browserslist is configured with the entry

chrome >= 116

together with a project using webpack, then Cypress E2E testing fails to run and outputs the error message:

Error: For the selected environment is no default script chunk format available: JSONP Array push can be chosen when 'document' or 'importScripts' is available. CommonJs exports can be chosen when 'require' or node builtins are available. Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.

If the .browserslistrc entry is replaced by

last 2 chrome versions

then no error occurs.

Desired behavior

If .browserslistrc from the npm module browserslist is correctly configured, for instance with the entry chrome >= 116, it should not prevent Cypress from successfully running an E2E test.

Test code to reproduce

git clone --branch browserslist https://github.com/MikeMcC399/github-action
cd github-action/examples/webpack
npm ci
npm start

then in a separate terminal window, execute

npm test

Cypress Version

First reported on 13.3.0 Reproducible also on: 13.15.2

Node version

~~v20.14.0~~ v20.15.0

Operating System

Ubuntu 22.04.3 LTS and Windows 11

Debug Logs

2023-10-11T13:22:21.625Z cypress:lifecycle:ProjectConfigManager promise rejected for id inv1 ':' Error: For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.
    at /home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/config/defaults.js:915:11
    at F (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/config/defaults.js:94:15)
    at applyOutputDefaults (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/config/defaults.js:896:2)
    at applyWebpackOptionsDefaults (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/config/defaults.js:229:2)
    at createCompiler (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/webpack.js:80:2)
    at create (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/webpack.js:143:16)
    at webpack (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/webpack.js:167:32)
    at f (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/webpack/lib/index.js:72:16)
    at /home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:180:46
    at Object.handler (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-batteries-included-preprocessor/index.js:213:40)
    at invoke (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:183:18)
    at /home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Promise.attempt.Promise.try (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
    at Object.wrap (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/preprocessor.js:47:8)
    at RunPlugins.execute (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:157:29)
    at EventEmitter.<anonymous> (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:56:12)
    at EventEmitter.emit (node:events:514:28)
    at process.<anonymous> (/home/mike/.cache/Cypress/13.3.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:514:28)
    at emit (node:internal/child_process:951:14)

debug_28029.zip

Other

Versions used

$ npm ls

├── cypress@13.3.2
├── webpack-cli@5.1.4
├── webpack-dev-server@4.15.1
└── webpack@5.89.0

browserslist documentation

Allowed full list for browserlist

MikeMcC399 commented 1 year ago

Similar issue

https://stackoverflow.com/questions/69443755/error-when-running-webpack-script-for-simple-project

MadelineMcN commented 10 months ago

Hello. I also had this issue, but it is resolved for me in v13.6.3 😎

MikeMcC399 commented 10 months ago

@MadelineMcN

Hello. I also had this issue, but it is resolved for me in v13.6.3 😎

Thanks for your feedback. I don't know what the root cause is, however the repro steps I listed in the original post continue to cause the error to occur in Cypress 13.6.3.

MikeMcC399 commented 4 months ago

I can't reproduce this issue anymore. Perhaps it was fixed in webpack?

Node.js v20.15.0

├── cypress@13.13.0
├── webpack-cli@5.1.4
├── webpack-dev-server@5.0.4
└── webpack@5.92.1

mreljin commented 3 months ago

For anyone still experiencing this problem, what solved it for us was moving the browserslist config from .browserslistrc to package.json. I did not dig too deeply into the problem, it might be something specific to our configuration.

What I've found is that it did not work with multiple environments specified in .browserslistrc (just an example below):

[modern]
last 2 versions

[legacy]
last 2 versions

While this worked:

last 2 versions

Edit - versions affected:

"webpack": "^5.94.0",
"cypress": "13.14.0",
"browserslist": "^4.21.5",

MikeMcC399 commented 3 months ago

@mreljin

Thanks for your update! I can reproduce your issue. I don't know if this is actually a Cypress issue or not. I have updated the repro with your failing example:

git clone --branch browserslist https://github.com/MikeMcC399/github-action
cd github-action/examples/webpack
npm ci
npm start

I tried with the multiple environment example from the docs https://github.com/browserslist/browserslist?tab=readme-ov-file#configuring-for-different-environments and it did not fail, so I guess that the root cause may be difficult to track down:

.browserslistrc

[production]
> 1%
not dead

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

cypress-io / cypress