`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:

> 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

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/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 #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 <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

[ThomasChance]

Any update on this?

[arpit-jn]

Thanks for raising this issue — and sorry again for the very delayed response.

From what I can tell, this problem comes from a module format mismatch between the Auth0 SDK and one of its dependencies when used in Vite-based setups.

Root cause

• @auth0/nextjs-auth0/edge internally uses require() (CommonJS) to load the oauth4webapi package:

// In @auth0/nextjs-auth0/dist/auth0-session/client/edge-client.js
const oauth = require('oauth4webapi');

• But oauth4webapi is an ESM-only package ("type": "module" in its package.json), and CommonJS imports like this don't work reliably in environments like Vite or newer Node versions that strictly enforce module boundaries.

Based on what others have tried and confirmed in the issue thread, there are a few possible workarounds:

Option 1: Use Forked Packages (seems most straightforward)

As shared by the issue reporter, this worked for them:
npm install @awwong1/oauth4webapi@1.0.0 @awwong1/nextjs-auth0@1.0.1
These forks convert the ESM dependency to CommonJS, which avoids the format clash.

Option 2: For Next.js + Webpack setups
One contributor mentioned this config helped resolve it:

// next.config.js
module.exports = {
  experimental: { 
    esmExternals: 'loose' 
  }
};

This may work if you're not using Vite but are on Webpack and hitting a similar issue.

Option 3: Patch the module locally
If you're comfortable modifying dependencies manually, here’s a patch you can try:
In node_modules/oauth4webapi/package.json, remove: "type": "module"
In tsconfig.json (if applicable):

• Change module from "ES2020" to "commonjs"
• Remove "verbatimModuleSyntax": true

Then generate a patch:
npx patch-package oauth4webapi
This rewrites the module to work with CommonJS imports.

This issue should be addressed with V4, which improves ESM support and avoids this conflict. If you're able to upgrade, that might be the cleanest path forward.

If you run into similar problems even after upgrading to v4, feel free to share and we’ll do our best to help out.

Thanks again for your patience!

[arpit-jn]

I believe this has been answered hence I am closing the issue. Please upgrade to v4 and feel free to reach out if you still face the issue.