Pass params to inline import of webpack loader

Question

I have a non-ejected create-react-app (react-scripts v3.4.3) and Typescript application that I am trying to use web workers in. I was able to get the worker bundled with workerize-loader using the following import statement:

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader!./worker';

The issue is I need to change the publicPath property for the loader without ejecting from create-react-app so I tried adding query parameters as mentioned by the webpack documentation for inline loaders:

Options can be passed with a query parameter, e.g. ?key=value&foo=bar, or a JSON object, e.g. ?{"key":"value","foo":"bar"}

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader?publicPath="path/to/js/"!./worker';

I've tried both ways but both return the same Typescript compiler error of "Cannot find module..."

Are the query params mentioned in the webpack docs only meant for use in the module.rules property in webpack.config.js?

Answer 1

The issue was actually not related to Webpack at all but was a Typescript issue.

I am not sure if this is totally correct, but I will leave my solution for those trying to get workerize-loader working with create-react-app and Typescript.

I combined instructions from worker-loader with Typescript and using the publicPath option (though not documented but in the src) of workerize-loader.

In my module declaration file I just declared the module with the publicPath value and then when I import the worker module I match the declaration. Assume these files are all located under a directory called src/worker. The last file shows how to invoke the worker method.

src/worker/custom.d.ts

declare module 'workerize-loader?publicPath=new/public/path/!*' {
  class WebpackWorker extends Worker {
    constructor();

    // Add any custom functions to this class.
    // Make note that the return type needs to be wrapped in a promise.
    
    someLongOperation(): Promise<string>;
  }

  export = WebpackWorker;
}

src/worker/index.ts

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader?publicPath=new/public/path!./worker';

export default Worker;

src/worker/worker.ts

export function someLongOperation(): string {
  // doing long lasting operation
  // ...

  return 'result of long operation';
}

src/someService.ts

import Worker from 'src/worker';

...

const myWorker = new Worker();
cosnt workerResult = await myWorker.someLongOperation();