Getting workerize-loader to work with nuxt

[dotnetCarpenter]

I'm at the end of a nuxt project and want to move some code into a web worker. I've tried to use worker-loader, but failed and was suggested (by @pi0) to give workerize-loader a shot.

Unfortunately, I'm blocked on an nuxt error. Below is the stack trace and after that, the code snippets from the stack trace I've dug up. code in the toCjs function appears to be undefined.

Nuxt error

  TypeError: e.replace is not a function

  - workerize.js:39
    [webviewer4]/[workerize]/dist/workerize.js:39:23

  - workerize.js:44 ModuleContainer.module.exports
    [webviewer4]/[workerize]/dist/workerize.js:44:4

  - module.js:162 Promise
    [webviewer4]/[nuxt]/lib/core/module.js:162:30

  - new Promise

  - module.js:146 ModuleContainer.addModule
    [webviewer4]/[nuxt]/lib/core/module.js:146:12

  - utils.js:96 promise.then
    [webviewer4]/[nuxt]/lib/common/utils.js:96:43

  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

  - module.js:686 Function.Module.runMain
    module.js:686:11

  - bootstrap_node.js:187 startup
    bootstrap_node.js:187:16

  - bootstrap_node.js:608
    bootstrap_node.js:608:3

I've tracked e.replace to ([workerize]/dist/workerize.js:39:23):

function toCjs(code, exportsObjName, exports) {
    code = code.replace(/^(\s*)export\s+default\s+/m, (s, before) => {
        exports.default = true;
        return `${before}${exportsObjName}.default=`;
    });
    code = code.replace(/^(\s*)export\s+((?:async\s*)?function(?:\s*\*)?|const|let|var)(\s+)([a-zA-Z$_][a-zA-Z0-9$_]*)/mg, (s, before, type, ws, name) => {
        exports[name] = true;
        return `${before}${exportsObjName}.${name}=${type}${ws}${name}`;
    });
    return `var ${exportsObjName}={};\n${code}\n${exportsObjName};`;
}

Which is called by ([nuxt]/lib/core/module.js:162:30):

// Call module with `this` context and pass options
const result = handler.call(this, options, cb)

What is in options, you ask? - an empty object. Do I need to setup something in my webpack configuration?

I've copied the example from this README

assets/js/shared/Loader.worker.js

export function expensive(time) {
  let start = Date.now(),
  ...
}

store/pages.js

import Worker from 'workerize-loader!~/assets/js/shared/Loader.worker.js'

const worker = new Worker
worker.expensive(1000).then(count => {
  console.log(`Ran ${count} loops`)
})

my nuxt.config.js, which setup webpack

module.exports = {
  modules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/font-awesome',
    'traits.js',
    'workerize'
  ],
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      // NOT WORKING! Web Worker support
      config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'workerize-loader' },
        exclude: /(node_modules)/
      })
    }
  }
}

[developit]

hmm - there's no need for the webpack configuration change. all you have to do is install workerize-loader and add the import prefix, nothing else is required.

[exarus]

@developit I think that is might be related to #32 I've commented the issue: https://github.com/developit/workerize-loader/issues/32#issuecomment-427312716

[dotnetCarpenter]

@developit and @exarus , I got worker-loader working and submitted an example to the nuxt project.

I no longer wish to use workerize-loader, so you can close this issue if you want.

[exarus]

@dotnetCarpenter thanks, I'm looking forward to switch to worker-loader too, thought workerize-loader doesn't cause too much trouble at this point of time.