rollup-plugin-web-worker-loader icon indicating copy to clipboard operation
rollup-plugin-web-worker-loader copied to clipboard

Cannot read property 'search' of undefined

Open tuxtux59 opened this issue 4 years ago • 3 comments

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

tuxtux59 avatar Mar 17 '21 12:03 tuxtux59

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.

darionco avatar May 31 '21 03:05 darionco

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

AMerkuri avatar Jul 07 '21 14:07 AMerkuri

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.

floryst avatar Apr 11 '22 19:04 floryst