Firefox: import declarations may only appear at top level of a module

[fbjorn]

Build tool

Rollup

Where do you see the problem?

• [x] In the browser
• [ ] In the terminal

Describe the bug

Hi,

I have a Vite setup and try to load the extension into Firefox. Before that, I had to rename background.service_worker into background.scripts in the Manifest:

  "background": {
    "service_worker": "src/background.ts",
    "type": "module"
  },

But after building the extension and loading it, I get this when inspecting:

Uncaught SyntaxError: import declarations may only appear at top level of a module

The problem points to this line in my service-worker-loader.js (and this is a file with 1 import only):

import './assets/background.ts.c2a7eff0.js';

My best guess so far is that type: "module" property of background is ignored by Firefox, so the script doesn't support imports. Probably it wants a single file with everything bundled into it.

So is it possible to configure CRXJS to produce only 1 file for service worker and content script? Or maybe there's another solution to my case?

Thanks

Reproduction

My repo is private, yet I can create a demo example if you need it

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 63.83 MB / 16.00 GB
    Shell: 3.6.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.19.0 - ~/.local/share/nvm/v16.19.0/bin/node
    npm: 8.19.3 - ~/.local/share/nvm/v16.19.0/bin/npm
    pnpm: 8.7.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 117.1.58.127
    Chrome: 109.0.5414.87
    Safari: 16.5.2
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14 
    vite: ^2.9.15 => 2.9.15

Severity

annoyance