Using document to parse entities makes the lib (and deps) unusable in web workers

[yohcop]

The top-level document object is unefined in a webworker context.

diff

I am using remark and others from within a webworker, and upgrading dependencies upgraed parse-entities to 3.1.0, breaking things.

No huge deal for now, I'll upgrade later, but just letting you know.

[wooorm]

Hey! Please see the code for when that is used:

parse-entities/package.json

Lines 28 to 33 in 6d7cef9

	"browser": {
	"./lib/decode-entity.js": "./lib/decode-entity.browser.js"
	},
	"react-native": {
	"./lib/decode-entity.js": "./lib/decode-entity.js"
	},

Your bundler explicitly requests browser fields. Web Workers are not browsers. Configure your bundler if you’re bundling or web workers.

Duplicate of #16

[yohcop]

Thanks for the blazing fast reply :)

That's interesting. If I change the bunler behavior to not pick browser files, it ends up trying to bundle node libraries (for my example, the first issue is with ObjectHash, for which, I do want to use the browser version, as it otherwise tries to use node packages) :/

It seems to me that the default would be "node" for a package, so that makes sense. "browser" is closer to web workers than node, but agreed that web workers aren't browsers, and in fact the nodejs doc says "browser" is for code that may use things like window, which webworkers don't have either. But it also never mentions web workers.

I know this is now likely outside this pakage's responsibility, since it seems to me that you are doing it right, but just wondering if you know the right fix here? I'm using esbuild as bundler but that seems like a detail anyway.

Best,

[wooorm]

It sounds like there’s a lot of other code that deals with crypto and such that makes it all rather complex. 🤔. Perhaps your bundler can polyfill that or swap in browser-specific code?
Or, you could create two bundles maybe?

[wooorm]

I don’t know of a way to set a webworker field or so that does point to the non-DOM version, so I don’t think I can solve your problem in this project?

[yohcop]

So I found a solution, I tell esbuild to build the webworker bundle with mainFields: ['react-native', 'browser', 'module','main'].

This way, it picks the react-native code from this lib over browser, and browser over node for object-hash (and possibly others).
But, I feel like it's a time-bomb that at one point I'll use a lib with react-native specific code tha I don't want... :D But anyway, it works.

I'm pretty sure esbuild doesn't really know about 'react-native'. Therefore, that made me wonder.... Can that field ("react-native", "browser") be... anything? Esbuild still works if I add a random string to the mainFields array.... 🤔 But then, from a short search, I couldn't find evidence that "webworker" would be a common target in package.json for example.

However, I found this: https://webpack.js.org/configuration/resolve/#resolvemainfields
Webpack prefers 'browser' for webworkers.

So yeah, no need to fix anything I suppose, but maybe taking a look at that webpack default, as it's a common bundler.

[wooorm]

Asked on twitter: https://twitter.com/wooorm/status/1454481651942232067

[yohcop]

Well, I must have been dreaming. I went for a run, and now the 'react-native' mainField doesn't seem to have any effect. Usually going running fixes problems, not create them, haha!

I temporarily forced this lib to 3.0.0 until I find a better solution.

Thanks so much for your help!

[lacolaco]

I'm also using remark in a webworker environment and had the same problem, and finally found here. Using v3.0.0 seems to be the only way to fix it, but I hope I can find a better way too.

[wooorm]

I don’t understand why v3 is different in this that v3.1? 3.0.0...3.1.0

[stevemk14ebr]

Any solution? I am already using the recommended webpack worker-loader to load my web worker, which makes a seperate bundle as documented here:

https://www.npmjs.com/package/worker-loader

I do not know how to resolve this.

[stevemk14ebr]

Using yarn I can at least override all the transitive includes to pin this to the old version:

in package.json:

  "resolutions": {
    "parse-entities": "3.0.0"
  },

[wooorm]

I don’t know webpack. How to configure webpack for web workers is really a question for them.

I do know that I’m setting a browser field here (and in many different projects), for browser specific code.
I don’t think it’s weird that browser specific code expects document to be there.

So rather that doing resolutions or so — which doesn’t fix the actual problem, it silences an immediate error, but now your code will crash when a user enters a character reference — I’d recommend going to webpack folks for how to configure webpack.

[stevemk14ebr]

The only alternative bundler is react-native which also does not seem correct in this environment, perhaps it is falling back to browser as react-native is also inappropriate.