In loaded sharedworker, import URL should be realID, but references internal path.

import "/node_modules/vite/dist/client/env.mjs"

            import {expose} from "/node_modules/.vite/deps/comlink.js?v=1ba55bde"
            import * as api from "/src/composables/internal:comlink-shared:./worker?type=module&worker_file"
            //      should be "/src/composables/worker.ts?type=module&worker_file" ?


            addEventListener('connect', (event) => {
                const port = event.ports[0];
                  
                expose(api, port);
                // We might need this later...
                // port.start()
            })

https://github.com/mathe42/vite-plugin-comlink/blob/main/src/index.ts#L56

In the above code, I think replace needle may wrong?

This isprobably out of scope for this project but I'm trying to use uvu with my project to test part of the vite app. Running just uvu on the ts code doesn't work because the imported worker doesn't resolve (due to the import syntax Error: Cannot find module 'comlink:./WorkerKatalog'). Is there a way to make this plugin work without vite or inside and outside of a vite context?

The vite-env.d.ts import line stopped working with v4.

More info in the PR #121

Using plain old workers, I currently have a channel to post back to the parent a message from worker for eg:

updateInstructions(instructions: InstructionContainer) {
    self.postMessage({
      type: "updateInstructions",
      data: { chartId: this.chartId, instructions },
    });
  }

is it possible to get the worker instance so onmessage can be listened to for events from the worker? These are not necessarily return types.

Hi @mathe42!

Congratulations on this awesome plugin, it works really really nice.

We are migrating a CRA project to Vite, our app uses workers extensively and it would be nice to test them during development in other browsers different from Chrome. Do you know any workaround to enable support on Firefox when using the Vite dev mode?

We are very interested, so if you think we can contribute to this plugin by coding, please point us in a good direction.

Hi @mathe42,

thank you for the cool plugin, it makes working with workers even more enjoyable.

I have encountered an issue with the plugin during vite's build stage, which causes the build process to fail.

> [email protected] build /Projects/vite-comlink-repro
> tsc && vite build

vite v2.9.6 building for production...
✓ 0 modules transformed.
✓ 2 modules transformed.
[vite:worker-import-meta-url] Could not resolve entry module (src/____:com_link:./worker).
file: /Projects/vite-comlink-repro/src/main.ts
error during build:
Error: Could not resolve entry module (src/____:com_link:./worker).
    at error (/Projects/vite-comlink-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:198:30)
    at ModuleLoader.loadEntryModule (/Projects/vite-comlink-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22491:20)
    at async Promise.all (index 0)
 ELIFECYCLE  Command failed with exit code 1.

I am not sure if it is necessary, but here is a super stripped down reproduction of the issue:

https://github.com/jim-fx/vite-comlink-repro

Thank You 👋

The import alias is added in Node.js 15.3.0.

It might be better to import "path" instead which should work on older version of node.

@mathe42 This new version is very promising.

We have tried it, and it works quite fine, but we detected that the source map generated is using a different hash value than the worker.js generated.

This is the config we are using:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "@svgr/rollup";
import envCompatible from "vite-plugin-env-compatible";
import comlink from "vite-plugin-comlink";
import {
  CUSTOM_ALIASES,
  PROBLEMATIC_LIBRARIES,
  POLYFILLS
} from "./config/aliases";

export default defineConfig({
  plugins: [
    react(),
    svgr({ svgo: false }),
    envCompatible({ prefix: "REACT_APP", mountedPath: "process.env" }),
    comlink()
  ],
  worker: {
    plugins: [
      comlink()
    ]
  },
  optimizeDeps: {
    include: ["comlink"]
  },
  server: {
    host: true,
    port: 3000
  },
  build: {
    outDir: "build",
    sourcemap: "hidden"
  },
  resolve: {
    alias: {
      ...CUSTOM_ALIASES,
      ...PROBLEMATIC_LIBRARIES,
      ...POLYFILLS
    }
  }
});

We are importing the Worker this way:

import * as Comlink from "comlink";

const worker = new ComlinkWorker(new URL("./worker", import.meta.url));

If this info is not enough I can try to reproduce it with a blank project.

Originally posted by @vibaiher-qatium in #52 (comment)

Hi, thank you for developing the vite plugin.

I'm using your plugin with a vue 3 app and I'm running into this issue where I cannot load my worker:

This is what I'm doing:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import comlink from 'vite-plugin-comlink'
import worker, { pluginHelper } from 'vite-plugin-worker'
export default defineConfig({
	plugins: [vue(), comlink({
		typeFile: "comlink-workers.d.ts",
	}), pluginHelper(),
	worker({})],
	resolve: {
		dedupe: ["vue"],
		alias: {
			"~": resolve(__dirname, "src")
		}
	},
	optimizeDeps: { include: ["@svws-nrw/svws-ui"] },
	build: {
		outDir: "build/output",
		sourcemap: true,
		minify: true,
		commonjsOptions: {},
		rollupOptions: {
			output: {
				entryFileNames: `assets/[name].js`,
				chunkFileNames: `assets/[name].js`,
				assetFileNames: `assets/[name].[ext]`
			}
		}
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@import "./src/theme.scss"; @import "./src/main.scss";`
			}
		}
	}
});

Then I'm loading my worker just like in the docs (still in the copy and paste stage...): import add_worker from 'comlink:./WorkerKatalog'

and this is where it fails:

7:31:59 PM [vite] Internal server error: Failed to resolve import "worker:comlink@worker:/src/app/WorkerKatalog.ts" from "comlink@main:worker:comlink@worker:/src/app/WorkerKatalog.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: comlink@main:worker:comlink@worker:/src/app/WorkerKatalog.ts
  1  |  import { wrap } from "comlink";
  2  |  import createWorker from "worker:comlink@worker:/src/app/WorkerKatalog.ts";
     |                            ^
  3  |  export default () => wrap(new createWorker());

The file does exist in that path. Any idea how to solve this issue?

按照说明配置完成无法正常运行,浏览器报错如下，ComlinkWorker这类api从何处导入呢

With version 2.0 I added support for serviceWorker via comlink.

I'm not shure if it is bug free (with SW-Updates...) so please feel free to report bugs about it in this issue.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency typescript to v5.5.4
• chore(deps): update dependency typescript to v5.5.4
• chore(deps): update dependency vite-plugin-inspect to v0.8.5
• fix(deps): update dependency magic-string to v0.30.11
• chore(deps): update dependency tsup to v8.2.4
• chore(deps): update dependency vite to v5.4.0
• chore(deps): update dependency vite to v5.4.0
• chore(deps): update node.js to v20.16.0 (node, @types/node)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hey there! Thanks for the cool library. I've been playing around trying to see if I can get this working in a newer app using Vite version 5.0.12.

Following the instructions from the readme, I end up with an error

WorkerPage.tsx?t=1707407479840:14 Uncaught ReferenceError: ComlinkWorker is not defined`

It seems like the types for ComlinkWorker are coming from the types added to vite-env.d.ts but they are not actually available.

Has anyone had success getting this to work?

HI there, i am trying to get vite-plugin-comlink to run, but cannot find the problem why it would not work:

i have followed the install readme so my vite.config.ts looks like that:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { comlink } from 'vite-plugin-comlink'
import EnvironmentPlugin from 'vite-plugin-environment'

// https://vitejs.dev/config/
export default ({ mode }) => {
  console.error('vite mode', mode)
  return defineConfig({
    envPrefix: 'REACT_APP_',
    logLevel: 'info',
    esbuild: {
      pure: ['console.log', 'console.time', 'console.timeEnd', 'console.warn'],
      minify: ['production', 'preview'].includes(mode),
    },
    plugins: [
      comlink(), // must be the first plugin...
      react(),
      EnvironmentPlugin('all', { prefix: 'REACT_APP_' }),
      EnvironmentPlugin({ PUBLIC_URL: '' }),
    ],
    worker: {
      plugins: [comlink()],
    },
  })
}

vite-env.d.ts looks like this:

/// <reference types="vite/client" />
/// <reference types="vite-plugin-comlink/client" />

vite-plugin-comlink is installed via yarn add vite-plugin-comlink (3.0.4).

the Problem is, when i try to create a new ComlinkWorker like so:

const instance = new ComlinkWorker(new URL('./worker.js', import.meta.url) i get any
Cannot find name 'ComlinkWorker'.ts(2304)

Where did i do something wrong? what can be the Problem?

Any help would be awesome!
Thanks a lot!

Related to missing file when calling applySourceMap, more info here #123

Please see the repro here: https://github.com/sep2/conflict-with-legacy-plugin

Hi,

I have an issue setting up this plugin with comlink.

Following the docs, I've added the plugin to the plugins array and to worker.plugins but got an error about incompatible types.

No overload matches this call.
  The last overload gave the following error.
    Type 'Plugin_2[][]' is not assignable to type '() => PluginOption[]'.
      Type 'Plugin_2[][]' provides no match for the signature '(): PluginOption[]'.ts(2769)
reporters-1evA5lom.d.ts(1789, 18): The last overload is declared here.

"vite": "^4.5.2",
"vite-plugin-comlink": "^4.0.2",
"typescript": "^4.9.3",

Would appreciate any hints on what's going on.

I notice that the package is huge, checking the code tab in npm https://www.npmjs.com/package/vite-plugin-comlink?activeTab=code seems like you commit the template directory.

Is this intentional? Or is a bug?

Maybe worth looking at https://docs.npmjs.com/cli/v10/using-npm/developers#testing-whether-your-npmignore-or-files-config-works

Running a project with Vite v5.0.10 and vite-plugin-comlink, I get:

$ VITE_CJS_TRACE=true pnpm run dev

> <redacted>@1.0.0 dev /<redacted>/repos/<redacted>
> vite

Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at warnCjsUsage (/<redacted>/node_modules/.pnpm/[email protected]/node_modules/vite/index.cjs:32:3)
    at Object.<anonymous> (/<redacted>/node_modules/.pnpm/[email protected]/node_modules/vite/index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/<redacted>/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-comlink/dist/index.js:31:19)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)

https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

Hello! Thank you for providing this functionality for the open source community!

I was going through my Dependa-bot PRs and updating my dependancies. One thing I tend to do as I wait for the PRs to rebase between merges is check the changelog for each of the dependencies.

This helps me understand what has changed in the tools I use, to understand how they work, if I need to change anything, and gets me a little closer to the logic I depend on.

Usually the best spot for that is in a CHANGELOG file, but if you dont want to manually maintain something, I recommend using the Github Release feature, which does a great job auto-documenting the CHANGELOG based on your PR titles.

I hope you consider this as you continue developing this incredibly helpful plugin.

Thanks for the library. Is there a way to get inline workers on production builds? This workaround option mentioned here no longer works: #45 (comment)

For the source file:

const worker = new ComlinkWorker<typeof import("./workers/mp4-decoder")>(
  new URL("./workers/mp4-decoder", import.meta.url)
);

The plugin generates:

const worker = wrap(new Worker("/src/internal:comlink:./workers/mp4-decoder?type=classic&worker_url_file");

which is missing an ending ).

The plugin works when {} is passed as the second argument, so the following works as expected:

const worker = new ComlinkWorker<typeof import("./workers/mp4-decoder")>(
  new URL("./workers/mp4-decoder", import.meta.url),
  {}
);

First off thanks for the repo, and the work put into it. It is appreciated.

Context

• I've been using this plugin for a while, and recently updated to the latest version of vite.

  • I was originally using the @vitejs/plugin-react plugin alongside this one.
  • Unfortunately I was running into issues with vite, and I tried upgrading vite to a new version.
  • Where I ran into further issues, reported here

• In an effort to resolve the above issues, I switched over to the @vitejs/plugin-react-swc plugin.

  • Using this plugin does seem to fix the issues, but seems to cause problems with this plugin.
  • It looks like the plugin never runs, so the file that creates the worker throws an error of ComlinkWorker is not defined
  • This was working without issue before I updated vite, then switched to the @vitejs/plugin-react-swc plugin

• To be honest I'm not sure if it's related to this plugin or something else with my configuration

  • It's a little bit non-standard which would make it difficult to recreate a demo of, but I can try if it's really needed
  • My hope is I'm missing something simple, like a config option that will resolve the issue.

• Checking the current issues, I seen similar issues reported before

  • They seem to be unrelated to the issue I currently facing
  • They are also closed, and so I figured I just open a new issue instead

Images

Package.json

Create worker file

Chrome Inspector Error

Vite Config

Comments

• I realize this might be not related to this plugin, as it seems the plugin is not even being executed, but I figured I start here first.
• Any direction you can provide would be appreciated.

Thanks

When I'm trying to use this plugin to work with webworkers, I'm getting the following error message in my browser console.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

And when I look into the path that it tries to fetch manually by opening it in a new tab, it returns a not found but the type of content returned by server is of html.

Lmk if there's more info I can provide to help out with the issue,
Thanks!

So I'm using ComlinkWorker in one place and it works fine, but if I try to use it in another place it is undefined. It's part of the same project and I'm not really sure what the difference is. It's not from inside a worker or anything. The one that works is initialized when the app starts whereas the one that doesn't work is created in response to me clicking something in my UI.

Wish I could just import it so I don't have to rely on it being magically available.

The code is within /src/components/Test/Test.vue.

async function test() {
  const instance = new ComlinkWorker(new URL('../../common/worker/worker', import.meta.url))
  const result = await instance.add(2, 3)
  console.log(result)
}
test()

The translated code in English is:

wrap(
  new Worker(
    new URL('' + "/src/components/Test/common/worker/worker?worker_file&type=module", import.meta.url),
    {type: "module"}
  )
);

But actually, I intended to request the "common" folder under "/src".

Creating a worker from the main thread works fine. However, ComlinkWorker is not available inside a worker. I'm trying to create additional workers from the first ComlinkWorker.

My use case:

1. Create a worker to process a large data stream, compress, hash, etc (single threaded stuff).
2. Create a worker pool to encrypt chunks of data stream from worker 1 in parallel.

Worker 1 allows the main thread to do just UI stuff. Additional workers spawned from 1 allow parallel encryption. Data is never returned to the main thread.

Aside: I tried to do this with just comlink, but ran into issues with Typescript, importScripts and libsodium-wrapper. vite-plugin-comlink is just so much nicer!

I am trying to use this plugin in a vite-based project, where I am running a worker that uses a wasm-based library. I can successfully use the library with standard imports into the project, but when I attempt to load the library within the web worker, it stalls, even if the library itself isn't used. I have created a sandbox that shows this behavior. A couple other notes:

• In the worker.js file, the library is being imported. Commenting this out should allow the App.jsx to retrieve the result of the add function and display it (instead of null).
• The other stuff in App.jsx just confirms that the wasm-based library is indeed functioning within the non-webworker environment.
• I tried fiddling with the ordering of the various plugins, but couldn't get anything to work with that.

Is this something that is a limitation of the library, or could it be a configuration issue somewhere?
Thanks!

I know the regular syntax is Worker.prototype.terminate(), but I don't see anything like that for ComlinkWorker. Is there a way to terminate a ComlinkWorker?

In the example folder we have a vite project with multiple worker calls etc.

We should:

1. extend this to more examples also some with shared Workers.
2. create e2e tests with cypress to check if all examples work properly.
3. integrate that tests into github actions

You want to contribute to vite-plugin-comlink this issue is a good start (even if you didn't used e2e tests before).

Hello! Thanks for the plugin, but I'm having little problems, I'm confused. For some reason I don't have this global variable

Here is a reproduction of the error:
https://codesandbox.io/s/reverent-gould-joqelp?file=/src/main.js

Maybe I'm doing something wrong, but I sat in an attempt to understand what was going on for a long time, but I could not

According to GoogleChromeLabs/comlink#372, in order to terminate a worker before it has completed, we need to call worker.terminate() on the worker instance. Calling it on the proxy won't work.

This package generates code like:

const proxy = wrap(
            new Worker(
              new URL("/src/components/print/print-react/internal:comlink:./documents/campPrint/my-custom.worker.js?type=module&worker_file", self.location)
              , {type: "module"})
          )

This way, accessing the new Worker(...) part is not possible. I had a look at the Comlink code, and there does not seem to be an easy way to "unwrap" the proxy.

Do you see any easy way for this package to provide access to the worker instance instead of the proxy? Or at least a way to access the terminate method on the worker instance?

Currently 2.0.0-beta.1 will add a new line to the generated .d.ts on each invocation of vite. Looks like this is already been fixed by the commit, but is not included in any published package to npm yet.

Hi, I just found out about this plugin - amazing work!

I tried to integrate it in an app of mine, but to no avail, as it fails with the folllowing stacktrace:

App.tsx:10 Uncaught (in promise) ReferenceError: ComlinkWorker is not defined
    at initWorker (App.tsx:10:7)
    at App.tsx:21:5
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at react-dom.development.js:26769:9

I created a repo to reproduce the issue: https://github.com/neslinesli93/comlink-vite-reproducible. And here is the code that instantiates a worker.

These are the steps I followed to create the repo from scratch, it's the react-ts template of create-vite:

yarn create vite comlink-vite-reproducible --template react-ts
cd comlink-vite-reproducible
yarn
yarn add -D vite-plugin-comlink
yarn add comlink
yarn dev

Thank you for your time :)

Hi, I think this is possibly fixed on main already, but apparently version 3.0.5 of this plugin depends on json5 2.0.0 - 2.2.1, which is a "high severity vulnerability"? (npm audit fix --force causes this plugin to downgrade to 3.0.2, which is not ideal)

json5  2.0.0 - 2.2.1
Severity: high
Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/vite-plugin-comlink/node_modules/json5
  vite-plugin-comlink  >=3.0.3
  Depends on vulnerable versions of json5
  node_modules/vite-plugin-comlink

For example, on CI with a clean checkout that use vite-plugin-comlink, vite build directly won't work since vite doesn't generate the cacheDir in build and there's no previous run of vite dev that generates the cacheDir. But currently the typeSaveFile is always saved in the cacheDir.

This cause vite build to fail with:

[comlink] ENOENT: no such file or directory, open '<path>/node_modules/.vite/comlink.json'
error during build:
Error: ENOENT: no such file or directory, open '<path>/node_modules/.vite/comlink.json'
    at Object.openSync (node:fs:585:3)
    at writeFileSync (node:fs:2153:35)
    at writeTypeDefs (<path>/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-comlink/dist/index.js:77:33)
    at Object.buildEnd (<path>/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-comlink/dist/index.js:82:7)
    at <path>/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:20199:25
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
    at async rollupInternal (<path>/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:20956:9)
    at async doBuild (<path>/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-36bf480c.js:51091:24)
    at async build (<path>/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-36bf480c.js:50932:16)
 ELIFECYCLE  Command failed with exit code 1.

Possible solution:

• Don't generate .d.ts on build (I'm not sure if it's expected to have anything outside of dist changed when building)
• Create the cache directory by ourself if it doesn't exist.
• Don't write the typeSaveFile if the cacheDir doesn't exist.

(I'd prefer the first option.)

I need an inline worker, import my worker like this:

// use vite-plugin-worker  'worker-inline:'  and  vite-plugin-comlink  'comlink:./worker'

import myInlineWorker from 'worker-inline:comlink:./worker'

run vite build successfully , but in the bundle, It lose comlink wrap.

// only vite-plugin-worker resolved

function workerWrapper() {
  return new Worker((window.URL || window.webkitURL).createObjectURL(new Blob([atob("KGZ1bmN0aW9uK.......")], { type: "text/javascript;charset=utf-8" })), { "type": "classic" });
}

the link to vite-plugin-comlink source code

 // I debug here,  it shows realFile  =  'worker:comlink@worker:/src/worker.ts?entry_file'

    case "comlink@main:":
        return `
          import { wrap } from 'comlink'
          import createWorker from ${JSON.stringify(realFile)}

          export default () => wrap(new createWorker())
        `;

Why comlink failed? Did comlink be tree-shaked ?

look forward to your kind reply~

Issue demostrating:
const worker = new ComlinkWorker(...)
console.log(worker)gives Proxy:

In that worker I have exported function init(data){...}
if i will call this function:
const result = await worker.init(...),
it will stop there forever.

If i will remove await, and console.log(result) it will give me Promise

One more thing - even if i dont have function in worker, i can do next thing: worker.someFunctionThatDoesntExist(), it will return same Promise, as it was with existing function init(data){...}

Here is my vite.config.ts

Here is how i initialize worker:

Get the following warning when doing yarn dev.

Sourcemap for "comlink@worker:/src/export-result/convert-data.worker.ts" points to missing source files

I've managed to make it work after build, works great, but at runtime I constantly get ReferenceError: ComlinkWorker is not defined am I doing something work or it only works after app is built?
Thanx

Thanks for your awesome plugin.
But I meet with some problems. I use the comlink with 'new Worker()' except 'ComlinkWorker or ComlinkSharedWorker'. What is the other plugins to create ComlinkWorker or ComlinkSharedWorker?

1)Is there any way to transfer transferable objects in the message? (3rd argument of worker.postMessage(), https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage )

I transfer many of big Uint32Arrays, so it will be good to have this feature

2. Is there any way to terminate worker? https://developer.mozilla.org/en-US/docs/Web/API/Worker/terminate

The transform() function in the plugin returns the sourcemap generated from magic-string which is based on the source received as parameter. But when that source was previously transformed from another source (eg, is a .js file transpiled from a .ts file), the mapping to the original file is lost and the resulting sourcemap is broken from the overwritten line on.
That original mapping is available to the transform() function through the call this.getCombinedSourcemap().
As magic-string does not support generating the sourcemap starting from a previous one, then you would have to merge both sourcemaps using something like what is explained here.

Hi there,
i dont quite know if its an issue with the vite-plugin-comlink or if its something on my side.. maybe you have an idea to solve it:
i have a worker: clipperWorker.ts with this content:

import { clipper } from './clipper'
export const union = clipper.union

and try access it via:

const clipperWorker = new ComlinkWorker<typeof import('...[deleted].../src/helpers/clipperWorker')>(
  new URL('...[deleted].../src/helpers/clipperWorker.ts', import.meta.url)

const fromWorker = clipperWorker.union(xyz)

resulting in this errormessage from vite:

[plugin:vite:import-analysis] Failed to resolve import "C:/...[deleted].../src/helpers/clipperWorker.ts?type=module&worker_url_file" from "...[deleted]...\internal:comlink:appname\src\helpers\clipperWorker.ts?type=module&worker_url_file". Does the file exist?
C:/...[deleted].../src/feature/scenario/SVGfromMesh/internal:comlink:AppName/src/helpers/clipperWorker.ts:5:22
1  |  import '/@vite/env'
2  |  import { expose } from "comlink";
3  |  import * as api from "C:/...[deleted].../src/helpers/clipperWorker.ts?type=module&worker_url_file";
   |                        ^
4  |  expose(api);
5  |

this last line looks weird to me : clipperWorker.ts?type=module&worker_url_file is that correct? or does it try to get the import from a wrong place?

thanks a lot,

cheers

"vite-plugin-comlink": "^3.0.2",
`
const workerId = nanoid()

console.log(workerId)

const workerOpt = {
name: workerId
}

return new ComlinkWorker<typeof import('./imgInp.worker')>(new URL("./imgInp.worker.ts", import.meta.url), workerOpt);
when set workerOption like this, will cause this compile error down below
[vite] Internal server error: JSON5: invalid character 'w' at 1:1
Plugin: comlink
at syntaxError (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:861:15)
at invalidChar (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:824:10)
at literal (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:601:13)
at Object.value (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:223:9)
at lex (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:107:39)
at Object.parse2 [as parse] (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:73:13)
at workerReplacer (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:2063:38)
at String.replace ()
at TransformContext.transform (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite-plugin-comlink\dist\index.js:2081:14)
at Object.transform (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite\dist\node\chunks\dep-e1fc1d62.js:38961:53)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async doTransform (E:\WebStorm_JS_Workspace\storm-portal-next\node_modules\vite\dist\node\chunks\dep-e1fc1d62.js:55918:29)
`

I just released version 3. This is a complete rewrite using the new Worker and SharedWorker syntax.

Please update!

Migration-guide:

1. If you use vite-plugin-comlink with service-worker this will not work anymore so remove them please! If vite adds service-worker build support I will add it!
2. Remove vite-plugin-worker and vite-plugin-bundle
3. Update vite config.
4. Remove all options. Custom-config is no longer supported and tsfile is removed (how to use it with types see readme).
5. You can still run the "old" import syntax but that is deprecated and will be removed in version 4 (so you have some time to switch!!!)

The plugin will log some deprecation messages if you use syntax that will be removed.

With this release I stop maintaining vite-plugin-worker and vite-plugin-bundle as those where just workarounds for missing vite-features.

As title, looks like for some reason vite is using CommonJS modules for me.

failed to load config from <project>/vite.config.ts
error when starting dev server:
<project>/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-comlink/dist/index.js:1
import { readFileSync, writeFileSync, existsSync } from "fs";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (<project>/vite.config.ts:35:45)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.require.extensions.<computed> [as .ts] (<project>/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-36bf480c.js:77283:20)
 ELIFECYCLE  Command failed with exit code 1.

A quick fix is to change tsconfig.json to "module": "commonjs".

It might be helpful to build both cjs and esm for the npm package (similar to other vite plugins: https://github.com/antfu/vite-plugin-pwa/blob/main/scripts/commands.ts#L2).

1. How do I terminate the Web Worker when task is completed ?

2. This code is also not helping me.

import {releaseProxy} from 'comlink'

comlink[releaseProxy]()

3. In browser I can see the Web worker running in Sources Tab.

4. In documentation also there is no proper way to Close and Terminate.

Please me give proper way to close and Terminate Web worker once Task is completed.

5. Thanks for your Plugin @mathe42 its help me reduce the development time.

6. Kindly help me ASAP.

First off, thank you for making this!

I noticed in the installation section, your vite.config.js reads:

import comlink from 'vite-plugin-comlink'

In practice, I'm only able to get it to work with:

import { comlink } from 'vite-plugin-comlink'

Is this the intended behaviour?