Errors regarding package use in Next.js + Typescript project due to module conflict

[alphacoma18]

I'm using react-md-editor with next-remove-imports in a Next.js + Typescript project but getting blocked by the hordes of errors from importing the "commands" to add shortcuts to the title and aria-label of the buttons. I have read through previous issues of related errors but none seem to fix it for me. I have tried many combinations of implementation but all lead to errors such as

1. Error: Must use import to load ES Module:
2. Error: require() of ES Module
3. Cannot use import statement outside module ...and some others.

I have spun a replit with the error below. I tried adding "type": "module" in the package.json but it doesn't run. https://replit.com/@alphacoma/react-md-editor-error-1

[jaywcjlove]

You can provide an example(codesandbox.io) that reproduces the error, and I'll try to fix it for you.

@alphacoma18

[alphacoma18]

Good evening. Here is the example. https://codesandbox.io/p/github/alphacoma18/react-md-editor-error/csb-ej9p1i/draft/heuristic-swartz?file=%2FREADME.md @jaywcjlove

[jaywcjlove]

I upgraded next.js in the example https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?from-embed=&file=/package.json:306-328 and the error reproduced.

next@12.2.6 has no errors, but next@12.3.1 has errors.

I may need to see what has changed in the new version of next.js and need to upgrade next-remove-imports to make it work in the new version.

Another error may require next-transpile-modules to resolve

@alphacoma18

[alphacoma18]

I believe I have a different error. I have an error that occurs when I do // import { commands } from "@uiw/react-md-editor"; or // import * as commands from "@uiw/react-md-editor/esm/commands/index";

saying

Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

I have downgraded to next@12.2.6 and have used next-transpile-modules but to no avail.

Reiterating, I want to use the "commands" because want to add shortcuts to the title and aria-label of the buttons (ex. Add bold text (Ctrl + B)). It seems to be an error regarding modules.

I have tried replicating it again in codesandbox but it was not updating packages so I used replit instead. Please see the link below. https://replit.com/@alphacoma/react-md-editor-error-1#pages/index.tsx

I hope you can help with this. @jaywcjlove

[alphacoma18]

Found the solution: https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-925673338

@jaywcjlove