Fast Refresh had to perform a full reload (next.js page router)

[danishsjjd]

Every little change cause:
Fast Refresh had to perform a full reload when ./src/components/MdxEditor.tsx changed. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

the component is exactly the same one from example:

import React from "react"

import type { CodeBlockEditorDescriptor } from "@mdxeditor/editor"

const {
  MDXEditor,
  codeBlockPlugin,
  headingsPlugin,
  listsPlugin,
  linkPlugin,
  quotePlugin,
  markdownShortcutPlugin,
  useCodeBlockEditorContext,
} = await import("@mdxeditor/editor")

const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
  match: () => true,
  priority: 0,
  Editor: (props) => {
    const cb = useCodeBlockEditorContext()
    return (
      <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
        <textarea rows={3} cols={20} defaultValue={props.code} onChange={(e) => cb.setCode(e.target.value)} />
      </div>
    )
  },
}

const MdxEditor = ({ content }: { content: string }) => {
  return (
    <MDXEditor
      onChange={console.log}
      markdown={content}
      className="prose flex w-full min-w-full max-w-full flex-1 flex-col prose-p:txt-md-regular prose-p:text-gray-900 prose-pre:bg-transparent prose-pre:p-0 [&_:first-child]:!mt-0 [&_:last-child]:!mb-0"
      plugins={[
        codeBlockPlugin({ codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor] }),
        headingsPlugin(),
        listsPlugin(),
        linkPlugin(),
        quotePlugin(),
        markdownShortcutPlugin(),
      ]}
    />
  )
}

export default MdxEditor