Issue with webpack in production mode ( minification issue )

Question

I am working on this little project for Augmented Reality, ARnft it is based on a lighter version of Jsartoolkit5, JsartoolkitNFT for only NFT markers. The code follows the ES6 standard (partially) and use webpack as bundler. All is fine in development mode but when i go in production mode, the example stuck with this error:

05ff8846-4121-4380-86c3-9612f404732a:1 Uncaught SyntaxError: Function statements require a function name

It stop at the embedded Worker. The app don't enter inside because i otherwise i will receive some messages in the dev console. I Inject the Worker in a Blob object:

// create a Worker to handle loading of NFT marker and tracking of it
const workerBlob = new Blob(
  [workerRunner.toString().replace(/^function .+\{?|\}$/g, '')],
    { type: 'text/js-worker' }
  )
const workerBlobUrl = URL.createObjectURL(workerBlob)

worker = new Worker(workerBlobUrl)

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L207-L213

workerRunner defined at this line:

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L272

I think that is a minification issue i tried to add --optimize-minimize in the script:

"build-es6": "webpack --mode production --optimize-minimize",

, but not helped. How can i solve this?

Thank you

Answer 1

This issue can be solved with the worker-loader plugin.

Instead of inlining the worker in a Blob as explained in the question:

• create an external Worker.js and import in the file (in this case Utils.js):

import Worker from './Worker.js' 

• use the worker as usual:

let worker
// other code
worker = new Worker()
// other code with postMessage and onmesssage...

• in wepback.config.js

{
  test: /\worker\.js$/,
    use: {
      loader: 'worker-loader',
        options: { inline: true, fallback: false }
    }
}

You can also see this commit and the issue on webpack.