Incompatible with @rollup/plugin-alias

[ghost]

The webworker plugin works fine without any configuration.

However, upon adding the separate alias plugin to my rollup.config.js, I see this error when executing the command `rollup -c -w"

[!] Error: 'Engine' is not exported by src/script.js, imported by src/ui/store.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/ui/store.js (1:9)
1: import Engine from 'web-worker:../script.js';

My aliases look like:

alias({
            entries: [
                { find: 'src', replacement: './src/' },
                { find: 'scripts', replacement: './src/scripts' },
                { find: 'engine', replacement: './src/engine' },
                { find: 'ui', replacement: './src/ui' }
            ]
        }),

Any idea what could be causing it?

[darionco]

Could you confirm that the error is with @rollup/plugin-alias and not with running in watch mode? I am looking at #29 and seems like the error could come from using -w

[Temetra]

Try using a custom alias rule for webworkers - something like this:

{ find: /web-worker:@(.*)/, replacement: "web-worker:" + path.resolve(__dirname, "src/$1") }

Here I'm using @/ as an alias for src/, but the key is to replace just the path component instead of the entire thing. If you're using Typescript you'll need to enable its own aliasing, and have two separate rules for everything else:

alias({
    entries: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
    customResolver: resolve({ extensions: [".svelte", ".svg", ".scss"] })
}),

alias({
    entries: [{ find: /web-worker:@(.*)/, replacement: "web-worker:" + path.resolve(__dirname, "src/$1") }],
}),

[darionco]

ok, after looking at this closely, the problem is the pattern used by the plugin to load workers. To solve your issue you can use the solution that @Temetra suggested or you could change the pattern that the plugin uses:

webWorkerLoader({
    pattern: /..+\.worker(?:\.(?:js|ts))?$/,
}),

with that pattern, the plugin will load any file with the extension *.worker.js or *.worker.ts and can be imported as:

// full extension
import MyWorker from 'src/MyWorker.worker.js';
// without the last part of the extension (configurable thorugh the `extensions` option)
import MyWorker from 'src/MyWorker.worker';