search

zenoamaro / react-quill

A Quill component for React.
https://zenoamaro.github.io/react-quill
MIT License
6.67k stars 909 forks source link

I have a problem react-quill with typescript nextjs it said document is not defined #718

Open Focusz opened 3 years ago

Focusz commented 3 years ago

image

image

Ticket due diligence

ReactQuill version

pelevin-d-y commented 3 years ago

In my case I used dynamic imports

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })

raphaelvsantos commented 3 years ago

I'd point to the same solution from pelevin: https://dev.to/a7u/reactquill-with-nextjs-478b

noobnoobdc137 commented 3 years ago

Try

import { SPLayout } from '@layout';
import dynamic from 'next/dynamic';
import { FC, ReactElement } from 'react';

const ReactQuill = dynamic(
    () => {
        return import('react-quill');
    },
    { ssr: false }
);

const Create: FC = (): ReactElement => {
    return (
        <SPLayout>
            <ReactQuill
                value={'test'}
                onChange={e => {
                    console.log(e);
                }}
            />
        </SPLayout>
    );
};

export default Create;
EliasTouil commented 3 years ago

Hey guys, do you know how to access Quill (ReactQuill.Quill) whilst using a dynamic import? I want to create a blot.

flaming-codes commented 3 years ago

@EliasTouil Please try moving all your editor-code into a separate module that gets loaded as the view, e.g. Create.tsx, as you've already done, but with all imports in the common way. Then in your page use the dynamic import for this new module, e.g. Create.

kaushalsachan commented 10 months ago

I have written a solution see https://stackoverflow.com/a/77369928/2924492