joshfrench/react-mobiledoc-editor

Next.js Integration

fsuaterdogan opened this issue · 3 comments

fsuaterdogan commented

Hello, we have a Next.js project and we want to use Mobiledoc. Any ideas on how to do this? Can we run this library in Next.js? Thanks.

joshfrench commented

If your question is more about MobileDoc internals you may want to ask over there. This project is a React wrapper around MobileDoc; I haven't used in in Next but it was used in production on a different React stack so I can't think of a reason it wouldn't work wherever React is used.

malcolm-kee commented

@fsuaterdogan this is probably too late for you, but I will add my answer for others.

By default if you render the component in Next.JS, an error will be thrown because MobileDoc assume browser environment, which is invalid when Next.JS perform server-side rendering.

You can workaround the limitation by only render the component client side, by using Next.JS dynamic function.

Example:

import dynamic from 'next/dynamic';

const Component = dynamic(() => import('./path/to/component-using-react-mobiledoc-editor', { ssr: false });
malcolm-kee commented

@fsuaterdogan closing the issue as it's not an issue with this library, but more like MobileDoc is not ssr-friendly.

If you would like to further the discussion, feel free to raise a separate issue.