Cannot read property 'search' of undefined

tuxtux59 commented 3 years ago

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

darionco commented 3 years ago

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.

AMerkuri commented 3 years ago

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

floryst commented 2 years ago

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.

darionco / rollup-plugin-web-worker-loader