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

[awwong1]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• 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:

> [email protected] 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

1. git clone https://github.com/awwong1/auth0-sveltekit-edge-issue.git && cd auth0-sveltekit-edge-issue
2. npm i
3. Create the .dev.vars file containing APP_URL, AUTH0_SECRET, AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET environment variables
4. Add http://localhost:5173/api/auth/callback to your Auth0 application allowed callback URLs
5. 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
6. 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.

• https://community.auth0.com/t/sveltekit-integration/72204/3
• https://community.auth0.com/t/provide-example-sdk-for-server-side-authentication-with-auth0-for-sveltekit/105041

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/[email protected] peer
node_modules/@next/env
  @next/env@"14.2.3" from [email protected]
  node_modules/next
    peer next@">=10" from @auth0/[email protected]
    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 #1714 also oauth4webapi explicitly states commonjs is out of scope for their library https://github.com/panva/oauth4webapi/#out-of-scope

[PSoltes]

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]

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 <[email protected]>",
   "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/[email protected], @awwong1/[email protected]