New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Getting error in web workers #24
Comments
Can you provide me some steps to reproduce? I'm not too familiar with Web Workers and don't have much context on what is broken. |
@pmmmwh - I haven't had much time to looking into this yet. But I believe the issue is caused because workers don't have window. And at least with https://github.com/developit/workerize-loader and https://github.com/GoogleChromeLabs/worker-plugin it suggests changing your webpack config to use output: {
globalObject: "this"
}, When you do this Webpack is throwing on
Which is lines ( react-refresh-webpack-plugin/src/helpers/createRefreshTemplate.js Lines 13 to 15 in 615157e
It appears if you reference Changing these lines to use |
I am getting same error as author with version 0.2.0 |
Can you provide more info on your setup? |
We are using worker-loader from webpack to load workers to DOM.
I don't know why, but only last of the components chain have this error.
The chain is It looks like problem caused by |
I cannot comment on this without having a look at a reproducible example. I'll close this for now, since #29 addressed the original issue. |
The plugin now rewrites all all references to Did you exclude the worker file from being processed by |
I'm using this configuration: https://codesandbox.io/s/using-craco-ei2ek?file=/craco.config.js const worker = comlink.wrap(new Worker("lib/AutoCable/index.worker.ts", { name: "autocable", type: "module" })); I don't have any other configuration for that worker 🤔 |
You SHOULD have. You should have added processing/chunking behaviour for that worker because CRA does not support Workers out of the box. I would assume you added something like There are two choices.
Here's a demonstration of approach 2 - |
My apologies, somehow tunnel-read what you meant. Yes, I'm using This might be useful to add to documentation, maybe worker section? As it requires additional changes for workers 🤔 |
I'll probably add a |
First approach didn't work, tried both ways - with named plugin or by initializing directly. I'm getting the same error. Second approach feels like a lot of work, cause my worker is quite complicated. |
Can you create a reproducible example? There's no way I can offer more help without any context. |
i have same problem because of using |
I'm not using it in production, as I'm getting error in dev. |
I'm not sure how to help further. Clearly here the problem is that there exist some files that are linked by the worker plugin that evaded processing by this plugin, but got caught processed by the Babel plugin. This is something that I cannot help with (unfortunately), and would rely on either worker plugin wiring things up correctly, or tweaking Babel manually. I can take a look at the craco config if provided, then maybe I can see if something is wrong. |
@pmmmwh I don't know much about the inner workings of this plugin, and honestly, I'm just looking everywhere to see bits of information. Looks like on Personally, I don't know if I did the right thing but here's what I did. I create 2 rules for babel in
// ...
module: {
rules: [
{
test: /\.(js|ts)x?$/,
exclude: [
/node_modules/,
'app/workers/myWorker.ts',
],
use: [
{
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
// ... other plugins
isEnvDevelopment && 'react-refresh/babel'
].filter(Boolean)
}
},
]
},
// repeat the block another time to make sure the Worker is transpiled (since I use TS)
{
test: /Worker\.(js|ts)x?$/,
exclude: [
/node_modules/,
],
use: [
{
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
// ... other plugins
// isEnvDevelopment && 'react-refresh/babel'
].filter(Boolean)
}
},
]
}
plugins: [
new WorkerPlugin(),
new ReactRefreshWebpackPlugin(),
// ...
}; |
That workaround won't work for us as the helpers we inject are hoisted in the Webpack global, not the actual global scope (
Try inverting the order of the two blocks - the more specific |
@pmmmwh Thanks, inverting the order doesn't help. Regarding what you said earlier:
Does this mean if I could have |
Theoretically yes. However upon looking at worker plugin issues it seems that it is slightly more complicated because some plugin hooks would bleed into child compilers (which is what worker plugin uses). I will have to take a look at the final bundle to see what is truly messed up. (If possible I would love a repro) |
@pmmmwh Thank you so much! Can't wait to be able to try this out. |
I'll try creating my own in the mean time 🤣 Honestly though, I'm quite shocked that somehow it is more difficult to get things working with Workers than with non-browser renderers 🙈 I really want this to be as smooth as possible ... |
@blacksteed232 Seems like your second config block have a typo? Your worker's name is |
@blacksteed232 @GuskiS I have some workarounds. Sloppy
Simple
Robust
Edit: I also would suggest to not run I do understand that it is a bit of work to add this configuration, but I also hope that people can understand that Hopefully this provided some insight and hopefully the workarounds above have solved your problems! |
Thanks, when I added:
it didn't show error. (CRA eslint rule didn't allow me to use But that got me thinking, could it be possible that I'm somehow importing that code as worker and directly? Could something in bundling process mess it up? |
@pmmmwh I can confirm that the Due to that, So thank you so much @pmmmwh!! I was super anxious that I can't really use this nice plugin since I have quite a complicated setup (i.e. |
Happy that the resolutions worked for both of you!
If you are on TypeScript 3.8+, I highly suggest checking out the |
@pmmmwh Thanks, I did not pay attention to this when the version was released. Seems like the My web-worker was actually using a function from another module, so I think |
I wanted to post this here in case someone else is encountering the same issue as I was. We are using After trying the suggested Robust solution, I still kept getting the error Fix inspired by Usage in webpack configuration is to replace import { Template } from 'webpack';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
// This ensures we don't get runtime errors by ensuring workers have stubbed out expected functions.
export default class WorkerSafeReactRefreshWebpackPlugin extends ReactRefreshWebpackPlugin {
apply(compiler) {
super.apply(compiler);
compiler.hooks.compilation.tap('ReactRefreshWebpackPlugin', (compilation) => {
const hookVars = compilation.mainTemplate.hooks.localVars;
hookVars.tap('ReactFreshWebpackPlugin', (source) =>
Template.asString([
source,
'',
'// noop fns to prevent runtime errors during initialization',
'__webpack_require__.$Refresh$ = { register: function () {}, signature: function() { return function(type) { return type; } } };',
]),
);
});
}
} |
I'm getting error when using with web workers:
Uncaught ReferenceError: $RefreshReg$ is not defined
The text was updated successfully, but these errors were encountered: