Babel-loader and typescript

[yovanoc]

Actually I have these configs and it does not work, so can you tell me what I'm doing wrong (of course I have "module": "ESNext", in my tsconfig) big thanks

const { join } = require("path");
const { BannerPlugin } = require("webpack");
const ThreadsPlugin = require('threads-plugin');

module.exports = {
  mode: "production",
  devtool: "source-map",
  entry: {
    main: "./src/index.ts"
  },
  output: {
    path: join(__dirname, "lib"),
    filename: "index.js",
    library: "secrecy",
    libraryTarget: "umd"
  },
  target: "web",
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    fallback: {
      crypto: false,
      path: false
    }
  },
  module: {
    rules: [{ test: /\.tsx?$/, loader: "babel-loader" }]
  },
  plugins: [
    new ThreadsPlugin(),
    new BannerPlugin({
      entryOnly: true,
      raw: true,
      banner: 'typeof window !== "undefined" &&'
    }) // SSR/Node.js guard
  ]
};

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false,
        "targets": "defaults"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

[andywer]

Hey @yovanoc. What does not work / what error do you see? 😉

[yovanoc]

I got this warning:

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

And when call a method, the main thread timeout in 10 sec.

I think it is related to single js final build, or idk, babel-preset-typescript maybe, because i can't change like ts-loader the compiler options

[andywer]

Really hard to tell from here. Can you share the code where you import spawn and where you instantiate a new Worker()?

[yovanoc]

I think the code is correct, its configuration things

[andywer]

Yep, code looks alright. I think the Babel config is the trouble maker here:

"@babel/preset-env",
  {
    (…)
    "modules": false,

Babel will transpile the modules away and the threads-plugin can then no longer identify the import statement that doesn't exist anymore.

[andywer]

Any reason not to do "modules": true? Webpack should be able to resolve everything just fine.

[yovanoc]

From the readme

[andywer]

Ahh, sorry. Nevermind. I confused the semantics of the setting…

[yovanoc]

Yeah I'm so confused too... I've done settings all day and no way to get this working :/

[FoxelFox]

I am getting this too when I try to update all my dependencies for my project.
https://github.com/FoxelFox/voxel-octree

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

For more details see: https://github.com/andywer/threads-plugin


ERROR in ./src/index.ts 12:0-45
Module not found: Error: Package path ./dist is not exported from package /Users/fox/coding/voxel-octree/node_modules/threads (see exports field in /Users/fox/coding/voxel-octree/node_modules/threads/package.json)

webpack 5.15.0 compiled with 1 error and 1 warning in 2885 ms

[eranimo]

Same problem. Warning always there after upgrading. Using Webpack 5.

[andywer]

@FoxelFox @eranimo This happens only after upgrading to webpack 5 and you are using threads-plugin v1.4.0?

If so, can you try going back to webpack 4 for a moment, but use the latest threads-plugin v1.4.0 and check if that works? All that would be super helpful information 👍

[FoxelFox]

Yes this happens only with webpack 5 and i am using threads-plugin v1.4.0.
I will stick with 4 for a moment.

[marekgregor]

I have spent several days looking for solution with webpack 5(babel+typescript+react) and finally found workaround:

1. firstly add register import in entry module:
   import "threads/register"
2. Leave the plugin configuration in webpack plugins (Warning message will be still shown but it doesn't matter):
   plugins: [ new ThreadsPlugin({globalObject: 'self'}),]
3. Initialize the worker code (pdfExport.ts in this case) in the following way in code:

import {spawn, Thread, Worker} from "threads" 
// @ts-ignore
import pdfExportUrl from "threads-plugin/dist/loader?name=pdfExport!./worker/pdfExport.ts"

...
const pdfExport = await spawn(new Worker(pdfExportUrl));
const pdfContent = await pdfExport (data);
await Thread.terminate(pdfExport );

[andywer]

You don't need the threads-plugin at all with webpack 5 (see #37). Will update the docs accordingly!

Nevertheless, thanks for sharing your findings here 👍

[theogravity]

Also having problems with this on webpack 5.10.

Using the following babel presets:

  return {
    presets: ['@babel/preset-typescript', ['@babel/preset-env', {
      // https://github.com/andywer/threads-plugin
      modules: false
    }], '@babel/preset-react'],
    plugins: runPlugins,
  };

Tried with and without using the plugin, also tried the import.meta.url method.