error - ReferenceError: self is not defined
zhangwei900808 opened this issue · comments
Describe the bug
used next.js when run it not work
To Reproduce
Steps to reproduce the behavior:
1、yarn add @toast-ui/editor @toast-ui/react-editor
2、_app.js
import '@toast-ui/editor/dist/toastui-editor.css';
3、compo import
import { Editor } from '@toast-ui/react-editor';
...
const NoteSpace = (props) => {
return <Editor
initialValue="hello react editor world!"
previewStyle="vertical"
height="600px"
initialEditType="markdown"
useCommandShortcut={true}
/>
}
...
Expected behavior
it work!
Screenshots
Desktop (please complete the following information):
- OS: macos 12.3.1 (21E258)
- Browser chrome
- Version 101
We have been putting SSR support on the list of tasks for a long time. I can't do it right now, but I'll handle it later. sorry.
@zhangwei900808 I ran into the same issue in my project. Luckily, you can resolve it entirely in NextJS using Dynamic Imports to pull it in and setting ssr
to false
in the options object so it only loads on the client-side and not on the server.
// dynamic import example
const DynamicEditor = dynamic(() => import("./editor"), { ssr: false });
// ./editor.ts
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";
import { useRef } from "react";
export default function FormEditor({ initialValue, onChange }) {
const editorRef = useRef<Editor>(null);
function handleChange() {
const md = editorRef?.current
? editorRef?.current.getInstance().getMarkdown()
: "";
onChange(md);
}
return (
<Editor
height="600px"
initialEditType="wysiwyg"
initialValue={initialValue}
onChange={handleChange}
previewStyle="vertical"
ref={editorRef}
useCommandShortcut={true}
/>
);
}
Best of luck! 👍🏽
Describe the bug
used next.js when run it not work
run
What about Viewer, how can we solve SSR issue?
An alternative solution of Nextjs dynamic
:
import { Suspense, lazy } from 'react'
const DynamicEditor = lazy(() => import('./editor'))