when using on nextjs

[jonsoku-dev]

ReactQuill version

• master
• v2.0.0-beta.2
• v2.0.0-beta.1
• 1.3.5
• 1.3.4 or older
• Other (fork)

FAQ

Hello. I want to use react-quill with nextjs .

This is a problem with ssr, so I wrote this code with reference to issue #122.

However, only 'loading ...' continues, and react-quill does not appear.

There are no errors in the console, so tracking is not possible.

Can you help me ... ?

import React from 'react';
import dynamic from 'next/dynamic';

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

const modules = {
  toolbar: [
    [{ header: '1' }, { header: '2' }, { font: [] }],
    [{ size: [] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [
      { list: 'ordered' },
      { list: 'bullet' },
      { indent: '-1' },
      { indent: '+1' },
    ],
    ['link', 'image', 'video'],
    ['clean'],
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
};
/*
 * Quill editor formats
 * See https://quilljs.com/docs/formats/
 */
const formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'video',
];

const Createtest = () => (
  <div>
    124
    <QuillNoSSRWrapper modules={modules} formats={formats} theme="snow" />
  </div>
);

export default Createtest;

Brower

Chrome console

[karthik-js]

@jonsoku2
Have you loaded the css in _app and added css configuration to next config using @zeit/next-css. If so it should work.
import 'react-quill/dist/quill.snow.css';

[jasminnancy]

I found this to work much easier. As someone said above, don't forget to import the CSS file. It's required.
Change quill.snow.css to quill.bubble.css or quill.core.css depending on what theme you plan to use.

const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false
import 'node_modules/react-quill/dist/quill.snow.css'

[SkyYap]

@jonsoku2 Have you loaded the css in _app and added css configuration to next config using @zeit/next-css. If so it should work. import 'react-quill/dist/quill.snow.css';

For those who are visiting, here's the update. Nextjs now has Built-In CSS Support. Can skip using @zeit/next-css

[SkyYap]

@jonsoku2 Have you loaded the css in _app and added css configuration to next config using @zeit/next-css. If so it should work. import 'react-quill/dist/quill.snow.css';

I think they have fixed the issue. I just add import 'react-quill/dist/quill.snow.css'; below next/dynamic and it works.

[trinhminhhieu]

import 'node_modules/react-quill/dist/quill.snow.css'

Thanks!

After many days of struggling, I found this code that solves the problem!

import "quill/dist/quill.snow.css";
import "react-quill/dist/quill.snow.css"; 
const ReactQuill =
  typeof window === "object" ? require("react-quill") : () => false;

This code makes imageHandler work in Nextjs 13.4!