Cannot load worker module unless the worker.js is under public/.

[bfang711]

I would like put my worker.js under the same src/ directory as main.js, which loads worker. (src/ is parallel to public/) However I got the following error if worker.js is under src/.
//in main.js
let worker = new Worker('./worker.js', {type:"module"});

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

However if I put worker.js under public/, or any directory under public/, everything works fine. Seems like it can only load from public/ aka. http://<my domain>/ , if it is under any directory parallel to public/, then it cannot find it. am I right on this?

Plus, in worker.js, I cannot import any thing in node_modules/ like what I do for other js files in src/.

thanks.

[developit]

Hi @bfang711 - from what you described, it's clear worker-plugin is not actually being applied. Can you explain how you installed the plugin, or post your Webpack config?

[bfang711]

Yes. of course.
The whole script was being generated from create-react-app. then I use npm to install worker-plugin and follow the instruction documentation to modfiy the webpack config.
Here is my webpack config.

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

//var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');
const WorkerPlugin = require('worker-plugin');

module.exports = {
    //mode: 'production',
    mode: process.env.NODE_ENV || "development",
    plugins: [new HtmlWebpackPlugin(), new WorkerPlugin(globalObject: 'self')],
    entry: './src/index.js',
    target: 'node',
    output: {
        path: path.resolve('dist'),
	filename: '[name].bundle.js',
	chunkFilename: '[name].bundle.js',
    },
    resolve: {
        extensions: ['.jsx','.js']
    },
    module: {
	rules: [
	    {
		test: /\.jsx?$/,
		loader: 'babel-loader',
		exclude: /node_modules/,
		query: {
		    cacheDirectory: true,
		    presets: ['react', 'es2015','stage-3']
		}
	    }
	]
    },
    devServer: {
        historyApiFallback: true
    }
}

Many thanks.

[developit]

-  plugins: [new HtmlWebpackPlugin(), new WorkerPlugin(globalObject: 'self')],
+  plugins: [new HtmlWebpackPlugin(), new WorkerPlugin({ globalObject: 'self' })],

[bfang711]

hi Jason,

Thank you for your prompt response. I changed it, however still the same issue. Any other clue what can cause the issue?

thank you.

[bfang711]

hi Jason,

I think the issue should be with the latest build. I tried the same setup in one of my old project (about 1.5 year ago), with old build. Everything runs well. No error. However when I open a new project and install only the latest react, react-dom, react-scripts and worker-plugin, with the above mentioned webpack config file, I encounter the issue. I even tried to downgrade the builds of the packages to match my old project, however still no luck. Probably there are some dependencies being updated as well, which triggers that error.

I simplify the webpack config to the following.

var path = require('path');
const WorkerPlugin = require('worker-plugin');

module.exports = {
    mode: 'development',
    plugins: [new WorkerPlugin()],
    entry: './src/index.js',
    target: 'node',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.jsx','.js']
    }
}

I actually don't think my worker js script got bundled properly, because it tried to look for http://xx.xx.xx.xx:port/workers/worker.js file. see below.

If you need more information to resolve this issue, please feel free to let me know.

thank you very much.

[developit]

Ah - I see the problem now: you're telling Webpack to bundle for Nodejs via target:"node" - that won't work with worker-plugin. Any reason you're trying to bundle with that option enabled?

Here's a setup with the information provided - it works in both dev and prod modes, as long as target:node is removed:
https://gist.github.com/developit/661932b006d32769238cfea71333ce48

[developit]

I marked as invalid for now, but please let me know what happens with your build. I actually was under the impression target:node was supported by this plugin, so I'll have to dig into that (though target:node in Webpack does not support publicPath at all).

[bfang711]

hi. Jason
I tried to comment out target:node from webpack.config.js. Still same issue.
Then I tried to use your webpack.config.js to replace mine totally. Still same issue.
The only thing I noticed now is that you use "webpack -p" directly when you build. However I am using react-scripts build and react-scripts start. I've been trying to play around with your example to match what I have now to see which exactly caused the issue.

Do you think react-scripts could be the issue here?
thank you.

[developit]

Oh, yes. react-scripts actually doesn't use webpack.config.js at all, it will be completely ignored. You need to eject from create-react-app in order to use custom webpack configuration.

That explains why WorkerPlugin wasn't running, your configuration wasn't actually being used! I'm going to close this one out since it's not related to the plugin, but I hope you're able to eject and get it working!

[bfang711]

Hi, Jason, Here is what I did. I npm install react-scripts on your given example, and added in a simple public/index.html as it needed. Then same issue popped up. Then I followed your instructions to do "npm run eject", which basically running react-scripts eject, and re compile. However still the same issue. Do you by any chance know how to fix this or any suggestions? (Actually all I need is to use react in my website, and of course worker-plugin) thank you so much. Jason Miller <notifications@github.com> 于2020年5月2日周六 下午10:57写道：

…

Closed #69 <#69>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#69 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADEH6IELAENYYHOD6FOTMK3RPTMSXANCNFSM4MMZTBPQ> .