Import Web Worker as ?url

[bartoszkrawczyk2]

Hi,

I need to get web worker file path instead of using ?worker because I won't initialize it manually, I need to pass it to emscripten's locateFile.

When I try to do this I get Uncaught SyntaxError: Cannot use import statement outside a module because vite is appending import { injectQuery as __vite__injectQuery } from "/@vite/client"; at the beginning of my worker file. I've tried importing using ?url, new URL(), I've tried adding it to optimizeDeps.exclude. Nothing seems to help, vite is always appending injectQuery.

I can't modify my worker file because it's output file from emscripten (it's generated automatically during build)

Is there any way around it?

Thanks,
Bartosz

[ItaiBolyasni25]

I second this, im having the same issue and it looks like the vite dev build is injecting the following 3 imports into a classic worker that doesnt have support for imports:

`
import { injectQuery as __vite__injectQuery } from "/@vite/client";

import vitePluginRequire_1669650957052_5135 from "/@id/__vite-browser-external:fs";
import vitePluginRequire_1669650957051_3779 from "/@id/__vite-browser-external:worker_threads";
`

This is happening when trying to create a web worker to run with WASM multithreaded.
I tried going around the issue by trying to make a release build but when transforming my dotnet.worker.js it is running out of memory...

Please advise on a workaround.
Thanks!

[XXXJumpingFrogXXX]

Also encountered that problem. Lol

[bamtheboozle]

are there any workaround to this?

[mshenawy]

Can anyone fix this? I'm also facing the same issue after upgrading to angular 18.

[budarin]

I use another vite config for building the worker and conditional url for worker in DEV & PROD

[mshenawy]

Were you able to fix this issue? I'm facing the same issue after migrating to angular 18

[vini-ak]

Facing the same problem using vite with module federation.

package.json
{ "name": "checkout", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.0" }, "devDependencies": { "@originjs/vite-plugin-federation": "^1.3.5", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/styled-components": "^5.1.34", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "styled-components": "^6.1.12", "typescript": "^5.2.2", "vite": "^5.3.4" } }

vite.config.ts
`import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': '/src',
},
},
build: {
target: 'esnext',
minify: false,
cssCodeSplit: true,
rollupOptions: {
output: {
format: 'module',
entryFileNames: 'assets/[name].js',
minifyInternalExports: false
}
}
},
plugins: [
react(),
federation({
name: "checkout",
filename: "remoteEntry.js",
exposes: {
"./navbar": "./src/components/navbar/index.tsx",
},
shared: ["react", "react-dom", "styled-components"],
}),
],
server:{
host: "localhost",
port: 5100,
}
})`