uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.17k stars 157 forks source link

Cannout build production Nextjs #350

Closed pascuflow closed 2 years ago

pascuflow commented 2 years ago

Hi, using Nextjs 12.0.9, building fails with :

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /foo/node_modules/react-markdown/index.js require() of ES modules is not supported. require() of /foo/node_modules/react-markdown/index.js from /foo/node_modules/@uiw/react-markdown-preview/lib/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename /foo/node_modules/react-markdown/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /foo/node_modules/react-markdown/package.json.

If I remove the /foo/node_modules/@uiw/react-markdown-preview/lib/ folder it works, can this be swtiched to esm import syntax?

jaywcjlove commented 2 years ago

@pascuflow Provide an example via codesandbox.io?

bykof commented 2 years ago

I get the same error

jaywcjlove commented 2 years ago

image

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

I tested this instance and there are no errors. You can provide me with an example.

@bykof @pascuflow

pascuflow commented 2 years ago

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

jaywcjlove commented 2 years ago

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

- import { commands } from "@uiw/react-md-editor";
+ import * as commands from "@uiw/react-md-editor/esm/commands";
jaywcjlove commented 2 years ago

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

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";