[v3.25.4] "Module not found" error when import `./lib/commands` in Next.js v13.4.3

[lghsigma597]

Hi! Thank you for the great package 👍🏼

I aimed to customize the extraCommands of the toolbar. My initial approach was utilizing the import { commands } from "@uiw/react-md-editor"; for this customization. However, during this phase, I encountered an unexpected challenge.

Server Error
require() of ES Module /home/axel/dev/lit-app/node_modules/react-markdown/index.js from /home/axel/dev/lit-app/node_modules/@uiw/react-markdown-preview/lib/index.js not supported.
Instead change the require of /home/axel/dev/lit-app/node_modules/react-markdown/index.js in /home/axel/dev/lit-app/node_modules/@uiw/react-markdown-preview/lib/index.js to a dynamic import() which is available in all CommonJS modules.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Below are the comments and issues I referenced: https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341 https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-925673338 https://github.com/uiwjs/react-md-editor/issues/446

From the above, I found the solution import * as commands from "@uiw/react-md-editor/lib/commands"; but failed in latest version v3.25.4. It seems like v3.24.1 works well. To illustrate the issue more clearly, I have forked and only adjusted the package version in your sandbox example (link)

Thank you!

Error

Reproducible code

packages

npm i next@13.4.3
npm i react@18.2.0
npm i react-dom@18.2.0
npm i @uiw/react-markdown-preview@4.2.2
npm i @uiw/react-md-editor@3.25.4
npm i next-remove-imports@1.10.11

Next.js configuration

No extra configurations for next.config.js.

module.export = removeImports()({});

index.js

import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";
import * as commands from "@uiw/react-md-editor/lib/commands"; // Error

const MDEditor = dynamic(
  () => import("@uiw/react-md-editor").then((mod) => mod.default),
  { ssr: false }
);

function HomePage() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div data-color-mode="dark">
      <MDEditor
        value={value}
        onChange={setValue}
        extraCommands={[commands.bold]}
      />
    </div>
  );
}

export default HomePage;

[jaywcjlove]

@lghsigma597 Upgrade v3.25.5

import * as commands from "@uiw/react-md-editor/commands"

[lghsigma597]

@jaywcjlove Thank you for the quick fix! It works well, except there is a typescript error in VSCode. Do you have any idea for this?

[jaywcjlove]

@lghsigma597 Upgrade v3.25.6

[lghsigma597]

@jaywcjlove Great! It worked for me! Thank you 👍🏼