Use inline options in typescript

[lianghx-319]

For typescript

I should declare my own module like this.

declare module 'worker-loader!*' {
  class WebpackWorker extends Worker {
    constructor();
  }
  export default WebpackWorker;
}

For inline worker

I should set the inline option, but if module declare start with worker-loader!, it like to override my webpack config with no options after worker-loader

The result

In typescript, inline option in webpack config not work, I mush set inline option on the path after loader

Expected

A solution that, typescript can detect the WebpackWorker and I can config the worker-loader in webpack config not write a query string when importing.

[alexander-akait]

typescript declarations doesn't change webpack options, you can pass the 'inline' option using query string !!webpack-loader?inline=fallback!./my.worker.js

[lianghx-319]

typescript declarations doesn't change webpack options, you can pass the 'inline' option using query string !!webpack-loader?inline=fallback!./my.worker.js

because I declared worker-loader!*, so TS can find WebpackWorker only if I import like import Worker from 'worker-loader!myWorker.ts', and When I import like that, webpack config not work. So every time I want to change the option, I have to modify the declare and the import path.

[alexander-akait]

I don't understand you, please create simple reproducible test repo and describe problems in readme

[yar2001]

I don't understand you, please create simple reproducible test repo and describe problems in readme

Meet this problem too. We are using the typescript example from the doc, while if we follow the procedure, the options in webpack seem invalid. For instance, I want inline option but it didn't work as expected. The webpack config is as follow.

      {
        test: /worker\.ts$/,
        loader: 'worker-loader',
        options: {
          filename: 'JayWorker.js',
          inline: 'no-fallback',
        }
      },
      {
        test: /\.tsx?$/,
        use: [
          { loader: 'ts-loader' }
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules'),
        ],
      }

It will be so nice if you can give the doc more details about Typescript development? Thank a lot!

[mikechabot]

@alexander-akait Your suggestion is unfortunately not working

This import works correctly with the typings noted here: https://github.com/webpack-contrib/worker-loader#integrating-with-typescript, however once bundled, you'll hit a cross-origin restriction.

import MyWorker from 'worker-loader!./my.worker';

Per the documentation, the solution is to use the inline fallback, but since we cannot use the worker-loader directly in the rules array of webpack.config.js, we must use the import syntax. However, doing so fails:

import MyWorker from 'worker-loader?inline=fallback!./my.worker';

>> S2307: Cannot find module 'worker-loader?inline=fallback!./my.worker' or its corresponding type declarations.

Is there any solution to using typescript workers, while also using fallback inline to address the cross-origin issue?

[mikechabot]

@alexander-akait @lianghx-319 @yar2001 Okay, not sure how I didn't see this before. To get this to compile update your typings to the following note the change from 'worker-loader!*' to 'worker-loader*'

declare module 'worker-loader*' {
  class WebpackWorker extends Worker {
    constructor();
  }

  export default WebpackWorker;
}

[kalwalt]

@mikechabot i followed your suggestions and worked perfectly, if someone have the same issue take a look at this https://github.com/webarkit/ARnft/pull/167#issuecomment-821552693

[stoplion]

Docs on how to use worker-loader with Typescript / Webpack configs (no inline) would be useful. Just a wild thought...

[kalwalt]

Docs on how to use worker-loader with Typescript / Webpack configs (no inline) would be useful. Just a wild thought...

i agree with you it will save so much time!

[alexander-akait]

Feel free to send a fix in our docs to help our developers