postMessage is not a function

[bfang711]

I met the error

Uncaught TypeError: worker.postMessage is not a function ...

Can you please figure out why I get this error?

Here is my code.

import Worker from 'worker-plugin';

const worker = new Worker('./worker.jsx'); worker.onmessage = event=>{ console.log("WORKER response: ",event.data); }; worker.postMessage(0); //this is the LINE the error complains about.

where worker.jsx is like following.

addEventListener('message',function(e){ postMessage("123 123 abc abc"); });

[developit]

This is likely related to your webpack configuration. How did you add worker-plugin?

[bfang711]

I got this one resolved. Since I use react-scripts, I need to manually add

const WorkerPlugin = require('worker-plugin'); plugins: [ new WorkerPlugin(),

into the node_modules/react-scripts/config/webpack.config.js, so that npm run start can work with web worker.

and in the worker.js file, I need to use onmessage = function(e){.....}; I tried the other way shown in the git, but this is the only way it can be compiled.

Thank you anyway.

[gvNN7]

Hi, i'm trying to use this package but i'm getting the same error, but i'm not using react-scripts

This is my webpack-config.js file :

const path = require('path');
const WorkerPlugin = require('worker-plugin');
const SRC_DIR = path.join(__dirname, 'src');
const APP_DIR = path.join(__dirname, 'app');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
  {
    target: 'electron-renderer',
    mode: 'development',
    node: {
      __dirname: false,
      __filename: false,
      fs: 'empty'
    },
    entry: [
      path.join(SRC_DIR, 'index.js'),
    ],
    output: {
      path: APP_DIR,
      publicPath: APP_DIR,
      filename: 'bundle.js',
      libraryTarget: 'commonjs2',
    },
    plugins: [
      new WorkerPlugin({
        preserveTypeModule: true,
      })
    ],
    module: {
      rules: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: ['react', "es2015"],
            plugins: [
              "transform-class-properties",
              ["import", { "libraryName": "antd", "style": "css" }],
            ]
          },
        },
        {
          test: /\.ts$/,
          loader: "ts-loader",
          options: {
            compilerOptions: {
              module: "esnext"
            }
          }
        },
        { 
          test: /\.css$/,
          use: ['style-loader','css-loader']
        },
        {
          test: /\.(jpe?g|png|gif)$/,
          use: [{ loader: 'file-loader?name=/img/[name]__[hash:base64:5].[ext]' }],
          include: SRC_DIR
        },
      ],
    },
    externals: [
      'electron',
      'fs',
      'sqlite3',
      'pg',
      'tedious', 
      'pg-hstore', 
      'mariadb',
      'mysql2',
      'node-fetch',
      'rxjs',
    ],
    resolve: {
      extensions: ['.js', '.jsx', 'ts'],
      mainFields: ["main"],
    },
    devServer: {
      historyApiFallback: true,
      contentBase: APP_DIR,
    },
  },
  {
    entry: {
      style: './stylesheets/index.scss',
    },
    output: {
      path: APP_DIR,
      publicPath: '/',
      filename: 'bundle.css',
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }),
        },
      ],
    },
    plugins: [
      new ExtractTextPlugin('bundle.css'),
    ],
  },
];

and my code is the same as mentioned above,

const worker = new Worker('./worker.js', { type: 'module'});

worker.onmessage = event=>{
    console.log("EVENT DATA FROM WORKER:  ",event.data);
};
worker.postMessage(0); //Throws error

worker,js file

addEventListener('message', event => {
  postMessage("TESTE");
});

the worker file it only get's bundled if i don't use any import or require, like below

import Worker from 'worker-plugin'; or const Worker = require('worker-plugin')

And after the bundle finish, i get this error on Electron:

Otherwise, if i use ( import or require ), i got this error:

this.worker.postMessage is not a function

I'm already tried downgrade Electron, and Webpack versions but the errors keeps the same. Can you give me some hint ? I am missing something on my webpack config file ?

In this project i'm using the following: Electron: 9.0.0 React: 16.13.1 Webpack: 4.43.0

Thanks in advance.