vite: When using `import` inside classic worker, syntax error happens during dev but build success

Describe the bug

When import is used in classic worker, the following error happens during dev.

Uncaught SyntaxError: Cannot use import statement outside a module

But build works with it and the bundle seems to be correctly bundled.

According to the docs, import can be used inside classic worker if worker is imported with query suffixes. There is no mention about constructor type worker import. But if it is the recommended way, I think it would be good to support it too. Also it is useful for #8466.

https://github.com/vitejs/vite/issues/8466#issuecomment-1146655205 might be related.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mhmcjy?file=main.js

System Info

stackblitz

Vite: 2.9.9, 3.0.0-alpha.9

Used Package Manager

npm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 10
Comments: 19 (13 by maintainers)

Commits related to this issue

refactor: ♻️(BROKEN)try to improve build system? currently stuck because of https://github.com/vitejs/vite/issues/8470 — committed to Banou26/libav-wasm by Banou26 2 years ago

Most upvoted comments

Following this issue. This is the biggest inhibitor to running workers with imports in dev mode with Firefox. I can’t be the only one who develops against Firefox, right?

+11

egriff38 on Oct 12, 2022

Looks like Firefox 114 will support import within workers.

Ship module workers https://bugzilla.mozilla.org/show_bug.cgi?id=1812591

EDIT: Confirmed.

FF114 adds support for ECMAScript modules. What that means is that you can use the constructor {type: “module”} in worker/shared worker constructor, and use both import and import(). In Worklets you can call import. FF does not yet support modules in ServiceWorkers, but they also allow import only.

FF114 ECMAScript module support

eliot-akira on May 15, 2023

so the issue asks for

dynamic import support in classic worker (build mode)
static import support in classic worker (dev mode) 😵

poyoho on Jun 6, 2022

Some colleagues prefer Firefox for development and we would like to debug on FF as well.

This issue prevents development on Firefox for any project that uses Workers with imports.

Is there a way to tell vite to inline imports into the worker file during development?

deluksic on Jan 9, 2023

dynamic import are supported in both classic and module worker. But static import are not supported in classic worker.

import w from 'foo.js?worker' build time is also module.

It is classic if worker.format is iife (stackblitz 3.0.0-alpha.9, though it is es when vite 2.9.9).

It seems './modules/module0.js' run as <script type="module"> in classic worker.

Files imported by static or dynamic import is treated as ESM (even if they are import from a classic worker/script).

sapphi-red on Jun 6, 2022