Parcel WebExtension fails to bundle modules under some conditions (build + mv2, or mv3 & --no-scope-hoist)

[Stvad]

🐛 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 watch mode (https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-background-mv2-watch-js)
• Manifest v3 without --no-scope-hoist produces working build (https://gist.github.com/Stvad/e441997e880a47026772cd6872501d2a#file-background-mv3-scope-hoist-js)
• Manifest v3 with --no-scope-hoist seems 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-hash from the build commands - I start hitting Error: Cannot read property 'hashReferences' of undefined #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

transclude-me/extension@78b529e 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

[Stvad]

Manifest v3 with --no-scope-hoist is an interesting case, as in it content script is broken, but background is fine, and content script is failing to import ../options/options-storage module, which is what background script fails to import in the other broken cases 🤔

[Kjoep]

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.

[Stvad]

I think it's the same issue, yeah. Looking at my broken builds - I get split bundles, and only one of the scripts makes it to manifest.

Also it seems that parcel is trying to reuse the code between background and content, which doesn't work.

[Stvad]

Is there a way to disable code-splitting without forking parcel? 😛

[calclavia]

Getting the same issue here as @Stvad. Seems like web extension production build is not robust (it works well in parcel watch dev mode)?

I followed the changes from @Kjoep and simply added this to package.json and my production build seems to work.

"@parcel/bundler-default": {
  "minBundles": 10000000,
  "minBundleSize": 3000,
  "maxParallelRequests": 20
}

Command:
parcel build manifest.json --no-content-hash

Without no content hash, I get this error: Error: Cannot read properties of undefined (reading 'hashReferences')

[101arrowz]

If someone could provide a minimal reproduction that would be helpful, otherwise I'll try to make one in the next few weeks.

[lukaw3d]

@101arrowz here's my reproduction: https://github.com/lukaw3d/reproduce-parcel-webextension-codesplitting-broken

• uses parcel@2.6.0 and @parcel/config-webextension@2.6.0
• manifest v2 with two entry points: background.ts and popup.html
• both entry points import something large (lodash)
• users browserslist to target an old browser (Chrome 60)

background page throws Cannot find module when initializing

[101arrowz]

Thanks, I've reproduced the issue and am working on fixing it now.

[Kjoep]

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.

[lukaw3d]

Individual files have to be smaller than 4MB when publishing Firefox extensions:

• https://discourse.mozilla.org/t/bug-with-uploading-large-files-in-addon/85407
• https://discourse.mozilla.org/t/firefox-web-extension-background-script-to-bundle-or-not-to-bundle/82805

[avalanche1]

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.

I'd say PREFERABLE

[everdimension]

@101arrowz Thank so much for starting work on the issue!
Is there any way I can help to speed up the process? Do you have a solution in mind?

[101arrowz]

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.

[everdimension]

@101arrowz Thank you for replying, great, that's something!

Can you please share here for now how to remove code-splitting?

[101arrowz]

This comment seems to work: #8071 (comment)

[akash07k]

@101arrowz
I'm using Parcel 2.7.0 and below config doesn't work for me:

    "@parcel/bundler-default": {
        "minBundles": 10000000,
        "minBundleSize": 3000,
        "maxParallelRequests": 20
    }

I still get only 1 file: manifest-firefox.js
#8404

[jisbruzzi-velocity]

This started happening to us when we moved from 2.4.1 to 2.7.0.
We fixed it by adding the above snippet to the root of our package.json

[tdriley]

@calclavia's solution above fixed this for me in parcel v2.7.0. I did not also need to use --no-content-hash to prevent the error.

[Stvad]

probably not stale

[akash07k]

Yep, not stale.

…

On 3/27/2023 10:35 AM, Vlad Sitalo wrote: probably not stale — Reply to this email directly, view it on GitHub <#8071 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQWBM7VQKVPMRMRHZX4QODW6EN2TANCNFSM5VMUSVXA>. You are receiving this because you commented.Message ID: ***@***.***>

[101arrowz]

Possibly fixed by #9068 - can someone please test? I encountered a variant of this issue locally and my changes in that PR fixed it.

[fregante]

@101arrowz I tried the repro in #8071 (comment) and this appears to have been fixed

2.6.0

built with 2.6.0.zip

dist/manifest.json                 261 B    158ms
dist/popup.ad5381fc.html           227 B    5.13s
dist/popup.8dfc8189.js             960 B    4.97s
dist/popup.be2dcf72.js         970.06 KB    4.97s
dist/popup.b32da9f1.js         972.16 KB    4.97s
dist/background.58f028a8.js        972 B    4.97s

2.10.0

built with 2.10.0.zip

dist/manifest.json                   261 B    273ms
dist/popup.e9f20549.html             150 B    565ms
dist/popup.13528c49.js         ⚠️  4.06 MB    1.25s
dist/popup.51ff9da5.js         ⚠️  4.06 MB    1.25s
dist/background.2b2318af.js    ⚠️  4.06 MB    1.24s

The output is not ideal because it generates two heavy popup.js files, but that's attributable to the module/no-module variants, which I think should just be disabled in extensions if possible.

[101arrowz]

Thanks for verifying! Let's close this if the bundling failure is fixed; the module/nomodule behavior change can be handled in a separate issue.