ESM package cannot be imported

[zhangela]

Getting this error when I followed the docs:

./node_modules/@uiw/react-markdown-preview/lib/index.js:13:0
Module not found: ESM packages (react-markdown) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
./app/page.tsx

https://nextjs.org/docs/messages/module-not-found

Looks like the issue is uiwjs/react-md-editor is CommonJS but react-markdown is ESM, so this line in react-markdown-preview/lib/index.js causes the error above:

var _reactMarkdown = _interopRequireDefault(require("react-markdown"));

Here's what I have:

next.config.js

/** @type {import('next').NextConfig} */
require("dotenv").config();

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
    esmExternals: true,
  },
};

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

module.exports = removeImports(nextConfig);

app/page.tsx:

"use client";

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 }
);
const Markdown = dynamic(
  () => import("@uiw/react-markdown-preview").then((mod) => mod.default),
  { ssr: false }
);

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

export default HomePage;

[jaywcjlove]

@zhangela #52 (comment)