Using next-remove-imports but still can't deploy - Next.js

[MrPedrinho]

When I try to deploy on Vercel with Next.js I always get this error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /vercel/path0/node_modules/react-markdown/index.js

I already checked #52, used next-remove-imports but this happens. This is my next.config.js

const removeImports = require('next-remove-imports')({})

module.exports = removeImports({
    images: {
        domains: [
            'cdn.discordapp.com',
            'discordapp.com',
        ]
    }
})

And this how I'm importing react-md-editor

import MDEditor from '@uiw/react-md-editor';
import '@uiw/react-md-editor/dist/markdown-editor.css'
import '@uiw/react-markdown-preview/dist/markdown.css';

[jaywcjlove]

@BobinBieber https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js

Use ESM (please read this)

[jaywcjlove]

Or before using the @uiw/[email protected] version.

@BobinBieber

[jaywcjlove]

I'm having problems with ESM and Next.js

You must enable the experimental support for ESM.

@BobinBieber

[jaywcjlove]

We're working on extensive ES Modules support in Next.js, both as input modules and as an output target. Starting with Next.js 11.1, you can now import npm packages using ES Modules (e.g. "type": "module" in their package.json) with an experimental flag.

// next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true }
}

const removeImports = require('next-remove-imports')({})

module.exports = removeImports({
    // Prefer loading of ES Modules over CommonJS
    experimental: { esmExternals: true },
    images: {
        domains: [
            'cdn.discordapp.com',
            'discordapp.com',
        ]
    }
})

[MrPedrinho]

@jaywcjlove I still get the same error

[jaywcjlove]

@BobinBieber This error should go to Next.js to study it.

[jaywcjlove]

@BobinBieber https://github.com/vercel/next.js/discussions/27876

[killaslark]

Hi @MrPedrinho

i got the same issue when i try to run it on dev mode

then i try to import it with dynamic from next/dynamic

import dynamic from 'next/dynamic'

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

Then the error is gone. Maybe you can try this ?

[jaywcjlove]

Example: https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

[jaywcjlove]

npm install next-remove-imports
npm install @uiw/[email protected]

// next.config.js
const removeImports = require('next-remove-imports')();
module.exports = removeImports({});

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

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

function HomePage() {
  return (
    <div>
      <MDEditor value="**Hello world!!!**" />
    </div>
  );
}

export default HomePage;

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

[bear-bear-bear]

This solution worked great for me. But when I tried to apply custom toolbar with commands property, I had the same problem. So I solved it like this:

before ❌

import { commands, MDEditorProps } from '@uiw/react-md-editor';

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

function HomePage() {
  return (
    <div>
      <MDEditor
         value="**Hello world!!!**"
         commands={[
           commands.bold,
           commands.italic,
         ]}
      />
    </div>
  );
}

export default HomePage;

after ⭕

import { MDEditorProps } from '@uiw/react-md-editor';
import { bold, italic } from '@uiw/react-md-editor/lib/commands';

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

function HomePage() {
  return (
    <div>
      <MDEditor
         value="**Hello world!!!**"
         commands={[
           bold,
           italic,
         ]}
      />
    </div>
  );
}

export default HomePage;

[Altabeh]

Note that if you want to use <MdEditor.Markdown /> to render some content with a source attribute, you should instead use the following code:

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

<MarkdownPreview source={content} className="mt-30" />

[jaywcjlove]

Example: @uiwjs/next-remove-imports/example