DEVHIDE
Login Or Sign up

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

768 Views Asked by At

I have an simple next.js application upon which I'm trying to SSG render some editor.js formatted output data using the npm package editorjs-react-renderer.

Describe the issue 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

Tried creating a reproducer, expectation is that the rendering works I've also tried without SSG (in pages/nossg.js), but the same error occurs

reactjs next.js editorjs
Original Q&A
1

There are 1 best solutions below

0
On

I was able to make it work by using the next dynamic import feature: https://nextjs.org/docs/advanced-features/dynamic-import

I've added an additional page to the reproducer (pages/dynamic.js) which works when setting ssr=false.

I've also verified that SSG works when using this. (view on following images) Dynamic page, does not do any SSGSSG with dynamic import Initial Page load includes data

The solution/workaround is as follows:

- import Output from "editorjs-react-renderer";
+ import dynamic from 'next/dynamic'

+ const Output = dynamic(() => import('editorjs-react-renderer'), { ssr: false })

Then use the dynamically imported component like below:

<main className={styles.main}>
    <div>
        <Output renderers={renderers} data={ data } />
    </div>
</main>

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in EDITORJS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.