How to use with React HTML Parser?

[mhaidarhanif]

Hello, Remix community!

I've been searching about the solution to use with react-html-parser for a while but haven't got an absolute fix yet.

The library is needed so we can customize/modify the parsed HTML elements into custom components. For a very simple job, dangerouslySetInnerHTML can still do.

Update: Current workaround is using html-react-parser as mentioned in #1024 (comment)

So using [email protected], I followed the tutorial to build a "Developer Blog"

In the "Dynamic Route Params" section, when talking about "Render the HTML in the route", just right before "Creating Blog Posts", it said to do this:

// ...
export default function PostSlug() {
  const post = useLoaderData();
  return (
    <div dangerouslySetInnerHTML={{ __html: post.html }} />
  );
}

The example use dangerouslySetInnerHTML, but I want to try to use react-html-parser.

import ReactHtmlParser from 'react-html-parser'

<section>
  <div dangerouslySetInnerHTML={{ __html: post.html }} />
  <div>{ReactHtmlParser(post.html)}</div>
</section>

But then hit an error, "Uncaught Exception!"

Update: This is mainly caused by the events package that is not supported on the client side.

Posted about this on Twitter:

• https://twitter.com/mhaidarhanif/status/1470430145252970498?s=20
• https://twitter.com/mhaidarhanif/status/1470431716816818182?s=20

Then @remix_run replied to "re-export":

When you hit this, re-export your server only module from a separate file that ends in .server so:

// app/rhp.server.ts
export * from "react-html-parser"

// in your route:
import * from "~/rhp.server"

error message here will get better, docs need improvements too.

• https://twitter.com/remix_run/status/1470446024011382784?s=20
• https://twitter.com/mhaidarhanif/status/1470451857348698113?s=20

But it still doesn't work yet.

Now it shows two errors:

1. on ReactHtmlParser This expression is not callable.
2. rhp_server_exports is not a function

This expression is not callable.
  Type 'typeof import("/Users/mhaidarh/All/people/mhaidarhanif/repos/mhaidarhanif-web/app/rhp.server")' has no call signatures.ts(2349)

In the end, we can still use the usual dangerouslySetInnerHTML, but ReactHtmlParser will be really needed when we want to modify how we parse the elements.

Or maybe there will be a Remix wrapper for this?

Maybe I made a mistake in configuring it, so I would be grateful if there's a hint on how to resolve this.

Thank you!

[sergiodxa]

From the error that library is trying to do a dynamic require of th events package, this is not supported on client side code that’s why it works server side (and why you are the HTML) but it fails client side.

The second error is because you named it .server.ts and tried to use it both server and client side, but in the client it doesn’t exists because you used the .server.ts extension.

[mhaidarhanif]

Thanks for the hint @sergiodxa!

I see, so in summary:

First, just grasped that it will depend on the library itself. Unfortunately react-html-parser uses events package doesn't support both client-server side rendering in Remix. Fortunately, found out an alternative that html-react-parser supports them.

Second, in Remix when using *.server.tsx then the *.client.tsx needs to exist at the same time if another route wants to use it on the client-side. I was following the @remix_run suggestion in the tweet but seems there's something missing (well since it's in a tweet).

Although this is initially specifically for the HTML parsing library, it could also affect and need to be informed well when the library/package being used by the developers is not supported on both client-server.

[mhaidarhanif]

Just found html-react-parser that turn out...

HTML to React parser that works on both the server (Node.js) and the client (browser)

This workaround works with Remix out of the box without any visible issue 🎉

Could be a good suggestion alternative to dangerouslySetInnerHTML

[mhaidarhanif]

This might be not the absolute answer for solving the case with specifically React HTML Parser because it doesn't support client-server side rendering in Remix.

But it works for now as a good alternative if we want to do a custom parse of the HTML elements.

What I don't know yet is that React HTML Parser is supported in Next.js just fine. So I was assuming that Remix could too.

If there's another answer that could be more accurate than this, then I'll change it there.

[sergiodxa]

It most likely work in Next because they use webpack and webpack can bundle a browser version of the events Node.js package, and Remix is not using webpack, only ESBuild.

[mhaidarhanif]

@sergiodxa Yeah that's true. Might need to wait for ESBuild to reach webpack-level of support then.

In the meantime, the Remix docs would inform the current limitation of ESBuild compared to webpack.

Because currently, the docs haven't stated that explicitly or in more detail. Or I haven't found it yet in https://remix.run/docs/en/v1

Wonder because if Next.js 12 is using swc, then there might be some unsupported packages too. So need to wait for swc to reach webpack-level of support as well.

[sergiodxa]

Next 12 is using swc to replace Babel, they are still using webpack.

[mhaidarhanif]

@sergiodxa I stand corrected. I thought swc to replace both Babel and webpack.

swc's bundler turns out called spack/swcpack https://swc.rs/docs/usage/bundling