Parcel build fails on Chrome < 86 due to dynamic import and chunking issues

[irborsan]

🐛 bug report

Parcel builds do not work properly on Chrome versions older than 86, causing errors with dynamic imports and chunking. From 86 and up, the chunking issues are gone.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc does not exist. The project is part of a monorepo that uses nx to do builds, this is the relevant part of package.json and the code that's ultimately run:

"targets": {
    "default": {
      "context": "browser",
      "distDir": "./dist",
      "optimize": true
    }
  },
  "scripts": {
    "build": "parcel build src/index.html src/wrapper-popup-helper/index.html --target=default",
    "postbuild": "node ./postbuild.js",
    "serve": "parcel serve src/index.html src/wrapper-popup-helper/index.html --port=30000 --https",
    "fix": "eslint --fix **/*.ts --no-error-on-unmatched-pattern"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": "commitizen.config.js"
    }
  },
  "browserslist": [
    "Chrome > 50",
    "ios_saf > 15"
  ],
  "dependencies": {
    "lit": "^2.4.0",
    "semver-compare": "^1.0.0",
    "zod": "^3.21.4"
  },
  "msw": {
    "workerDirectory": "dist"
  },
  "devDependencies": {
    "@types/node": "^18.15.3",
    "@types/semver-compare": "^1.0.1"
  }

🤔 Expected Behavior

I would expect Parcel to build the project and for it to work on every Chrome version > 50. I would also expect dynamic imports and chunking to work properly on older browser versions.

😯 Current Behavior

I'm experiencing issues with retrieving consecutive chunks during the app's loading process. I'm utilizing dynamic imports, and when I check the Network tab for the files being requested, I see chunks that request other chunks, which then result in errors marked as undefined in the console.

The first version of Chrome where chunking works correctly is Chrome 86. If I switch to an earlier version, such as Chrome 85, I encounter an Uncaught Error: Cannot find module message in the browser's console (a screenshot is provided below). The file in question (index.f62b739b.js) appears to be downloaded successfully, showing a 200 status code in the Network tab, and there are no additional error messages. Here's a link to a Chrome blog post detailing the changes between Chrome 85 and Chrome 86; at first glance, there doesn't seem to be anything that would explain the sudden improvement in chunking behavior with Chrome 86.

💁 Possible Solution

I tried updating the configuration minBundles, minBundleSize, maxParallelRequests to the example here and had no impact, it would chunk all the same.

🔦 Context

This is an authentication app that needs to support older versions of Chrome (ideally starting from Chrome 50, though supporting Chrome 68 and above is a strict requirement). I found out about this issue while checking for Android 9 compatibility. The app just breaks, showing no content on the page at all. This prompted me to also look into the web version, where I discovered the chunking issues, which led me to opening this issue here.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	2.10.1
Node	18.15.3
npm/Yarn	9.8.1
Operating System	macOS

[mischnic]

There's not much we can do unless you can share a reproduction or you can figure out what is causing this problem.