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 supportDOMParser.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.