Skip to content

How to use with Remixjs? #141

New issue
New issue
Open
Open
How to use with Remixjs?#141

Description

@stuartcrobinson
stuartcrobinson
opened on Feb 21, 2023

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)

Activity

  1. jaywcjlove commented on Feb 22, 2023

    @jaywcjlove
    jaywcjlove
    on Feb 22, 2023
    Member

    Not sure if there is a similar solution

    @stuartcrobinson

  2. karlyanelson commented on Dec 18, 2023

    @karlyanelson
    karlyanelson
    on Dec 18, 2023

    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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions