Comments (10)
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?
from worker-plugin.
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.
from worker-plugin.
- plugins: [new HtmlWebpackPlugin(), new WorkerPlugin(globalObject: 'self')],
+ plugins: [new HtmlWebpackPlugin(), new WorkerPlugin({ globalObject: 'self' })],
from worker-plugin.
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.
from worker-plugin.
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.
from worker-plugin.
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
from worker-plugin.
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).
from worker-plugin.
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.
from worker-plugin.
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!
from worker-plugin.
from worker-plugin.
Related Issues (20)
- Warnings in terminal when using with vue cli (eslint + prettier configured) HOT 1
- parser.state.module.addPresentationalDependency is not a function HOT 3
- worker-plugin loader dependency not found
- Start ShareWorker from Worker
- Webpack 5: import declarations may only appeaar at the top level of a module HOT 2
- Deprecation warning with webpack 5.42.0 HOT 1
- Using environment variables HOT 1
- entries[0].files.values is not a function
- Vue2 + Webpack not bundling? HOT 2
- Multiple functions inside a worker not supported? HOT 2
- Webpack 5: ParserHelpers.addParsedVariableToModule is not a function HOT 9
- Nested workers not resolved correctly output.publicPath is relative HOT 5
- vue use work-plugin. Error HOT 5
- Failed to using 'importScripts' on *worker.js HOT 1
- webpack build fails
- Error when using NPM module with Rollup worker bundled HOT 3
- ESLint errors for code injected by Babel HOT 6
- Angular 10, webpack, worker loader, large project HOT 3
- Are there similar plugin that support worklet? HOT 1
- SingleEntryPlugin has been removed from webpack
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from worker-plugin.