supabase-community/auth-ui

React.js package not working on Remix.run

vimtor opened this issue · 4 comments

vimtor commented

Bug report

Describe the bug

The React.js version of this package is not compatible with Remix.run

I am not sure if this is a problem with Remix or Supabase but my gut tells me this has to do with Supabase since other packages React.js packages work nice with Remix.

After installing it and doing the simple setup the following error occurs:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/@supabase+auth-ui-react@0.3.5_ku2vntnma2imfrsyohnkxzette/node_modules/@supabase/auth-ui-react/dist/index.cjs.js from /Users/vimtor/Developer/supabase-stack/api/index.js not supported.
index.cjs.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.cjs.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/@supabase+auth-ui-react@0.3.5_ku2vntnma2imfrsyohnkxzette/node_modules/@supabase/auth-ui-react/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.<anonymous> (/Users/vimtor/Developer/supabase-stack/api/index.js:268:28)
    at /Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/@remix-run+serve@1.14.1/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:144:13)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:140:7)
    at Route.dispatch (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/layer.js:95:5)
    at /Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:284:15
    at param (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:365:14)
    at param (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:376:14)
    at Function.process_params (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:421:3)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:280:10)
    at logger (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/morgan@1.10.0/node_modules/morgan/index.js:144:5)
    at Layer.handle [as handle_request] (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:328:13)
    at /Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/index.js:280:10)
    at SendStream.error (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/serve-static@1.15.0/node_modules/serve-static/index.js:121:7)
    at SendStream.emit (node:events:513:28)
    at SendStream.error (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/send@0.18.0/node_modules/send/index.js:270:17)
    at SendStream.onStatError (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/send@0.18.0/node_modules/send/index.js:417:12)
    at next (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/send@0.18.0/node_modules/send/index.js:731:16)
    at onstat (/Users/vimtor/Developer/supabase-stack/node_modules/.pnpm/send@0.18.0/node_modules/send/index.js:720:14)
    at FSReqCallback.oncomplete (node:fs:190:21)

To Reproduce

  1. Create Remix.run project
  2. Install @supabase/supabase-js, @supabase/auth-ui-react and @supabase/auth-ui-shared
  3. Setup a basic example of Supabase Auth UI:
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";

export default function Login() {
  return (
    <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />;
  );
}
  1. See error

Expected behavior

A clear and concise description of what you expected to happen.
Since Remix is uses React.js this package should as expected.

System information

  • OS: macOS
  • Version of supabase-js: ^2.10.0
  • Version of Node.js: 19.4.0
artykr commented

I fixed this error in my project by following the steps outlined in Remix documentation: https://remix.run/docs/en/1.14.1/pages/gotchas#md-importing-esm-packages
Basically, you need to add the following setting to your remix.config.js file:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ...
  serverDependenciesToBundle: ['@supabase/auth-ui-react']
};
  • 👍3
vimtor commented

I fixed this error in my project by following the steps outlined in Remix documentation: https://remix.run/docs/en/1.14.1/pages/gotchas#md-importing-esm-packages Basically, you need to add the following setting to your remix.config.js file:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ...
  serverDependenciesToBundle: ['@supabase/auth-ui-react']
};

This worked like a charm! Thank you @artykr :)

stevekrouse commented

Super helpful, thanks @artykr!

silentworks commented

This is not a bug, this is just esm vs cjs and the fix you've used is the way to go. Not every React metaframework is supporting esm, so cjs still have to be shipped, not sure why Remix isn't picking the correct one when it's being used since we ship both esm and cjs with the libraries.

  • 👍1