英文:
ReferenceError: document is not defined when using ReactQuill
问题
It looks like you're encountering an issue when building your Next.js project with ReactQuill. The error message suggests that there's a problem with the document object being undefined, which usually happens when trying to use browser-specific code on the server-side.
To fix this issue, you should wrap the code that relies on the document object inside a condition that checks if it's running on the client-side. You can do this using the "typeof window !== 'undefined'" check. Here's an example of how you can modify your code:
import ReactQuill from 'react-quill';
import React, { useState, useEffect } from 'react';
export default function Articles() {
const [content, setContent] = useState<ReactQuill.Value>('');
useEffect(() => {
// Check if we're running on the client-side before using the document object
if (typeof window !== 'undefined') {
// Your code that uses the document object goes here
}
}, []);
const handleChange = (value: ReactQuill.Value) => {
setContent(value);
};
return (
<ReactQuill theme="snow" />
);
}
This change should help resolve the "document is not defined" error when building your Next.js project with ReactQuill. Make sure to replace "// Your code that uses the document object goes here" with the relevant code that requires the document object.
英文:
i'm getting start with both next.js and ReactQuill. But when i went run yarn build, this is what I get:
info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data ..ReferenceError: document is not defined
at Object.<anonymous> (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:7661:12)
at __webpack_require__ (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:1030:1)
at __webpack_require__ (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:5655:14)
at __webpack_require__ (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:10045:13)
at __webpack_require__ (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:36:30)
at Object.<anonymous> (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:11557:18)
at __webpack_require__ (C:\Users\joao\Desktop\liceu\node_modules\quill\dist\quill.js:36:30)
> Build error occurred
Error: Failed to collect page data for /Articles
at C:\Users\joao\Desktop\liceu\node_modules\next\dist\build\utils.js:1152:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
How am I supposed to use that? I installed the packages, create the file under the pages folder. The file goes like this:
import ReactQuill from 'react-quill';
import React, { useState, useEffect } from 'react';
export default function Articles() {
const [content, setContent] = useState<ReactQuill.Value>('');
const handleChange = (value: ReactQuill.Value) => {
setContent(value);
};
return (
<ReactQuill theme="snow" />
);
}
What am I imissing? How do I fix that?
答案1
得分: 1
你可以使用 dynamic。请参见此示例
看起来 ReactQuill 只能在浏览器上运行。你只能在客户端上渲染这个元素。我不确定你使用的是哪个版本的 Next.js。
你可以添加 useIsMounted 钩子：
function useIsMounted() {
const isMounted = useRef(false)
useEffect(() => {
isMounted.current = true
return () => {
isMounted.current = false
}
}, [])
return useCallback(() => isMounted.current, [])
}
然后你可以像这样使用它：
import ReactQuill from 'react-quill'
import React, { useState, useEffect } from 'react'
export default function Articles() {
const [content, setContent] = useState<ReactQuill.Value>('')
const isMounted = useIsMounted()
const handleChange = (value: ReactQuill.Value) => {
setContent(value)
}
return isMounted() ? <ReactQuill theme="snow" /> : null
}
英文:
You can use dynamic. Please, see this example
Looks like ReactQuill runs only on browser. You can render this element only on client side. I'm not sure what version of Next.js do you use.
You may add useIsMounted hook:
function useIsMounted() {
const isMounted = useRef(false)
useEffect(() => {
isMounted.current = true
return () => {
isMounted.current = false
}
}, [])
return useCallback(() => isMounted.current, [])
}
Then you it like this:
import ReactQuill from 'react-quill'
import React, { useState, useEffect } from 'react'
export default function Articles() {
const [content, setContent] = useState<ReactQuill.Value>('')
const isMounted = useIsMounted()
const handleChange = (value: ReactQuill.Value) => {
setContent(value)
}
return isMounted() ? <ReactQuill theme="snow" /> : null
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论