Web Extension - cannot find module with parcel build, even though parcel watch works

[NathanC]

🐛 bug report

I'm building a Web Extension with TypeScript + Parcel's Web Extension Config + React.

It was all working before, but I made some changes (notably adding web accessible resources), and now I'm unable to run the content script after loading a module from the dist produced by parcel build, even though parcel watch works.

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

{
  "name": "stack-overflow-indentation",
  "version": "0.2.0",
  "description": "A browser extension that enables rich IDE-like tabbing/shift-tabbing indentation on Stack Overflow and Meta Stack Overflow.",
  "scripts": {
    "build-v3": "tsc && rimraf -rf ./dist-v3 && parcel build manifest-v3/manifest.json --dist-dir dist-v3 --config @parcel/config-webextension",
    "build-v2": "tsc && rimraf -rf ./dist-v2 && parcel build manifest-v2/manifest.json --dist-dir dist-v2 --config @parcel/config-webextension",
    "watch-v2": "rimraf -rf ./dev-dist-v2 && parcel watch manifest-v2/manifest.json --dist-dir dev-dist-v2 --config @parcel/config-webextension"
  },
  "author": "NathanC",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "@parcel/config-webextension": "^2.7.0",
    "@parcel/transformer-sass": "^2.7.0",
    "@parcel/validator-typescript": "^2.7.0",
    "@types/chrome": "^0.0.197",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "eslint": "^8.25.0",
    "parcel": "^2.7.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.8.4",
    "web-ext": "^7.3.0",
    "@types/firefox-webext-browser": "^94.0.1"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.9",
    "@mui/material": "^5.10.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

🤔 Expected Behavior

parcel build on a manifest should product a dist that can be loaded as a Firefox (manifest v2) and Chrome (manifest v3) extension, where the content script successfully runs.

😯 Current Behavior

parcel watch produces a build that can be successfully loaded in Firefox. However, when I run parcel build instead, the content script is failing to find a module.

Error: Cannot find module 'bJuUF'

🔦 Context

I previously uploaded the extension I built the Firefox Add-On store here. I am attempting a bug fix and a feature addition which would bump the version from 0.1 => 0.2.

I've loved working with this Web Extension config so far (this is the first time I've used Parcel), but I don't understand it quite that well yet. I have no idea what caused my previously working flow to break, except for potentially the addition of web accessible resources

💻 Code Sample

The full repo can be found here. The commit that introduced the bug, can be found here.

🌍 Your Environment

Software	Version(s)
Parcel	^2.7.0
Node
npm/Yarn	8.13.2
Operating System	Window 11

Questions

How can I get you more useful error messages? I don't know how to interpret the Error: Cannot find module 'bJuUF' in a useful way, i.e., figuring out what module that is or what part it's supposed to be loading.

[clentfort]

I ran into a similar problem. Here is a minimal reproduction for the error I'm seeing. My workaround so far was to start parcel with --no-hmr and distribute the generated dist/.

[NathanC]

@clentfort Thanks for your response, but I'm not quite sure how to leverage the --no-hmr flag. I'm using npm, unlike your reproduction where you use yarn (I know very little about yarn)

This is what I have currently:

 "build-v2": "tsc && rimraf -rf ./dist-v2 && parcel build manifest-v2/manifest.json --dist-dir dist-v2 --config @parcel/config-webextension"

These are all the variations I've tried:

 # error: unknown option '--no-hmr'
 "build-v2": "tsc && rimraf -rf ./dist-v2 && parcel build manifest-v2/manifest.json --dist-dir dist-v2 --config @parcel/config-webextension --no-hmr"
 
 # error: unknown option '--no-hmr'
"build-v2": "tsc && rimraf -rf ./dist-v2 && parcel build --no-hmr manifest-v2/manifest.json --dist-dir dist-v2 --config @parcel/config-webextension"

# unknown: Entry C:\Users\[redacted]\Programming\[repo name]\build does not exist
"build-v2": "tsc && rimraf -rf ./dist-v2 && parcel --no-hmr build manifest-v2/manifest.json --dist-dir dist-v2 --config @parcel/config-webextension"

# Doesn't seem to have any effect, issue still prevent after build
npm run build-v2 --no-hmr

What am I doing wrong here?

Also, any idea what is causing the underlying issue? It was working completely fine until my latest commit, where the only change that seems relevant is I added web accessible resources in the manifest.

[NathanC]

@clentfort Ah, were you only applying that to your parcel watch invocation? parcel watch is working for me, parcel build is not. If I use the dist produced by parcel watch in firefox, it loads correctly (but presumably is bundled with some irrelevant hotloading code)

[NathanC]

@clentfort ooooh, you use watch instead of build, and --no-hmr when using watch as the build command. I get it now. It works! Although it waits for a keyboard interrupt afterwards (since it's watching the files). Do you know how to automatically stop that after watch produces the bundle, or do you just manually cut it off after dist is produced?

For anyone reading this, this workaround does seem to work-- but this issue should remain open, as this is a hacky workaround and there's clearly a bug here.

[NathanC]

Ooph, the build size is significantly larger, I have a 12mb js file (I'm using react) when I use parcel watch, wheras with parcel build it was 2 1.5 mb files iirc. Any way to enforce watch to bundle better? Maybe it's not tree shaking?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[101arrowz]

This is probably related to #8071.

[bonanaaaaaa]

i found that the code splitting feature might cause a bug because it worked after i edited a generated manifest.json manually by add the missing content script and reorder it

before (generate from parcel)

"content_scripts": [
    {
        "js": [
            "content.b96b6342.js"
        ],
        "css": [
            "styles.a79a9a4d.css"
        ],
        "matches": [
            "https://example.com/*"
        ],
        "run_at": "document_start"
    }
],

after (it works) 🎉

"content_scripts": [
    {
        "js": [
            "content.b96b6342.js"
        ],
        "css": [
            "styles.a79a9a4d.css",
            "styles.a79a9a4d.css"
        ],
        "matches": [
            "https://chat.line.biz/*"
        ],
        "run_at": "document_start"
    }
],

[FlavienBusseuil]

@bonanaaaaaa I fall into the same issue and your workaround worked for me ! 🎉

I also tried the last version of Parcel that fixed the problem but the final bundle is really bigger (content script is 1.1 Mo instead of 356 ko for the total size of the 3 content scripts) 😬