How to integrate Worker-load with antd pro?

Question

I would like to use web worker inside an "Antd Pro" project. I've tried different ways found on the net but none of them works.

"Antd Pro" is drived by Umijs framework who uses Webpack internally. The only way I found, for this purpose, is by using Chain Webpack.

By the way I'm using Typescript for this project.

Here is the config:

  config.module
    .rule('worker-loader')
    .enforce('pre')
    .test(/\.worker\.[t|j]s$/)
    .use('worker-loader')
    .loader('worker-loader')
    .options({
      inline: 'no-fallback',
    });

And I got this error :

 ERROR  Failed to compile with 1 errors                                                                                                                                      10:39:36 PM
 error  in ./src/pages/exp/Camera/MediaStreamAdapter.worker.ts

Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\webpack\lib\javascript\ArrayPushCallbackChunkFormatPlugin.js:29:19
    at SyncHook.eval (eval at create (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:1)
    at SyncHook.lazyCompileHook (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.newCompilation (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\@umijs\bundler-webpack\node_modules\webpack\lib\Compiler.js:630:30)
    at C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\@umijs\bundler-webpack\node_modules\webpack\lib\Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)      
    at AsyncSeriesHook.lazyCompileHook (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\@umijs\bundler-webpack\node_modules\webpack\lib\Compiler.js:662:28)
    at Compiler.runAsChild (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\@umijs\bundler-webpack\node_modules\webpack\lib\Compiler.js:328:8)
    at runAsChild (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\worker-loader\dist\supportWebpack4.js:11:26)
    at Object.pitch (C:\Users\moujar\Documents\ecomrepo\i.sale.desktop\node_modules\worker-loader\dist\index.js:97:34)

If you're using `webpack@5.x` worker-loader isn't needed anymore I think. — Slbox, Mar 10 '21 at 21:55

How to integrate Worker-load with antd pro?

0 Answers0