remarkablemark/html-react-parser

Next JS Support

Closed this issue · 7 comments

Problem

domToReact not working on Next JS Page routing. Getting the following error:

10 | Object.defineProperty(X, "__esModule", { value: !0 });
11 | var Q = "html", ee = "head", w = "body", Ie = /<([a-zA-Z]+[0-9]?)/, te = /<head[^]>/i, re = /<body[^]>/i, I = function(e, t) {

12 | throw new Error("This browser does not support document.implementation.createHTMLDocument");
| ^
13 | }, z = function(e, t) {
14 | throw new Error("This browser does not support DOMParser.prototype.parseFromString");
15 | }, ne = typeof window == "object" && window.DOMParser;

Suggested Solution

Any chance to use node parser under the hood so it could work on Next JS.

Keywords

Next JS
html-react-parser
Page routing

@josue-suarez-wt can you provide a reproducible example? Here's a Next.js example that uses this library: https://github.com/remarkablemark/html-react-parser/tree/master/examples/nextjs

Finally I could make it to work properly. Thanks for answering

Np! Does this mean we can close this issue?

Finally I could make it to work properly. Thanks for answering

@josue-suarez-wt May I ask how you solved it?

My

Finally I could make it to work properly. Thanks for answering

@josue-suarez-wt May I ask how you solved it?

I was working on a monorepo with turborepo. It had a UI package and a NextJS app. The UI package was building html-react-parser for production and it was throwing the error when NextJS run it.

The solution was to not building html-react-parser in the UI library but NextJS to take charge of it via transpilePackages: ["ui"], in the next.config.js file

For my UI lib to avoid building it, I had to include the package in my vite configuration as external package.

rollupOptions: {
  external: [
    'html-react-parser',
  ],

@josue-suarez-wt Thank you. This solution works for me too.

@remarkablemark For me it seems like a bug, if it is necessary to externalize html-react-parser in a lib. Could you have a look? Maybe we are doing something wrong.

@bmsuseluda if this is a bug, please create a new issue and provide a reproducible example.