parcel: Parcel WebExtension fails to bundle modules under some conditions (build + mv2, or mv3 & --no-scope-hoist)
🐛 bug report
Under some conditions/configurations Parcel fails to package dependecies into bundles and fails in runtime.
Here is a set of conditions and results I’ve discovered so far (see configs below for price command definitions)
- Things work for both manifest types in
watchmode (https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-background-mv2-watch-js) - Manifest v3 without
--no-scope-hoistproduces working build (https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-background-mv3-scope-hoist-js) - Manifest v3 with
--no-scope-hoistseems to produce a working backrgound script, but not content script- broken content script: https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-content-mv3-no- scope-hoist-js
- background script: https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-background-mv3-no-scope-hoist-js
- Manifest v2 is broken regardless of Scope Hoist (https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-background-mv2-js )
- (probably unrelated) if I were to remove the
--no-content-hashfrom the build commands - I start hitting #4145
🎛 Configuration (.babelrc, package.json, cli command)
.parcelrc
{
"extends": "@parcel/config-webextension",
"validators": {
"*.{ts,tsx}": [
"@parcel/validator-typescript"
]
}
}
package.json parts
"watch": "parcel watch source/mv2/manifest.json --dist-dir build/dev --no-cache",
"build:chrome": "parcel build source/mv3/manifest.json --no-content-hash --no-source-maps --dist-dir build/chrome --no-cache --detailed-report 0",
"build:firefox": "parcel build source/mv2/manifest.json --no-content-hash --no-source-maps --dist-dir build/firefox --no-cache --detailed-report 0",
🤔 Expected Behavior
When I run either of the build commands above - all the dependencies are bundled
😯 Current Behavior
Some (all?) dependencies are missing from the bundle and the extension fails at load time with the error like:
Uncaught Error: Cannot find module 'lbnQL'
at parcelRequire (background.c6210b5c.js:15:15)
at background.c6210b5c.js:19:57
at background.c6210b5c.js:33:3
🔦 Context
Building https://github.com/transclude-me/extension
I’ve noticed this problem after migrating to Parcel 2.5.0 from 2.3.2. One noteable change that accompanied that is having to use 2 manifests so both FF and Chrome can be supported. So my directory stracture is as follows now
src/
mv2/manifest.json
mv3/manifest.json
And code in manifest points to files up level (e.g. "service_worker": "../background.ts",).
I’ve tried reverting to src/manifest.json structure in case this was relevant, but it didn’t make the difference.
I’ve also tried adding the following in package.json, in case it got reset somehow, it didn’t make any difference:
"targets": {
"default": {
"includeNodeModules": true
}
}
💻 Code Sample
https://github.com/transclude-me/extension/commit/78b529ef1af32ba076b3b852f21145f48dfdb1b9 I discovered issue after this commit
🌍 Your Environment
| Software | Version(s) |
|---|---|
| Parcel | 2.5.0 |
| Node | 17.5.0 (also tried 16.4.2) |
| Yarn | 1.22.17 |
| Operating System | macOS 12.3.1 |
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 11
- Comments: 23 (11 by maintainers)
Commits related to this issue
- Use watch commands for building prod versions of the extension because of https://github.com/parcel-bundler/parcel/issues/8071 — committed to transclude-me/extension by Stvad 2 years ago
- Downgrade parcel version from 2.5.0 to 2.3.2 due to https://github.com/parcel-bundler/parcel/issues/8071 — committed to tiqwab/scrapbox-diagramsnet-extension by tiqwab 2 years ago
- chore: bump parcel to 2.6.0 which supports manifest v3 https://github.com/parcel-bundler/parcel/issues/8071#issuecomment-1133549719 https://github.com/parcel-bundler/parcel/issues/8130#issuecomment-1... — committed to blzsaa/azure2jira by blzsaa 2 years ago
- chore: bump parcel to 2.6.0 which supports manifest v3 https://github.com/parcel-bundler/parcel/issues/8071#issuecomment-1133549719 https://github.com/parcel-bundler/parcel/issues/8130#issuecomment-1... — committed to blzsaa/azure2jira by blzsaa 2 years ago
- Use watch commands for building prod versions of the extension because of https://github.com/parcel-bundler/parcel/issues/8071 — committed to transclude-me/extension by Stvad 2 years ago
- add workaround for parcel issue (#14) with code splitting and content script parcel-bundler/parcel#8071 — committed to janstuemmel/aws-role-switch by janstuemmel 2 years ago
- https://github.com/parcel-bundler/parcel/issues/8071 workaround — committed to transclude-me/extension by Stvad 2 years ago
- Include fix for missing packages in final build Fixes https://github.com/parcel-bundler/parcel/issues/8071 — committed to fregante/browser-extension-template by fregante 2 years ago
- Fix `parcel build` producing broken extension When parcel bundles the extension not all modules are correctly included. For more information see https://github.com/parcel-bundler/parcel/issues/8071. — committed to Compile-Time/yt-quick-actions by Compile-Time 2 years ago
- Fix `parcel build` producing a broken extension When parcel bundles the extension not all modules are correctly included. For more information see https://github.com/parcel-bundler/parcel/issues/8071... — committed to Compile-Time/yt-quick-actions by Compile-Time 2 years ago
Getting the same issue here as @Stvad. Seems like web extension production build is not robust (it works well in
parcel watchdev mode)?I followed the changes from @Kjoep and simply added this to
package.jsonand my production build seems to work.Command:
parcel build manifest.json --no-content-hashWithout no content hash, I get this error:
Error: Cannot read properties of undefined (reading 'hashReferences')Thanks, I’ve reproduced the issue and am working on fixing it now.
Individual files have to be smaller than 4MB when publishing Firefox extensions:
I haven’t been able to properly look at this. For now we should probably just document the issue and add the code-splitting removal fix into the docs.
@101arrowz Thank you for replying, great, that’s something!
Can you please share here for now how to remove code-splitting?
@101arrowz here’s my reproduction: https://github.com/lukaw3d/reproduce-parcel-webextension-codesplitting-broken
parcel@2.6.0and@parcel/config-webextension@2.6.0background page throws
Cannot find modulewhen initializingI’d say PREFERABLE
I have the same problem (at least it looks like it) and did some digging. Turns out the WebExtensionPackager is not compatile wit the code-splitting feature. If bundles get split off, it does not add the split-off bundles to the manifest. From what it looks like it only does a naive find-and-replace.
I have a simple workaround here: https://github.com/Kjoep/parcel/tree/prevent_losing_webextension_deps (use it for config-webextension). This turns off the code-splitting for web extensions.
@101arrowz I’m using Parcel 2.7.0 and below config doesn’t work for me:
I still get only 1 file:
manifest-firefox.js#8404This comment seems to work: https://github.com/parcel-bundler/parcel/issues/8071#issuecomment-1133549719
To be fair, the codesplitting does not seem very important for webextensions, as they are loaded locally, not over the network. It might be acceptable to automatically turn the feature off.
Manifest v3 with --no-scope-hoistis an interesting case, as in it content script is broken, but background is fine, and content script is failing to import../options/options-storagemodule, which is what background script fails to import in the other broken cases 🤔