What are the "Query Suffixes" referred to in the Vite Docs?

Question

I have been reading through the Vite documentation for Web workers, and it mentioned importing a file using "Query Suffixes," which I have never encountered and am not sure what to search for to learn more. I'm not sure if this is native to Node.js, Vite.js, or if it is a plugin that is built into Vite.

This is the specific section that I am referring to:

---

Import with Query Suffixes

A web worker script can be directly imported by appending ?worker or ?sharedworker to the import request. The default export will be a custom worker constructor:

import MyWorker from './worker?worker'

const worker = new MyWorker()

The worker script can also use import statements instead of importScripts() - note during dev this relies on browser native support and currently only works in Chrome, but for the production build it is compiled away.

By default, the worker script will be emitted as a separate chunk in the production build. If you wish to inline the worker as base64 strings, add the inline query:

import MyWorker from './worker?worker&inline'

If you wish to retrieve the worker as a URL, add the url query:

import MyWorker from './worker?worker&url'

See Worker Options for details on configuring the bundling of all workers.

---

Update:

I found an MDN page on import that seems like a step in the direction that I am looking for, as well as this MDN page on import.meta that looks a lot like what I am searching for. I tried following that lead, but it didn't help me understand this Vite feature any better.

Is the ?worker query suffix a custom Vite implementation of import.meta?

Pitiful

Answer 1

This is a form of import used by vite. It allows the user to be provided with custom imports. In the case of the webworkers it offers a custom constructor so that instead of using the complete syntax

const worker = new Worker(new URL('./worker.js', import.meta.url))

you can instanciate your worker like this

import ShortWorker from './worker.js?worker'

const worker = new ShortWorker();

This feature is also used in other cases to allow the user to choose the way files/assets are loaded:

// Explicitly load assets as URL
import assetAsURL
 from './asset.js?url'

// Load assets as strings
import assetAsString
 from './shader.glsl?raw'

// Load Web Workers
import Worker
 from './worker.js?worker'

Jazminejazz

So, if I understand correctly, these query strings are not part of any JS standard but are built as a part of Vite itself. Is that right? – Pitiful

For the time being, this is my understanding. On the subject of standardisation it seems the it has been considered as “avoided” in node ( github.com/nodejs/modules/issues/493 ) regarding the complexity it could introduce ( github.com/WICG/import-maps/issues/134#issuecomment-529706929 ) – Jazminejazz

That makes sense. Thank you for the links you provided! Marking this as the answer! – Pitiful

Answer 2

Didn't know it was Vite specific problem. But, this fixed my error.

import MyWorker from './worker?worker'

const worker = new MyWorker()

Blight

Thanks for responding! Fortunately, I was not receiving an error per se. Rather, I was trying to understand how the query suffixes work in order to better use them, but couldn't find any relevant documentation. As such, I'm not going to mark your response as the answer, but I do appreciate you taking the time to respond. – Pitiful