`ERR_REQUIRE_ESM` on `vite build` when using '@auth0/nextjs-auth0/edge'

awwong1 commented 5 months ago

Checklist

[X] The issue ~can be reproduced in the nextjs-auth0 sample app~ (or N/A).
[X] I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
[X] I have looked into the API documentation and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] I agree to the terms within the Auth0 Code of Conduct.

Description

This issue arises when using nextjs-auth0 with Vite and is not relevant to NextJS.

When import { initAuth0 } from '@auth0/nextjs-auth0/edge' is encountered while using vite, the following error is thrown:

[vite] Error when evaluating SSR module /opt/buildhome/auth0-sveltekit-edge-issue/src/routes/api/auth/[auth0]/+server.ts: failed to import "@auth0/nextjs-auth0/edge"
|- Error [ERR_REQUIRE_ESM]: require() of ES Module /opt/buildhome/auth0-sveltekit-edge-issue/node_modules/oauth4webapi/build/index.js from /opt/buildhome/auth0-sveltekit-edge-issue/node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js not supported.
Instead change the require of index.js in /opt/buildhome/auth0-sveltekit-edge-issue/node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/opt/buildhome/auth0-sveltekit-edge-issue/node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js:5:36)

When building:

> sveltekit-auth0-edge-issue@0.0.1 build
> vite build

vite v5.2.11 building SSR bundle for production...
"confetti" is imported from external module "@neoconfetti/svelte" but never used in "src/routes/sverdle/+page.svelte".
✓ 110 modules transformed.

/opt/buildhome/auth0-sveltekit-edge-issue/node_modules/wrangler/wrangler-dist/cli.js:29749
            throw a;
            ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /opt/buildhome/auth0-sveltekit-edge-issue/node_modules/oauth4webapi/build/index.js from /opt/buildhome/auth0-sveltekit-edge-issue/node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js not supported.
Instead change the require of index.js in /opt/buildhome/auth0-sveltekit-edge-issue/node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/opt/buildhome/auth0-sveltekit-edge-issue/node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js:5:36)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:814:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.10.0

Expected behaviour is that the edge variant of this library can be imported without error.

Reproduction

Minimal reproducible example: https://github.com/awwong1/auth0-sveltekit-edge-issue

git clone https://github.com/awwong1/auth0-sveltekit-edge-issue.git && cd auth0-sveltekit-edge-issue
npm i
Create the .dev.vars file containing APP_URL, AUTH0_SECRET, AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET environment variables
Add http://localhost:5173/api/auth/callback to your Auth0 application allowed callback URLs
npm run dev, observe that http://localhost:5173/api/auth/login, http://localhost:5173/api/auth/callback, http://localhost:5173/api/auth/me, http://localhost:5173/api/auth/logout all function appropriately
Replace initAuth0 with /edge variant , observe build/run errors

Additional context

Addressing this issue would help unlock using Auth0 with Sveltekit in the server side rendered edge environment.

nextjs-auth0 version

3.5.0

Next.js version

14.2.3

nextjs is not used in the reproducible example, but this version number was pulled from the node_modules/@next/env/package.json, npm explain @next/env

@next/env@14.2.3 peer
node_modules/@next/env
@next/env@"14.2.3" from next@14.2.3
node_modules/next
peer next@">=10" from @auth0/nextjs-auth0@3.5.0
node_modules/@auth0/nextjs-auth0
  @auth0/nextjs-auth0@"^3.5.0" from the root project

Node.js version

v20.10.0

EDIT: might be a duplicate of https://github.com/auth0/nextjs-auth0/issues/1714 also oauth4webapi explicitly states commonjs is out of scope for their library https://github.com/panva/oauth4webapi/#out-of-scope

PSoltes commented 5 months ago

same here on webpack Next.js

Import trace for requested module:
./node_modules/@auth0/nextjs-auth0/dist/edge.js
./utils/auth/node.ts
./app/api/auth/[auth0]/route.ts
 ⨯ ./node_modules/@auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js:5:1
Module not found: ESM packages (oauth4webapi) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

EDIT: setting experimental: { esmExternals: "loose" } workaround(?) fixes the issue

funnily enough we run prod app with same config as this one and no error is present eg. one app - type module, 3.5.0 this package - 2.10.3 oauth4web, node 20, webpack - works other app (freshly created via create-next-app) - type module, 3.5.0 - 2.10.3 oauth4web, node 20, webpack - errors on import

awwong1 commented 5 months ago

I was also able to workaround the ERR_REQUIRE_ESM error by building panva/oauth4webapi as a commonjs module. See patch:

diff --git a/package.json b/package.json
index 8fce4f2..1419e1f 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,6 @@
   "license": "MIT",
   "author": "Filip Skokan <panva.ip@gmail.com>",
   "sideEffects": false,
-  "type": "module",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
   "files": [
diff --git a/tsconfig.json b/tsconfig.json
index 7d1a54f..8a03280 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "target": "ES2020",
-    "module": "ES2020",
+    "module": "commonjs",
     "lib": ["ES2020", "DOM", "DOM.Iterable", "ES2022.Error", "ES2021.Promise"],
     "strict": true,
     "removeComments": true,
@@ -13,7 +13,6 @@
     "noImplicitAny": true,
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
-    "verbatimModuleSyntax": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,

~~After linking the dependency, this reveals another issue as the @auth0/nextjs-auth0/edge import appears to still use node modules 'fs' and 'url'.~~ EDIT: fs/url import was due to dev artifacts, does not appear with only dist assets and with oauth4webapi built for commonjs.

EDIT: error is no longer present with @awwong1/oauth4webapi@1.0.0, @awwong1/nextjs-auth0@1.0.1

auth0 / nextjs-auth0