ChunkLoadError - how to figure out root cause or fix the problem?

[dylang]

Hi!

In Jenkins, a bunch of Playwright browser tests fail with ChunkLoadError at the first React.Lazy call.

Error Message

browser.error ChunkLoadError: Loading chunk bookmarks-menu failed.
(missing: http://localhost:9000/bookmarks-menu.chunk.js)
  at __webpack_require__.f.j (http://localhost:9000/application.js:10948:16)
  at http://localhost:9000/application.js:10728:30
  at Array.reduce (<anonymous>)
  at __webpack_require__.e (http://localhost:9000/application.js:10727:38)
  at eval (webpack://@company/project/./web/application/src/MainNavigation.jsx?9bc8:135:105)
  at lazyInitializer (webpack://@company/project/./node_modules/react/cjs/react.development.js?c6b1:1358:20)
  at mountLazyComponent (webpack://@company/project/./node_modules/react-dom/cjs/react-dom.development.js?f4dd:19939:19)
  at beginWork (webpack://@company/project/./node_modules/react-dom/cjs/react-dom.development.js?f4dd:21588:16)
  at beginWork$1 (webpack://@company/project/./node_modules/react-dom/cjs/react-dom.development.js?f4dd:27421:14)
  at performUnitOfWork (webpack://@company/project/./node_modules/react-dom/cjs/react-dom.development.js?f4dd:26555:12)
console.error The above error occurred in one of your React components:

  at Lazy
  at Suspense
  at div
  at P (webpack://@company/project/./node_modules/styled-components/dist/styled-components.browser.esm.js?b32b:30:19660)
  at div
  at P (webpack://@company/project/./node_modules/styled-components/dist/styled-components.browser.esm.js?b32b:30:19660)
  at section
  at P (webpack://@company/project/./node_modules/styled-components/dist/styled-components.browser.esm.js?b32b:30:19660)
  at Le (webpack://@company/project/./node_modules/styled-components/dist/styled-components.browser.esm.js?b32b:30:17338)

That chunk that it was trying to load is definitely there. The server is not returning a 404.

We not see these errors when running the same tests on our laptops or when switching back to Webpack.

I've been patiently testing every rspack release since January hoping it would just get magically fixed by the team, but now I'm wondering if there's something I'm doing wrong.

Any suggestions on config changes or how I can figure out why we are getting this error?

Thank you!

config, fully computed right before it's passed to rspack

{
  "entry": {
    "application": [
      "intersection-observer",
      "abortcontroller-polyfill/dist/abortcontroller-polyfill-only",
      "globalthis/polyfill",
      "/project/build/test-builds/application.bootstrap.jsx"
    ], // there are many more here
  },
  "context": "/project",
  "mode": "development",
  "resolve": {
    "extensions": [
      ".wasm",
      ".mjs",
      ".js",
      ".jsx",
      ".ts",
      ".tsx",
      ".json",
      ".cjs",
      ".ejs"
    ],
    "alias": {
      "moment": "/project/node_modules/moment/moment.js",
      "@swc/helpers": "/project/node_modules/@swc/helpers"
    },
    "fallback": {
      "fs": false,
      "module": false,
      "net": false,
      "assert": false,
      "path": false
    }
  },
  "target": [
    "web",
    "es2022"
  ],
  "output": {
    "filename": "[name].js",
    "chunkFilename": "[name].chunk.js",
    "path": "/project/build/test-builds",
    "publicPath": "/",
    "globalObject": "self"
  },
  "optimization": {
    "minimize": false
  },
  "resolveLoader": {
    "extensions": [
      ".jsx",
      ".js",
      ".tsx",
      ".ts",
      ".mjs",
      ".cjs"
    ]
  },
  "devtool": "cheap-module-source-map",
  "plugins": [
    {
      "name": "DefinePlugin",
      "affectedHooks": "compilation",
      "_options": {
        "process.env.CDN_HOSTNAME": "\"cdn.company.com\"",
        "process.env.CRT_VERSION": "\"rspack-poc\"",
        "process.env.DISABLE_ANIMATION": "false",
        "process.env.NODE_ENV": "\"development\"",
        "__DEV__": "\"development\""
      }
    },
    {
      "previousMessage": ""
    },
    {
      "isBuildSuccessful": false
    },
    {
      "log": {}
    },
    {
      "name": "DefinePlugin",
      "affectedHooks": "compilation",
      "_options": {
        "process.env.grafanaCollectUrl": "\"/mock-grafana/collect\""
      }
    }
  ],
  "module": {
    "rules": [
      {
        "test": {},
        "resolve": {
          "fullySpecified": false
        }
      },
      {
        "test": {},
        "loader": "builtin:swc-loader",
        "options": {
          "parseMap": true,
          "sourceMap": true,
          "sourceMaps": true,
          "isModule": "unknown",
          "env": {
            "targets": {
              "chrome": "123"
            },
            "coreJs": "3.37.1",
            "exclude": [
              "transform-async-to-generator",
              "transform-regenerator",
              "arrow-functions"
            ]
          },
          "jsc": {
            "parser": {
              "syntax": "typescript",
              "tsx": true
            },
            "transform": {
              "react": {
                "runtime": "automatic",
                "useBuiltins": true,
                "development": true,
                "refresh": false
              }
            },
            "externalHelpers": true,
            "experimental": {
              "cacheRoot": "/project/.cache/swc",
              "plugins": [
                [
                  "@swc/plugin-emotion",
                  {}
                ],
                [
                  "/project/node_modules/@swc/plugin-styled-components/swc_plugin_styled_components.wasm",
                  {
                    "pure": false,
                    "minify": false,
                    "transpileTemplateLiterals": false
                  }
                ]
              ]
            }
          }
        }
      }
    ]
  },
  "snapshot": {},
  "stats": {
    "colors": true
  },
  "infrastructureLogging": {
    "level": "warn"
  },
  "experiments": {
    "asyncWebAssembly": true
  }
}