Use node builtin module within prerender

[sastan]

In twind we are using async_hooks to support async renders. As i understand wmr the prerender bundles are used only on server side. Would it be possible to support builtin modules for prerender?

Not working example

import {executionAsyncId, createHook} from "async_hooks";

The build fails with:

Could not load async_hooks (imported bynpm/twind@0.11.2/server/server.js): Error: async_hooks is a Node built-in - WMR does not polyfill these

Current workaround: Using node: prefix

import {executionAsyncId, createHook} from "node:async_hooks";

The works but leads to the following warning:

'node:async_hooks' is imported bynpm/twind@0.11.2/server/server.js, but could not be resolved – treating it as an external dependency

[developit]

TBH the workaround is how this should be done. We can silence the warning, it's not particularly meaningful.

[sastan]

Thanks. I'll be using the workaround then.

[danielweck]

Hello @sastan
I have integrated Twind in PreactWMR based exactly on your prerender + twind/shim example (thank you, by the way!):

https://github.com/tw-in-js/example-wmr

...everything's fine with npm start but unfortunately npm run build fails at htmlparser2:

> wmr build --prerender

'node:async_hooks' is imported bynpm/twind@0.15.8/server/server.js, but could not be resolved – treating it as an external dependency
Could not load events (imported bynpm/htmlparser2@3.10.1/lib/Parser.js): Error: events is a Node built-in - WMR does not polyfill these

I am trying to figure out whether this error originates from the server build (in which case this is problematic as the twind/shim is meant to run at the prerender phase in NodeJS), or from the compilation of the frontend client? (in which case there should be some kind of "externals" blacklist to prevent htmlparser2 from being bundled)

Any idea? Many thanks! Dan

[danielweck]

I'm starting to think that wind/server/shim should be executed via a Rollup plugin rather than by "patching" prerender. I am looking into this...
https://github.com/preactjs/wmr/tree/main/packages/wmr#configuration-and-plugins

[sastan]

@danielweck We have changed the html parser for the server shim. It seems that broke WMR. WMR wants every Node.js builtin prefixed with node:. Twind does this for async_hooks but htmlparser2 does not (as it shouldn't).

Your rollup plugin idea is a great idea! And it got me thinking if we could create a rollup plugin that would add the node: prefix to all prerender dependencies. What do you think?

[danielweck]

Well, I hacked the node: prefix into node_modules/twind but that didn't work (I suppose this makes sense, as the node prefix is meant to be used for NodeJS built-ins, not any random external module).
I also tried the aliases config. To no avail.

[sastan]

You need to add node: prefix to the events import in htmlparser2/lib/Parser.js.

[danielweck]

I am afraid this is a "rabbit hole" of CommonJS dependency hell :)
There are require calls to string_decoder, buffer, events etc. and most annoyingly to readable-stream which is a co-located node_modules package, so this needs to be relativized (i.e. var WritableStream = require("../node_modules/readable-stream").Writable;). I have seen several comments in the PreactWMR repository about CommonJS resolver not being supported, which makes sense as this tooling focuses on first-class ECMAScript Modules support.

[sastan]

@danielweck I have updated twind to only import the tokenizer from htmlparser2. My tests show that the issue is resolved with that change. I will notify you once it is released.

[sastan]

Fixed with twind@0.15.9

[danielweck]

I've been testing this for the last few minutes, thanks :)
I am seeing problems related to route prerenders, but this may have more to do with PreactWMR than Twind ... I will investigate.

[danielweck]

Your rollup plugin idea is a great idea! And it got me thinking if we could create a rollup plugin that would add the node: prefix to all prerender dependencies. What do you think?

FYI: I created a tiny Preact WMR plugin to improve Twind's hydration performance (i.e. post-prerender / static SSR):

tw-in-js/typescript-plugin#7

On a related note, I look forward to seeing the outcome of this work:

#400
#169

:)