v2.6.0 BUG: web-extension, content script, importScripts() is not supported in module workers

[louisgv]

🐛 bug report

There is a regression with how Parcel 2.6.0 HMR handles content script as well as background script for web extension runtime. I got an error (pasted below) when trying to use @parcel/config-webextension@2.6.0 to build an extension with just a single content script.

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

The content script looks like this:

window.addEventListener("load", () => {
  console.log("content script loaded")

  document.body.style.background = "pink"
})

🤔 Expected Behavior

In 2.5.0, the above content script worked.

😯 Current Behavior

Upon upgrading to 2.6.0, it threw the error below:

[Error: ENOENT: no such file or directory, open 'P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@parcel+runtime-browser-hmr@2.6.0_@parcel+core@2.6.0\node_modules\@parcel\runtime-browser-hmr\lib\runtime-62b1b20e127e8e50.js'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'P:\\Projects\\plasmo-corp\\plasmo\\node_modules\\.pnpm\\@parcel+runtime-browser-hmr@2.6.0_@parcel+core@2.6.0\\node_modules\\@parcel\\runtime-browser-hmr\\lib\\runtime-62b1b20e127e8e50.js'
}
           importScripts() is not supported in module workers.
           Use a static `import`, or dynamic `import()` instead.
           P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@parcel+runtime-browser-hmr@2.6.0_@parcel+core@2.6.0\node_modules\@parcel\runtime-browser-hmr\lib\runtime-62b1b20e127e8e50.js:320:17

💁 Possible Solution

We are investigating the HMR runtime #8159. Will continue doing so for a bit more, haven't figured out what's causing this issue but I suspect contentscripts and background scripts are using the wrong transformer/resolver?

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	2.6.0
Node	16.14.0
npm/Yarn	8.3.1
Operating System	Windows

[101arrowz]

I was about to make an issue for this. #8145 will fix this.

[geoynomous]

Having a similar problem when switching from 2.5.0 to 2.6.0

[Error: ENOENT: no such file or directory, open '/app/clients/frontends/node_modules/.pnpm/@parcel+runtime-browser-hmr@2.6.0_@parcel+core@2.6.0/node_modules/@parcel/runtime-browser-hmr/lib/runtime-d3d6b39ee6a3d00b.js'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/app/clients/frontends/node_modules/.pnpm/@parcel+runtime-browser-hmr@2.6.0_@parcel+core@2.6.0/node_modules/@parcel/runtime-browser-hmr/lib/runtime-d3d6b39ee6a3d00b.js'
}
node:internal/process/esm_loader:94
    internalBinding('errors').triggerUncaughtException(
                              ^

[BuildError: importScripts() is not supported in module workers.] {
  diagnostics: [
    {
      message: 'importScripts() is not supported in module workers.',
      codeFrames: [
        {
          filePath: '/app/clients/frontends/node_modules/.pnpm/@parcel+runtime-browser-hmr@2.6.0_@parcel+core@2.6.0/node_modules/@parcel/runtime-browser-hmr/lib/runtime-d3d6b39ee6a3d00b.js',
          codeHighlights: [ [Object] ]
        }
      ],
      hints: [ 'Use a static `import`, or dynamic `import()` instead.' ],
      documentationURL: 'https://parceljs.org/languages/javascript/#classic-script-workers',
      origin: '@parcel/transformer-js'
    }
  ]
}

and there is no importScripts in our codebase ....

[cheap-glitch]

I'm still having this issue on 2.7.0 when I try importing an HTML file (either through import 'url:' or new URL). I use --no-hmr btw.

Edit: same issue on 2.6.0 and 2.6.1. I guess this is because I import the file in a module that is then imported by the background script / service worker?

What's even weirder is that adding the same HTML page in the manifest (e.g. as the default_popup or the options_ui page) generates almost the same exact script, except without that pesky importScripts(). Removing that line makes everything work as expected. And again, I don't even use HMR 🤷‍♂️