threads.js

threads.js copied to clipboard

I'm trying to incorporate threads into a large existing Vue / Quasar app. So far, I've installed threads and threads-plugin, and set up the hello world example from the docs. My app calls a function testWorker():

import { spawn, Thread, Worker } from "threads"
const testWorker = async () => {
  const add = await spawn(new Worker('./test-worker.js'))
  const sum = await add(2, 3)
  await Thread.terminate(add)
  return sum
}

and test-worker is just:

import { expose } from "threads/worker"

expose(function add(a, b) {
  return a + b
})

The console error is:

 TypeError: _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0___default.a is undefined 0.worker.js line 227 > eval:9:16
    <anonymous> webpack-internal:///./node_modules/threads/worker.mjs:9

The webpack / babel setup for Vue / Quasar is quite complex, and I think I've added things where they should be (mainly, just added the webpack plugin at the appropriate point in the webpack config). I tried setting the plugin target to web and webworker, but the error is unchanged. The Babel modules option is false in the Quasar framework setup I believe, and I tried adding the setting like this in babel.config.js—again, no change in the error:

module.exports = {
  presets: [
    ['@quasar/babel-preset-app', { modules: false }]
  ]
}

I'm assuming this is a configuration issue—any clues as to where to start digging further?

Hey @dsl101.

I wish I could be more helpful, but those webpack issues, esp. in very complex setups, are just so hard to debug. I don't have an idea off the top of my head, but I have an idea I will let you know.

Please also keep us posted here, no matter how it ends.

PS: Maybe someone from the community sees this and has an idea? 😉

Thanks Andy—I will ask in the Vue & Quasar communities and, and definitely update here if I find anything.

On Fri, 18 Jun 2021 at 23:27, Andy Wermke @.***> wrote:

Hey @dsl101 https://github.com/dsl101.

I wish I could be more helpful, but those webpack issues, esp. in very complex setups, are just so hard to debug. I don't have an idea off the top of my head, but I have an idea I will let you know.

Please also keep us posted here, no matter how it ends.

PS: Maybe someone from the community sees this and has an idea? 😉

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/andywer/threads.js/issues/381#issuecomment-864302400, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAG33PVXA4TL6AUQU5UJS73TTPB5RANCNFSM463HRVGQ .

Hmm. No luck so far with Vue or Quasar community. I did add some extra logging to see if the exact point of failure sheds any light. It looks like it's in the call to spawn():

      console.log('Worker:')
      console.log(Worker)
      const w = new Worker('../test-worker.js')
      console.log('new Worker():')
      console.log(w)

      console.log('spawn:')
      console.log(spawn)
      const add = await spawn(w)
      console.log('spawn():')
      console.log(add)

I also tried changing the webpack and babel settings away from those recommended, to check that the expected errors were triggered—for example, removing the plugin from the webpack configuration causes an http request looking for test-worker.js, which I guess shows the native Worker is being used. Adding it back causes no such request, so it looks like the plugin is being called. I also added some logging into the plugin code, and can see it finds and converts the source code.

In the FF debugger, I can also see this in the sources panel:

This is my test-worker.js:

import { expose } from "threads/worker"

expose(function add(a, b) {
  return a + b
})

and in 1.worker.js I can see that source / function in the section starting at line 89:

/***/ "./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib/index.js?!./src/test-worker.js":
/*!************************************************************************************************************************************************!*\
  !*** ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib??ref--2-0!./src/test-worker.js ***!
  \************************************************************************************************************************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var threads_worker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! threads/worker */ \"./node_modules/threads/worker.mjs\");\n\nObject(threads_worker__WEBPACK_IMPORTED_MODULE_0__[\"expose\"])(function add(a, b) {\n  return a + b;\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvQHF1YXNhci9hcHAvbGliL3dlYnBhY2svbG9hZGVyLnRyYW5zZm9ybS1xdWFzYXItaW1wb3J0cy5qcyEuL25vZGVfbW9kdWxlcy9iYWJlbC1sb2FkZXIvbGliL2luZGV4LmpzPyEuL3NyYy90ZXN0LXdvcmtlci5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy90ZXN0LXdvcmtlci5qcz9mMDg1Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGV4cG9zZSB9IGZyb20gXCJ0aHJlYWRzL3dvcmtlclwiXHJcblxyXG5leHBvc2UoZnVuY3Rpb24gYWRkKGEsIGIpIHtcclxuICByZXR1cm4gYSArIGJcclxufSlcclxuIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFFQTtBQUNBO0FBREEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib/index.js?!./src/test-worker.js\n");

/***/ }),

Near the very end of that file is this section, which is the only place I can find a reference to _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0___default.a:

/***/ "./node_modules/threads/worker.mjs":
/*!*****************************************!*\
  !*** ./node_modules/threads/worker.mjs ***!
  \*****************************************/
/*! exports provided: expose, registerSerializer, Transfer */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"expose\", function() { return expose; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"registerSerializer\", function() { return registerSerializer; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Transfer\", function() { return Transfer; });\n/* harmony import */ var _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dist/worker/index.js */ \"./node_modules/threads/dist/worker/index.js\");\n/* harmony import */ var _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0__);\n\n\nconst expose = _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0___default.a.expose\nconst registerSerializer = _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0___default.a.registerSerializer\nconst Transfer = _dist_worker_index_js__WEBPACK_IMPORTED_MODULE_0___default.a.Transfer\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdGhyZWFkcy93b3JrZXIubWpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vbm9kZV9tb2R1bGVzL3RocmVhZHMvd29ya2VyLm1qcz83YmY1Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBXb3JrZXJDb250ZXh0IGZyb20gXCIuL2Rpc3Qvd29ya2VyL2luZGV4LmpzXCJcblxuZXhwb3J0IGNvbnN0IGV4cG9zZSA9IFdvcmtlckNvbnRleHQuZXhwb3NlXG5leHBvcnQgY29uc3QgcmVnaXN0ZXJTZXJpYWxpemVyID0gV29ya2VyQ29udGV4dC5yZWdpc3RlclNlcmlhbGl6ZXJcbmV4cG9ydCBjb25zdCBUcmFuc2ZlciA9IFdvcmtlckNvbnRleHQuVHJhbnNmZXJcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/threads/worker.mjs\n");

/***/ })

Is there anything in this lot that looks like a good place to start to help identify the problem?