"import() is not allowed in service workers."

[fregante]

🐛 bug report

import() presumably works in some browsers:

• https://caniuse.com/mdn-javascript_statements_import_service_worker_support
• https://togithub.com/w3c/ServiceWorker/issues/1585#issuecomment-1776461160

but Parcel throws an error before even trying:

@parcel/transformer-js: import() is not allowed in service workers.

parcel/packages/transformers/js/src/JSTransformer.js

Lines 778 to 785 in 4d27ec8

	if (dep.kind === 'DynamicImport') {
	// https://html.spec.whatwg.org/multipage/webappapis.html#hostimportmoduledynamically(referencingscriptormodule,-modulerequest,-promisecapability)
	if (asset.env.isWorklet() || asset.env.context === 'service-worker') {
	let loc = convertLoc(dep.loc);
	let diagnostic = {
	message: `import() is not allowed in ${
	asset.env.isWorklet() ? 'worklets' : 'service workers'
	}.`,

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

parcel watch --no-cache --no-hmr

{
	"extends": "@parcel/config-webextension"
}

🤔 Expected Behavior

Parcel should create the bundle and leave the import() statement in there.

😯 Current Behavior

🚨 Build failed.

@parcel/transformer-js: import() is not allowed in service workers.

💁 Possible Solution

I think it should drop the error entirely, it's not Parcel's responsibility to pre-validated code, the same way it allows the non-existent window.restartOperatingSystem() to be called. Making things impossible regularly makes it difficult to use Parcel.

At the very least make it a warning or make it silenceable.

🔦 Context

I want to load a script on demand in background workers

💻 Code Sample

// in worker.ts
import('./file.ts')

I don’t think this is related to web extensions, but here it is:

// in manifest.json
{
  "$schema": "https://json.schemastore.org/chrome-manifest",
  "name": "webext-messenger",
  "version": "0.0.0",
  "manifest_version": 3,
  "background": {
    "type": "module",
    "service_worker": "worker.ts"
  }
}

🌍 Your Environment

Software	Version(s)
Parcel	2.11.0
Node	v23.1.0
npm/Yarn	10.9.0
Operating System	macOS 15.1.1

[devongovett]

The caniuse page you linked to is for the import statement, not the dynamic import() function.

According to MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

Dynamic module import is not permitted in all execution contexts. For example, import() can be used in the main thread, a shared worker, or a dedicated worker, but will throw if called within a service worker or a worklet.

Given that the spec issue you linked to is still open, I guess this is still the case?

[devongovett]

Actually you can see this in the current spec: https://html.spec.whatwg.org/multipage/webappapis.html#hostloadimportedmodule

2. If settingsObject's global object implements WorkletGlobalScope or ServiceWorkerGlobalScope and loadState is undefined, then:
   1. Let completion be Completion Record { [[Type]]: throw, [[Value]]: a new TypeError, [[Target]]: empty }.
   2. Perform FinishLoadingImportedModule(referrer, moduleRequest, payload, completion).
   3. Return.

So, it throws when dynamic import is called in worklets or service workers.

[fregante]

Indeed I was fooled into thinking it worked due to this Webpack plugin which transpiles import functions:

• Not support MV3 native ES background worker awesome-webextension/webpack-target-webextension#24 (comment)

Do you reckon that the same solution could be implemented here?