错误 - ReferenceError: 文档未定义 NextJS答案

【问题标题】：error - ReferenceError: document is not defined NextJS错误 - ReferenceError: 文档未定义 NextJS
【发布时间】：2022-10-17 19:46:42
【问题描述】：

我收到这样的错误消息

错误 - ReferenceError：文档未定义

为什么是这样？我从来没有遇到过这样的错误，所以我真的很困惑。请那里的老人帮忙。

我的代码 =

import { useState } from "react";
import dynamic from 'next/dynamic';
import { Quill } from "react-quill";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import toolbarOptions from "./toolbar";

import 'react-quill/dist/quill.bubble.css';
const BubbleTheme = Quill.import("themes/bubble");

class ExtendBubbleTheme extends BubbleTheme {
  constructor(quill, options) {
    super(quill, options);

    quill.on("selection-change", (range) => {
      if (range) {
        quill.theme.tooltip.show();
        quill.theme.tooltip.position(quill.getBounds(range));
      }
    });
  }
}

Quill.register("themes/bubble", ExtendBubbleTheme);

import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Quill Editor</h1>
        <ReactQuill
          theme="bubble"
          placeholder="Compose an epic..."
          modules={{ toolbar: toolbarOptions }}
        />
    </div>
  )
}

【问题讨论】：

尝试动态导入整个组件，不仅react-quill

标签： reactjs next.js

【解决方案1】：

遇到同样的问题。使用 Next Dynamic Import 就像一个魅力：

import { useState } from "react";
import dynamic from "next/dynamic";

const YourComponent = () => {
  const [value, setValue] = useState("");
  const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

  return (
    <div>
      {/*... */}
      <ReactQuill theme="snow" value={value} onChange={setValue} />
    </div>
  );
};


export default YourComponent;

【讨论】：