search

supabase-community / auth-ui

Pre-built Auth UI for React
https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
MIT License
486 stars 120 forks source link

React.js package not working on Remix.run #158

Closed vimtor closed 1 year ago

vimtor commented 1 year ago

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 }} />; ); }



4. 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 1 year ago

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']
};
vimtor commented 1 year ago

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 1 year ago

Super helpful, thanks @artykr!

silentworks commented 1 year ago

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.