nhn / tui.editor

πŸžπŸ“ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

Home Page:http://ui.toast.com/tui-editor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Module not found: @toast-ui/editor tried to access prosemirror-transform, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

JeongTaehwan opened this issue Β· comments

Summary

I'm going to use @toast-ui/react-editor for typescript + react project.
From the top of the code after installing the library,
import "@toast-ui/editor/dist/toastui-editor.css"; import { Editor } from "@toast-ui/react-editor";
Attempted to use Editor after loading code.
I wonder why the error does not occur on the code, but only on the terminal. Also, I wonder why that error appears.

Screenshots

스크란샷 2022-05-03 13 54 20

스크란샷 2022-05-03 13 54 29

스크란샷 2022-05-03 13 54 36

스크란샷 2022-05-03 13 55 09

Version

^3.1.5

@JeongTaehwan Sorry for the late reply.

Can you show your code in detail?
I tried to reproduce the error, but I can't do it. (ref link)

Here's my code

/** @jsxImportSource @emotion/react */
import React, { useRef, useState } from "react";
import Button from "../Button/Button";
import * as S from "./Style";
import { useBeforeunload } from "react-beforeunload";
import Input from "../Input/Input";
import { useNavigate } from "react-router-dom";
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";

interface WriteProps {
  onClick?: Function;
  data?: {
    contents: string;
    fieldList: string[];
    fileUrlList: any;
    languageList: string[];
    purpose: string[];
    status: string[];
    title: string;
  };
}

const WriteTextForm: React.FC<WriteProps> = () => {
  const [title, setTitle] = useState("");
  const [value, setValue] = useState("");
  const navigate = useNavigate();
  const innerRef: any = useRef(null);

  useBeforeunload((e: any) => {
    e.preventDefault();
  });

  const handleSubmit = (e: any) => {
    e.preventDefault();
  };

  return (
    <div css={S.Positioner}>
      <Input
        type="text"
        theme="WritePageInput"
        fontSize="h1"
        placeholder="ν”„λ‘œμ νŠΈ 이름을 μž…λ ₯ν•˜μ„Έμš”"
        fontWeight="600"
        width="100%"
        onChange={(currentTarget) => {
          setTitle(currentTarget.target.value);
        }}
        value={title}
      />
      <Editor
        initialValue={value}
        previewStyle="vertical"
        height="600px"
        initialEditType="markdown"
        useCommandShortcut={true}
      />
      <div css={S.ButtonContainer}>
        <Button
          theme="GrayButtonWithBlackTextNoHover"
          children="μ·¨μ†Œ"
          size="Regular"
          fontSize="h5"
          fontWeight="400"
          isShadow="No"
          onClick={() => navigate("/main")}
        />
        <Button
          theme="BlackButtonWithWithTextNoHover"
          children="κΈ€ 등둝"
          size="Regular"
          fontSize="h5"
          fontWeight="600"
          isShadow="No"
          onClick={() => {}}
        />
      </div>
    </div>
  );
};

export default WriteTextForm;
commented

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

If you are using Yarn2, you can avoid the problem with the following settings.

.yarnrc.yml

packageExtensions:
  '@toast-ui/editor@*':
    dependencies:
      prosemirror-transform: '*'

https://yarnpkg.com/configuration/yarnrc#packageExtensions

commented

This issue will be closed due to inactivity. Thanks for your contribution!

If you are using Yarn2, you can avoid the problem with the following settings.

.yarnrc.yml

packageExtensions:
  '@toast-ui/editor@*':
    dependencies:
      prosemirror-transform: '*'

https://yarnpkg.com/configuration/yarnrc#packageExtensions

@jiwon-mun it works beautifully, thanks!