Build error after migrating to React 19 and Next.js 15

Getting this error after migrating to react 19 and nextjs 15.

Failed to compile.

./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
Attempted import error: 'useRef' is not exported from 'react' (imported as 'te').

Import trace for requested module:
./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
./lib/auth-client.ts
./lib/auth-functions.ts

./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'ne').

Import trace for requested module:
./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
./lib/auth-client.ts
./lib/auth-functions.ts


> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

Failed to compile.

./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
Attempted import error: 'useRef' is not exported from 'react' (imported as 'te').

Import trace for requested module:
./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
./lib/auth-client.ts
./lib/auth-functions.ts

./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'ne').

Import trace for requested module:
./node_modules/.pnpm/better-auth@1.0.14/node_modules/better-auth/dist/react.js
./lib/auth-client.ts
./lib/auth-functions.ts


> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

As well as an error making me download the oslo package

 ⚠ ./node_modules/.pnpm/[email protected]/node_modules/better-auth/dist
Package oslo can't be external
The request oslo/crypto matches serverExternalPackages (or the default list).
The request could not be resolved by Node.js from the project directory.
Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
Try to install it into the project directory by running npm install oslo from the project directory.

 ⚠ ./node_modules/.pnpm/[email protected]/node_modules/better-auth/dist
Package oslo can't be external
The request oslo/crypto matches serverExternalPackages (or the default list).
The request could not be resolved by Node.js from the project directory.
Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
Try to install it into the project directory by running npm install oslo from the project directory.

Here are the dependencies I updated:

  "dependencies": {
    "better-auth": "1.0.14",
    "drizzle-orm": "^0.37.0",
    "next": "15.0.4",
    "react": "^19",
    "react-dom": "^19",
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "drizzle-kit": "^0.29.1",
    "eslint": "^9",
    "eslint-config-next": "15.0.4",
    "typescript": "^5"
  }

  "dependencies": {
    "better-auth": "1.0.14",
    "drizzle-orm": "^0.37.0",
    "next": "15.0.4",
    "react": "^19",
    "react-dom": "^19",
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "drizzle-kit": "^0.29.1",
    "eslint": "^9",
    "eslint-config-next": "15.0.4",
    "typescript": "^5"
  }

8 Replies

bekacru•3mo ago

don't use authClient in next middleware. If you need to create a new authClient from the native path. Meaning

import { createAuthClient } from "better-auth/client" // not from react

const client = createAuthClient({
    baseURL: ""
})

import { createAuthClient } from "better-auth/client" // not from react

const client = createAuthClient({
    baseURL: ""
})

KazzOP•3mo ago

That fixed it for me, but may i ask why its client and not react? Because in the documentation its being imported from /react, so is the documentation outdated or am I missing something?

Ping•3mo ago

Just an assumption: /react is still correct, but only for code environments ran with React. Next middleware doesn't work with React, so you must use the /client version.

KazzOP•3mo ago

I see, for now i changed my whole auth client to /client and it’s working fine so far on Next.js 15. If i started facing problems the i can just create an auth client specific for middleware

Ping•3mo ago

Yeap.

bekacru•3mo ago

you should just create auth client from /client just for the middleware so you can have useSession for react in other parts of your app

Unknown User•2mo ago

Message Not Public

KazzOP•2mo ago

Yeah i think it should be included in the middleware part of the documentation for nextjs https://www.better-auth.com/docs/integrations/next#middleware

Next.js integration | Better Auth

Integrate Better Auth with Next.js.

Gaming

Programming

Build error after migrating to React 19 and Next.js 15

Did you find this page helpful?