Error: This browser does not support `document.implementation.createHTMLDocument` when using Next.JS

Question

Error: This browser does not support `document.implementation.createHTMLDocument` when using Next.JS

Closed this issue a year ago · 3 comments

Describe the bug
When using older versions of this plugin (2.7.3) with Next JS we are able to SSG render a page using the following code:

import Output from 'editorjs-react-renderer'

export default function BookReview(props) {
    const {data, meta} = props;

    return (
        <>
            <Head>
                <title>{`${meta?.title}`}</title>
                <meta name="description" content={meta?.description} />
            </Head>
            <Container className="mt-16 lg:mt-32">
                <article>
                    <Output renderers={ renderers }  data={ data } />
                </article>
            </Container>
        </>
    )
}

export async function getStaticPaths() {
    return {
        paths: [{ params: { slug: 'abc' } }, { params: { slug: 'def' } }],
        fallback: false, // can also be true or 'blocking'
    }
}

export async function getStaticProps() {
    return {
        props: {
            data: { ... }
       }
   }
}

However, we need to provide a custom renderer to the component which I assume is only available in more recent versions of the plugin. This however breaks compatibility with the above code:

Call Stack
s
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:13270)
e.exports
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:14492)
e.exports
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:14762)
l
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:15854)
t.default
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:46859)
renderWithHooks
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/hassannazar/dev/workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)

To Reproduce
Reproducer: https://github.com/HasseNasse/editorjs-react-renderer-next

Additional context
Not sure if this is a next.js related issue or not

Answer 1 · 2023-01-15T02:57:45.000Z

Got the same error :(
Maybe is the NextJS 13+ version.

Answer 2 · 2023-01-15T12:15:29.000Z

If you're using SSG then your page is pre-rendered at compile time outside of the browser.

ERR now only works client side starting from v3, so this might be the problem you have.
See https://github.com/dev-juju/EditorJS-React-Renderer#server-side-rendering

Can you dynamically import the package as described and let me know what happens then?

Answer 3 · 2023-02-06T15:19:07.000Z

Was it a decision not to support server side rendering or is it just an unresolved issue?
I would like to use this library if it works with SSG.

If you know what could be wrong, I can try to create a PR