error - ReferenceError: self is not defined

[张威]

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

[이진우]

@zhangwei900808

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.

[Efosa Oyegun]

@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

[Rahul kumar]

run

What about Viewer, how can we solve SSR issue?

[Renaud Rohlinger]

An alternative solution of Nextjs dynamic:

import { Suspense, lazy } from 'react'

const DynamicEditor = lazy(() => import('./editor'))