使用nextjs动态导入进行无限加载的反应式鹅毛笔

Question

我想对nextjs使用react-quill。

这是ssr的问题，所以我参考第122期写了这段代码。

https://github.com/zenoamaro/react-quill/issues/122

但是，只有“正在加载...”继续，并且没有出现react-quill。

控制台中没有错误，因此无法进行跟踪。

你能帮我...吗？

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;

Chrome浏览器

Chrome控制台