next启动时加载quill编辑器报错,提示说在服务器端加载了,但是我已经设置use client,求助

报错:

 ⨯ node_modules\quill\dist\quill.js (7661:11) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (C:\git-program\paper-ai\.next\server\webpack-runtime.js:33:43)
    at eval (./components/QuillEditor.tsx:9:63)
    at (ssr)/./components/QuillEditor.tsx (C:\git-program\paper-ai\.next\server\app\[lng]\page.js:637:1)
    at __webpack_require__ (C:\git-program\paper-ai\.next\server\webpack-runtime.js:33:43)
    at eval (./components/QuillWrapper.tsx:8:81)
    at (ssr)/./components/QuillWrapper.tsx (C:\git-program\paper-ai\.next\server\app\[lng]\page.js:648:1)
    at __webpack_require__ (C:\git-program\paper-ai\.next\server\webpack-runtime.js:33:43)

代码(./components/QuillWrapper.tsx):

"use client";

import ReduxProvider from "@/app/store/ReduxProvider";
import QEditor from "@/components/QuillEditor";

export default function QuillWrapper({ lng }) {
  return (
    <ReduxProvider>
      <QEditor lng={lng} />
    </ReduxProvider>
  );
}

所有代码:

109 Likes

解决了
修改后的代码:

"use client";
import dynamic from "next/dynamic";
import ReduxProvider from "@/app/store/ReduxProvider";
// import QEditor from "@/components/QuillEditor";

// 动态导入 QuillEditor 组件,禁用 SSR
const QEditor = dynamic(() => import("@/components/QuillEditor"), {
  ssr: false,
});
export default function QuillWrapper({ lng }) {
  return (
    <ReduxProvider>
      <QEditor lng={lng} />
    </ReduxProvider>
  );
}

48 Likes

就是要动态导入,这可能是next.js的bug

1 Like

https://www.paperai.life/zh-CN

4 Likes

From #develop:qa to 开发调优

1 Like