rollup-plugin-web-worker-loader
rollup-plugin-web-worker-loader copied to clipboard
Cannot read property 'search' of undefined
Hi,
I'm developing a JS library that assumes to be used into higher language projects such as Angular, React, Vue ... In this project I need to run a Web worker that's why I used your plugin to do so. I've managed to run it on multiple projects but not all
- ✅ Sample JS project that imports UMD file
- ✅ included into Angular Library consumed in an angular project
- ✅ included into Sample React app runned using
react-script start - 🔴 included into sample React app in prod mode (
build+serve -s build) - 🔴 included into sample Vue app
The error that occured is
Cannot read property 'search' of undefined
Located in
function funcToSource(fn, sourcemapArg) {
var sourcemap = sourcemapArg === undefined ? null : sourcemapArg;
var source = fn.toString();
var lines = source.split('\n');
lines.pop();
lines.shift();
var blankPrefixLength = lines[0].search(/\S/);
Here is what I digged from browser console
var WorkerFactory = createInlineWorkerFactory(/* rollup-plugin-web-worker-loader */function () {
(function () {
'__worker_loader_strict__';
self.addEventListener("message",(function(e){/*some_code*/}));
}());
}, 'data:application/json;charset=utf-8;base64,eyJ.....');
When I tried to use the content of createInlineWorkerFactory into the steps of funcToScope I achieved to get lines[0], making the error strange to me
Configuration
Dependencies
"rollup": "1.32.1","rollup-plugin-web-worker-loader": "^1.5.0",
Rollup
webWorkerLoader({
targetPlatform: 'browser',
sourceMap: !isProduction,
preserveSource: !isProduction,
pattern: /^(?!(?:[a-zA-Z]:)|\/).+\.worker\.js$/,
}),
Import and creation
import TokenWorker from './token.worker.js'
...
private worker?: Worker
...
if ('serviceWorker' in navigator) {
this.worker = new TokenWorker()
}
I tried a second test with setting inline: false in webWorkerLoader config, the error was gone but I got another one that told me the worker JS file included a < character because the content was my built html file.
I would like to know how to properly set your plugin to be compatible with a react and Vue projects.
Do not hesitate to ask more .
Thanks
Sorry for the late response. This seems like a bug on my side, would you be able to provide me with a small sample project of the bug? I am using this plugin in Vue with no issues.
I have same error when adding terser to build process. Here are the minimal changes needed to reproduce. https://github.com/AMerkuri/rollup-typescript-webworkers/commit/13e907ce9553be6b209bfe6d4f1dbbbde462511f#diff-6814bf77564b4f1c92f5861e184e28fe217c080a047fefa8b73a728f755ec45c
I've run into this issue as well. As a workaround, I've patched the funcToSource method to wrap the function as a function invocation, rather than extracting the function code. The results of funcToSource are evaluated in the worker anyways, so this is almost equivalent. Patch: https://github.com/Kitware/vtk-js/blob/16a07df4116d1409d0650139c21badd744de1402/Utilities/build/patches/rollup-plugin-web-worker-loader%2B1.6.1.patch
I'm not making this a PR yet, since the changed funcToSource no longer does what its name implies.