Module build failed

[aliamiri1380]

this is not working on: --- @mui/material@5.11.15 --- react@18.2.0 --- @tiptap/core@2.1.10

code sample: editor.jsx

import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import {
  MenuButtonBold,
  MenuButtonItalic,
  MenuControlsContainer,
  MenuDivider,
  MenuSelectHeading,
  RichTextEditorProvider,
  RichTextField,
} from "mui-tiptap";

export default function Quill() {
  return <RichTextReadOnly content="<p>Hello world</p>" extensions={[StarterKit]} />
}

error:

ERROR in ./node_modules/@mui/utils/useControlled.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/ali/Projects/Nomreyar/client/node_modules/@mui/utils/useControlled.js'
ERROR in ./node_modules/@mui/utils/useEnhancedEffect.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/ali/Projects/Nomreyar/client/node_modules/@mui/utils/useEnhancedEffect.js'
ERROR in ./node_modules/@mui/utils/useEventCallback.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/ali/Projects/Nomreyar/client/node_modules/@mui/utils/useEventCallback.js'
ERROR in ./node_modules/@mui/utils/useForkRef.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/ali/Projects/Nomreyar/client/node_modules/@mui/utils/useForkRef.js'
ERROR in ./node_modules/@mui/utils/useId.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/ali/Projects/Nomreyar/client/node_modules/@mui/utils/useId.js'
ERROR
[eslint] 
src/parts/quill.jsx
  Line 14:11:  'RichTextReadOnly' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

[sjdemartini]

@aliamiri1380 Thanks for pasting your full code. As the error message hints, the issue is just that you haven't imported the component that you're using. Instead of:

import {
  MenuButtonBold,
  MenuButtonItalic,
  MenuControlsContainer,
  MenuDivider,
  MenuSelectHeading,
  RichTextEditorProvider,
  RichTextField,
} from "mui-tiptap";

it looks like you need:

import { RichTextReadOnly } from "mui-tiptap";

I'll go ahead and close this out, but if there is some different issue, please let me know.