loader worker-plugin/loader is not found by webpack

[stephanemagnenat]

Using worker-plugin version 4.0.2, and trying to use the worker-plugin/loader syntax, I get the following error in Webpack:

ERROR in /home/steph/data/enlightware/game-creator/src/blocks/actions/music/music.ts
./src/blocks/actions/music/music.ts
[tsl] ERROR in /home/steph/data/enlightware/game-creator/src/blocks/actions/music/music.ts(18,29)
      TS2307: Cannot find module 'worker-plugin/loader!./music.worklet'.

is the line:

import musicWorkletURL from 'worker-plugin/loader!./music.worklet';

The file music.ts imports the worker music.worklet.ts.

I am using Webpack 4.42 and Typescript 3.8.3 (both latest).

While my configuration files have nothing exotic IMHO, I am aware that this problem still is likely the result of a complex interaction between Webpack and Typescript, and I will produce a minimal test case as soon as possible. I still post the issue already in case someone else meets the same problem.

[developit]

@stephanemagnenat TypeScript doesn't allow loader syntax in imports - I'd recommend using Webpack configuration to apply the loader instead:

module.exports = {
  module: {
    rules: [
      {
        test: /\.worklet\.(js|ts)x?$/,
        loader: 'worker-plugin/loader'
      }
    ]
  }
}

With the above in your Webpack configuration, you should be able to do:

import musicWorkletURL from './music.worklet';

I'm not aware of any clean way to specify types for this, so I'd recommend casting the value to a String.

[stephanemagnenat]

Thank you for your answer! I am using Webpack actually. I also tried the option you propose before posting the issue, but then Webpack crashed at startup due to the node VM exhausting its memory. It seems that in my configuration, something triggers an infinite loop in Webpack when using a rule with the worker-plugin (but not with other plugins), and a non-detection when using the loader syntax in imports. So I see no other way to find the source of the issue than to make a minimal test case, and if the latter works, to bisect between it and my configuration until the problem appears. Of course it would take some time, that is why I did not do it yet.

[developit]

@stephanemagnenat Sounds tricky. A reproduction would be super helpful as you mentioned.

In the meantime, I think one way to work around this would be to configure the loader so that it only runs in your main compiler, not any compilers spawned by worker-plugin or things like html-webpack-plugin. That would look something like this:

module.exports = {
  name: 'main',  // if you don't have this already. must match the Rule below
  module: {
    rules: [
      (info) => ({
        test: /\.worklet\.(js|ts)x?$/,
        // only apply to main compilation:
        include: () => info.compiler === 'main',
        loader: 'worker-plugin/loader'
      })
    ]
  }
}

[developit]

@stephanemagnenat any chance this issue went away? I noticed that the original issue was filed on May 11th, which is only one day after I released a hotfix that added loader.js to the npm bundle (it was missing in 4.0.0 and 4.0.1). Would be good to check npm ls worker-plugin for the installed version (regardless of the package.json value).

[stephanemagnenat]

I am positive I used the very-up-to-date version by then loader.js was in the npm bundle. I did not find time to create a minimal reproducible test case, because as I said the issue is not trivial but also because in between I changed my design not to use a worklet. I can try to have another look tomorrow.

[hunyoboy]

I'm still experiencing this crash issue. Using the webpack configuration and doing the direct import of worker file. I'm using latest 4.0.3.

[developit]

I think I know what is causing the crash, will try to reproduce so I can add a fix.

[charsleysa]

@developit has there been any progress on this?

[developit]

I haven't been able to reproduce the issue. If anyone has a reproduction I can look at, that would be helpful.