Hypernova SSR Example Doesn't Work

[baranyildirim]

I followed the Hypernova SSR example, but the webpages I receive are completely blank.

Tried to run the example directly, the following error occurs on the hypernova server:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Any idea why this could be?

[marteinn]

Hi @baranyildirim and thanks for reporting this issue! By looking at the error, it seems like babel register has not been applied, its the bit here https://github.com/marteinn/django-react-polls-with-hypernova-examples/blob/master/example_2_with_builtin_hydration/frontend/hypernova-bootstrap.js#L4 that makes sure hypernova can support ES modules.

Before I do any research (it takes a little while to get the project running), have you followed the installation guide or done any changes? The installation guide is here: https://github.com/marteinn/django-react-polls-with-hypernova-examples/tree/master/example_2_with_builtin_hydration#installation

[baranyildirim]

Hey @marteinn, thanks for responding.

For the example, I followed the installation guide but used yarn because npm was very slow.

Beyond the example, would it be okay if instead of using the hypernova bootstrapper, I point hypernova directly to babel bundles? This is what I do in my own application, because I want the ability to deploy hypernova easily.

I am pretty sure I have got almost everything right, but my website ends up being blank where the react should be. I know that the Django template is loaded and the SSR is inserted, but get a blank nonetheless.

[marteinn]

Thanks for the additional info @baranyildirim, I just set it up locally and also got a ES module error, seems like something has broke since I set up this repo. Doing some research now, will report back when I know more.

[marteinn]

Found the culprit, I found the issue while reading through issues for esm (standard-things/esm#868), so it's basically Node introducing a breaking change in v12.16+ and it's an open issue for ESM.

The forward here is either:

• Use an older version of Node, I tested on Node v12.8 and it worked
• Monkey patch the js module loader with something like this ("Warning: require() of ES modules is not supported" when package.json has "type":"module" standard-things/esm#855 (comment) or Error [ERR_REQUIRE_ESM]: Must use import to load ES Module / require() of ES modules is not supported standard-things/esm#868 (comment)), I have not tested it so cannot verify that it works.

My immediate action will be to pin the node version for this repo, at the moment I don't have time to find a more sustainable solution, but PR:s are of course much welcome!

[marteinn]

Just pushed out a quickfix: marteinn/django-react-polls-with-hypernova-examples@61dca48

I'm also planning on closing this issue (will keep it open a couple of hours more for discussions) and instead open up a new issue at the https://github.com/marteinn/django-react-polls-with-hypernova-examples repo, as it is not a DRTT issue but rather in one of the examples. (DRTT has no opinion on how you do implement your hypernova server.)

[marteinn]

And here is the issue I opened on the other repo: marteinn/django-react-polls-with-hypernova-examples#1 (I noticed that issues was deactivated for the repo, so I activated those as well).

[baranyildirim]

Tried the example again and it works with Node 12.13.0