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;

---

• Cannout build production Nextjs #350 (comment)

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>
  );
}

---

• Support ES module format (ESM) in next.config.js vercel/next.js#9607
• Errors regarding package use in Next.js + Typescript project due to module conflict #438
• Using next-remove-imports but still can't deploy - Next.js #224
• Cannout build production Nextjs #350
• Editor reloads with state change in Next JS #422

---

Originally posted by @jaywcjlove in #52 (comment)

[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

[aploon]

in general react-md-editor package dont work correctly with nextjs. i use other package to handle previews render
@aploon repo here

[Producdevity]

@aploon

in general react-md-editor package dont work correctly with nextjs.

Can you elaborate on this? why does it not work correctly? what do you mean by "correctly"?

and you just endorsed an other library, but that one is yours?