Component testing fails to load WebPack chunks randomly causing test failures

[3rd-Eden]

Current behavior

• The test runner randomly fails to load WebPack chunks.
• It's different chunks that fail to load.
• The WebPack build is sucessfull

Full console output

> cypress run-ct --browser chrome

ℹ ｢wds｣: Project is running at http://localhost:59985/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /__cypress/src
ℹ ｢wds｣: Content not from webpack is served from /[redacted]/packages/configs/cypress-config

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    7.2.0                                                                              │
  │ Browser:    Chrome 90                                                                          │
  │ Specs:      1 found (test/mount.cypressed.js)                                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  test/mount.cypressed.js                                                         (1 of 1)
[BABEL] Note: The code generator has deoptimised the styling of /[redacted]/packages/configs/cypress-config/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: Hash: 89717961e837d6c16744
Version: webpack 4.46.0
Time: 6569ms
Built at: 06/05/2021 18:03:30
                   Asset       Size          Chunks             Chunk Names
             0.bundle.js   16.8 KiB               0  [emitted]
             1.bundle.js   1.16 MiB               1  [emitted]
             2.bundle.js   8.46 KiB               2  [emitted]
              index.html  339 bytes                  [emitted]
                 main.js   11.4 KiB            main  [emitted]  main
        spec-0.bundle.js   50.4 KiB          spec-0  [emitted]  spec-0
vendors~spec-0.bundle.js    968 KiB  vendors~spec-0  [emitted]  vendors~spec-0
Entrypoint main = main.js
[./commands.js] 388 bytes {2} [built]
[./cypress/support/commands.js] 867 bytes {2} [built]
[./cypress/support/index.js] 667 bytes {2} [built]
[./mount/index.js] 4.87 KiB {spec-0} [built]
[./node_modules/@babel/runtime/helpers/classCallCheck.js] 274 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/createClass.js] 674 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/getPrototypeOf.js] 425 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/inherits.js] 586 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js] 447 bytes {0} [built]
[./node_modules/@cypress/webpack-dev-server/dist/aut-runner.js] 545 bytes {main} [built]
[./node_modules/@cypress/webpack-dev-server/dist/browser.js] 73 bytes {main} [built]
[./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js] 933 bytes {main} [built]
[./node_modules/assume/index.js] 31.9 KiB {vendors~spec-0} [built]
[./node_modules/react/index.js] 189 bytes {vendors~spec-0} [built]
[./test/mount.cypressed.js] 3.17 KiB {spec-0} [built]
    + 511 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  4.86 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../../node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@cypress/webpack-dev-server/index-template.html] /[redacted]/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@cypress/webpack-dev-server/index-template.html 544 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.


  1) An uncaught error was detected outside of a test

  0 passing (1s)
  1 failing

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

  > Loading chunk vendors~spec-0 failed.
(error: http://localhost:59985/__cypress/src/vendors~spec-0.bundle.js)

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 Function.requireEnsure [as e] (http://localhost:59985/__cypress/src/main.js:106:26)
      at load (http://localhost:59985/__cypress/src/main.js:262:100)
      at http://localhost:59985/__cypress/runner/cypress_runner.js:159792:45
      at tryCatcher (http://localhost:59985/__cypress/runner/cypress_runner.js:24940:23)
      at Object.gotValue (http://localhost:59985/__cypress/runner/cypress_runner.js:24082:18)
      at Object.gotAccum (http://localhost:59985/__cypress/runner/cypress_runner.js:24071:25)
      at Object.tryCatcher (http://localhost:59985/__cypress/runner/cypress_runner.js:24940:23)
      at Promise._settlePromiseFromHandler (http://localhost:59985/__cypress/runner/cypress_runner.js:22875:31)
      at Promise._settlePromise (http://localhost:59985/__cypress/runner/cypress_runner.js:22932:18)
      at Promise._settlePromise0 (http://localhost:59985/__cypress/runner/cypress_runner.js:22977:10)

To give an example of different failures:

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

  > Loading chunk 0 failed.
(error: http://localhost:56315/__cypress/src/0.bundle.js)

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 Function.requireEnsure [as e] (http://localhost:56315/__cypress/src/main.js:106:26)
      at loadSupportFile (http://localhost:56315/__cypress/src/main.js:259:79)
      at http://localhost:56315/__cypress/runner/cypress_runner.js:159792:45
      at tryCatcher (http://localhost:56315/__cypress/runner/cypress_runner.js:24940:23)
      at Object.gotValue (http://localhost:56315/__cypress/runner/cypress_runner.js:24082:18)
      at Object.gotAccum (http://localhost:56315/__cypress/runner/cypress_runner.js:24071:25)
      at Object.tryCatcher (http://localhost:56315/__cypress/runner/cypress_runner.js:24940:23)
      at Promise._settlePromiseFromHandler (http://localhost:56315/__cypress/runner/cypress_runner.js:22875:31)
      at Promise._settlePromise (http://localhost:56315/__cypress/runner/cypress_runner.js:22932:18)
      at Promise._settlePromiseCtx (http://localhost:56315/__cypress/runner/cypress_runner.js:22969:10)

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

  > Loading chunk vendors~spec-0 failed.
(error: http://localhost:57422/__cypress/src/vendors~spec-0.bundle.js)

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 Function.requireEnsure [as e] (http://localhost:57422/__cypress/src/main.js:106:26)
      at load (http://localhost:57422/__cypress/src/main.js:262:100)
      at http://localhost:57422/__cypress/runner/cypress_runner.js:159792:45
      at tryCatcher (http://localhost:57422/__cypress/runner/cypress_runner.js:24940:23)
      at Object.gotValue (http://localhost:57422/__cypress/runner/cypress_runner.js:24082:18)
      at Object.gotAccum (http://localhost:57422/__cypress/runner/cypress_runner.js:24071:25)
      at Object.tryCatcher (http://localhost:57422/__cypress/runner/cypress_runner.js:24940:23)
      at Promise._settlePromiseFromHandler (http://localhost:57422/__cypress/runner/cypress_runner.js:22875:31)
      at Promise._settlePromise (http://localhost:57422/__cypress/runner/cypress_runner.js:22932:18)
      at Promise._settlePromise0 (http://localhost:57422/__cypress/runner/cypress_runner.js:22977:10)

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

  > Loading chunk 0 failed.
(error: http://localhost:57530/__cypress/src/0.bundle.js)

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 Function.requireEnsure [as e] (http://localhost:57530/__cypress/src/main.js:106:26)
      at loadSupportFile (http://localhost:57530/__cypress/src/main.js:259:79)
      at http://localhost:57530/__cypress/runner/cypress_runner.js:159792:45
      at tryCatcher (http://localhost:57530/__cypress/runner/cypress_runner.js:24940:23)
      at Object.gotValue (http://localhost:57530/__cypress/runner/cypress_runner.js:24082:18)
      at Object.gotAccum (http://localhost:57530/__cypress/runner/cypress_runner.js:24071:25)
      at Object.tryCatcher (http://localhost:57530/__cypress/runner/cypress_runner.js:24940:23)
      at Promise._settlePromiseFromHandler (http://localhost:57530/__cypress/runner/cypress_runner.js:22875:31)
      at Promise._settlePromise (http://localhost:57530/__cypress/runner/cypress_runner.js:22932:18)
      at Promise._settlePromiseCtx (http://localhost:57530/__cypress/runner/cypress_runner.js:22969:10)

Desired behavior

Test should run without any chunk failures.

Test code to reproduce

The issue it self is not consistently reproducible, it happens randomly without any indication of build failures.

Versions

Packages:
-cypress: ^7.2.0
-@cypress/react: ^5.4.2
-@cypress/webpack-dev-server: ^1.1.6

Environment:
-Node.js: v12.9.0
-NPM: 6.10.2

[rockindahizzy]

Try updating to the latest version of Cypress. If you are still experiencing issues, feel free to reopen.

[FelipeLahti]

I'm seeing this same error in cypress 13.1.0...

[piotrpalek]

same here, seeing the same with 13.3.2, I even tried to ignore those errors using the on('fail') and on('uncaught:exception') handlers, but I think these errors can't be handled there :\

[tomaszczura]

Same for me - on cypress 13.6.1

[ryanolson-aumni]

Can we re-open this? I'm getting this issue on the latest Cypress 13.6.1.

[jordanpowell88]

@ryanolson-aumni can you provide a reproducible example?

[tomaszczura]

The problem is that it is not easy to reproduce on a specific tests. Sometimes specs just fail, even if there were no changes, and pass on the next run

[nathanloisel]

Same here, it happens randomly and only on CircleCI (orb: cypress-io/[email protected], docker image: cypress/browsers:node18.12.0-chrome107, cypress version: 13.6.2). I haven't found a way to reproduce it consistently for now.
cypress config:

export default defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
      webpackConfig: {
        resolve: {
          plugins: [
            new TsconfigPathsPlugin({
              configFile: './tsconfig.json',
            }),
          ],
        },
      },
    }
  }
});

[airhorns]

I'm also seeing this on cypress v13.5.1 running on GCP VMs using buildkite. I also haven't found a way to reproduce it consistently. As a start though, perhaps we can gather more data by turning on more verbose webpack or cypress logs to figure out what is actually failing to load?

Some other questions for the crowd:

• what webpack plugins are you using
• are you using react with react-refresh?
• what kind of fail rate are you seeing?

[jennifer-shehane]

Hi, this is an error that we're currently investigating. It seems that it's been possible for this error to occur over the years, but it's much more prevelant since 12.17.4 when we upgraded to Webpack 5. We're investigating a fix - and tracking this within this issue. #28644

I'll close this issue as a duplicate and encourage you to follow the other issue for updates.