How to use with Remixjs?

[stuartcrobinson]

i'm getting this error below when loading the root of my web app. code editor is on a separate route.

and i'm getting this same error after following the advice here: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

that is, adding this package to my remix.config.js isn't helping. any suggestions would be greatly appreciated! ty for an awesome component

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/rehype/index.js from /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js not supported.
Instead change the require of /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/rehype/index.js in /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js to a dynamic import() which is available in all CommonJS modules.
    at node_modules/@uiw/react-textarea-code-editor/cjs/utils.js (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:819:118)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:7:50
    at node_modules/@uiw/react-textarea-code-editor/cjs/index.js (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:1058:362)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:7:50
    at Object.<anonymous> (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:17853:49)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:144:13)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at Route.dispatch (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/layer.js:95:5)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:284:15
    at param (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:365:14)
    at param (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:376:14)
    at Function.process_params (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:421:3)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:280:10)
    at logger (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/morgan/index.js:144:5)
    at Layer.handle [as handle_request] (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:328:13)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:280:10)
    at SendStream.error (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/serve-static/index.js:121:7)
    at SendStream.emit (node:events:513:28)
    at SendStream.error (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:270:17)
    at SendStream.onStatError (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:417:12)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:759:28)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:767:23
    at FSReqCallback.oncomplete (node:fs:190:21)

[jaywcjlove]

• https://github.com/uiwjs/react-md-editor/issues/446#issue-1417594634

Not sure if there is a similar solution

@stuartcrobinson

[karlyanelson]

This is a bit belated, but a guy on my team was able to work around that error by using Lazy and Suspense:

import React, { Suspense } from "react";

const LazyCodeEditor = React.lazy(() => import("@uiw/react-textarea-code-editor"));

export const CodeEditor: React.FunctionComponent<Parameters<typeof LazyCodeEditor>[0]> = (
  props
) => (
  <Suspense>
    <LazyCodeEditor {...props} />
  </Suspense>
);

And then import CodeEditor from this file when you want to use it