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
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;
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: '*'
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: '*'
@jiwon-mun it works beautifully, thanks!