Support Next.js

[jaywcjlove]

I created a nextjs package next-remove-imports to solve the problem.

Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js
Example: @uiwjs/next-remove-imports/example
Example: https://next-remove-imports-example.vercel.app Example: https://stackblitz.com/edit/nextjs-xy4ytm?file=pages/index.js
Example: https://codesandbox.io/embed/nextjs-example-react-md-editor-https-github-com-uiwjs-react-md-editor-issues-516-1z56px?fontsize=14&hidenavigation=1&theme=dark.

npm i @uiw/react-md-editor@v3.6.0
npm i next-remove-imports

// next.config.js
const removeImports = require("next-remove-imports")();

module.exports = removeImports({
  // ✅  options...
});

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

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

function HomePage() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div data-color-mode="dark">
      <MDEditor value={value} onChange={setValue} />
      <div style={{ paddingTop: 50 }}>
          <EditerMarkdown source={value} />
      </div>
    </div>
  );
}

export default HomePage;

---

• https://github.com/uiwjs/react-md-editor/issues/350#issuecomment-1042629304

import * as commands from "@uiw/react-md-editor/lib/commands";
- import { commands } from "@uiw/react-md-editor"
- // or
- import * as commands from "@uiw/react-md-editor/esm/commands";

example: https://codesandbox.io/s/nextjs-example-react-md-editor-forked-89jwvb?file=/pages/index.js

---

import { MDEditorProps } from '@uiw/react-md-editor';
import * as commands from '@uiw/react-md-editor/esm/commands';

+ const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
+   ssr: false,
+ });

function HomePage() {
-  const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
-    ssr: false,
-  });
  return (
    <div>
      <MDEditor
         value="**Hello world!!!**"
         commands={[
           commands.bold,
           commands.italic,
         ]}
      />
    </div>
  );
}

---

• https://github.com/vercel/next.js/issues/9607

• 438

• 224

• 350

• 422

---

Originally posted by @jaywcjlove in https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

[preetpatel]

What worked for me (Next.js version 13.4.3) is inside your next.config.mjs add the following to your config:

experimental: {
    esmExternals: 'loose',
  },

[alexdanilowicz]

@preetpatel that seems to only work sometimes. With that change, I am to get it to load, but every 5 minutes or so, it seems to crash again.

- error Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/code/node_modules/@uiw/react-markdown-preview/node_modules/react-markdown/index.js from /Users/zeus/code//node_modules/@uiw/react-markdown-preview/lib/index.js not supported.
Instead change the require of /Users/zeus/code/node_modules/@uiw/react-markdown-preview/node_modules/react-markdown/index.js in /Users/code/node_modules/@uiw/react-markdown-preview/lib/index.js to a dynamic import() which is available in all CommonJS modules.

Is simply adding

experimental: {
    esmExternals: 'loose',
  },

stable for you?

I tried

const removeImports = require("next-remove-imports")();

module.exports = removeImports({
});

But did not have any luck. Same problem. Perhaps I was not spreading it into module.exports correctly.

[alexdanilowicz]

I get Error: Cannot find module 'babel-plugin-transform-remove-imports' when trying to use the next-remove-imports package