andywer / threads.js

🧵 Make web workers & worker threads as simple as a function call.
https://threads.js.org/
MIT License
3.04k stars 161 forks source link

No instantiations of threads.js workers found in TypeScript/Webpack setup #466

Open ChapterSevenSeeds opened 1 year ago

ChapterSevenSeeds commented 1 year ago

Hello. I am working on an Electron app that uses TypeScript with Webpack and I recently installed threads.js. I followed the instructions on configuring TypeScript and Webpack and I keep getting this warning from webpack:

WARNING in No instantiations of threads.js workers found.
Please check that:
  1. You have configured Babel / TypeScript to not transpile ES modules
  2. You import `Worker` from `threads` where you use it

If I attempt to run the resulting bundle via Node.js, I get an exception saying that the thread script doesn't exist (which it doesn't since it isn't being bundled). I primarily use Node.js v19.5.0 but I also tested this with v18.0.0 and v16.0.0 and all gave me the same result.

I created a minimal example that reproduces the issue in full. Here are all my files.

src/index.ts

import { spawn, Thread, Worker } from "threads";
import { Stuff } from "./stuff";

(async () => {
    const stuffThread = await spawn<Stuff>(new Worker("./stuff"));

    console.log(await stuffThread.go());

    await Thread.terminate(stuffThread);
})();

src/stuff.ts

import { expose } from "threads/worker";

const stuff = {
    go: async () => {
        return 3;
    },
};

export type Stuff = typeof stuff;

expose(stuff);

webpack.config.js

const path = require("path");
const ThreadsPlugin = require('threads-plugin');

module.exports = {
    target: "electron22.2-main",
    entry: {
        main: "./src/index.ts"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader",
                exclude: /node_modules/,
                options: {
                    configFile: "tsconfig.json"
                }
            }
        ]
    },
    resolve: {
        extensions: [
            ".tsx",
            ".ts",
            ".js"
        ]
    },
    plugins: [
        new ThreadsPlugin()
    ]
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "module": "ESNext",
        "lib": [
            "ESNext",
        ],
        "moduleResolution": "node"
    }
}

package.json

{
    "scripts": {
        "build": "webpack"
    },
    "dependencies": {
        "@babel/types": "^7.21.2",
        "threads": "^1.7.0",
        "threads-plugin": "^1.4.0",
        "ts-loader": "^9.4.2",
        "typescript": "^4.9.5",
        "webpack": "^5.76.0"
    },
    "devDependencies": {
        "webpack-cli": "^5.0.1"
    }
}
digable1 commented 1 year ago

I had this issue for a while. And then it went away - and of course I don't remember exactly what was different (sorry)!

But: I may have a clue if memory serves me well.

  1. I remember my module declaration in tsconfig.json was 'es6'.
  2. This documentation for typescript specified'esnext' in for Typescript in the webpack.config.js section - https://threads.js.org/getting-started#when-using-typescript
  3. I changed tsconfig.config.js to match - 'esnext'

This may have been when the problem went away. YMMV (I was focused on the mismatched Mime type, https://github.com/andywer/threads.js/issues/387, so didn't pay attention to this one once it was no longer happening).

Good luck!