BA
Better Auth•21h ago
michidk

Attempted import error: 'useRef' is not exported from 'react' (imported as 'useRef').

@Better Auth Build Error with better-auth + Next.js 15 + React 19 Getting webpack errors when running next build: Attempted import error: 'useRef' is not exported from 'react' (imported as 'useRef'). Attempted import error: 'useSyncExternalStore' is not exported from 'react'. Import trace: ./node_modules/better-auth/dist/client/react/index.mjs Environment: - better-auth: 1.3.27 & 1.3.28 (both fail) - Next.js: 15.4.7 - React: 19.1.0 Workaround: Add this to next.config.js: 
const path = require("path");

module.exports = {
  transpilePackages: ["better-auth"],
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'better-auth/react$': path.resolve(__dirname, 'node_modules/better-auth/dist/client/react/index.cjs'),
    };
    return config;
  },
};
const path = require("path");

module.exports = {
  transpilePackages: ["better-auth"],
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'better-auth/react$': path.resolve(__dirname, 'node_modules/better-auth/dist/client/react/index.cjs'),
    };
    return config;
  },
};
This forces webpack to use the CommonJS version instead of the ESM .mjs file. Anyone else hitting this issue?
2 Replies
Better Auth
Better Auth•21h ago
Hey there! 👋 I can see you're hitting a common build issue with better-auth and Next.js 15. This is actually a known problem that several community members have encountered! What's Happening The error you're seeing occurs because webpack is trying to import React hooks from the ESM version of better-auth (index.mjs), but there's a mismatch in how the React exports are being resolved during the build process [1][2][3]. Solutions That Have Worked Your workaround is solid! Here are a few approaches that have helped others: 1. Force CommonJS Resolution (Your Approach) 
const path = require("path");

module.exports = {
  transpilePackages: ["better-auth"],
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'better-auth/react$': path.resolve(__dirname, 'node_modules/better-auth/dist/client/react/index.cjs'),
    };
    return config;
  },
};
const path = require("path");

module.exports = {
  transpilePackages: ["better-auth"],
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'better-auth/react$': path.resolve(__dirname, 'node_modules/better-auth/dist/client/react/index.cjs'),
    };
    return config;
  },
};
2. Separate Export Declarations Some users found success by modifying how they export the handlers in their API route [18]: 
// Instead of: export const { GET, POST } = toNextJsHandler(auth);
const handlers = toNextJsHandler(auth);
export const GET = handlers.GET;
export const POST = handlers.POST;
// Instead of: export const { GET, POST } = toNextJsHandler(auth);
const handlers = toNextJsHandler(auth);
export const GET = handlers.GET;
export const POST = handlers.POST;
3. Version Alignment Double-check that your React version is properly installed. The error suggests React 19 hooks aren't being recognized, which can sometimes be a dependency resolution issue [2][4]. Why This Happens This appears to be related to how Next.js 15's webpack handles ESM/CommonJS interop with React 19, particularly around the newer hooks like
Better Auth
Better Auth•21h ago
useSyncExternalStore [1][2][3]. The better-auth team has been working on these compatibility issues across different versions. Additional Tips - Clear your .next cache and node_modules before rebuilding - If using pnpm, you might need to add resolutions to your package.json - Make sure you're not mixing React 18 and 19 dependencies Have you tried clearing your build cache after applying the webpack config? Sometimes Next.js holds onto old module resolutions. Also, are you using any other React-based libraries that might be causing version conflicts? 🤔 Sources: [1] Next.js build error in auth client [2] useSyncExternalStore not recognized in react19 [3] Better Auth's React hooks fail when used with Next.js 15 App Router, throwing "Cannot read properties of null (reading 'useRef')" error. [4] nextjs doesn't build — Better Auth is powered by https://clarm.com
GitHub
Next.js build error in auth client · Issue #1864 · better-auth/be...
Is this suited for github? Yes, this is suited for github To Reproduce Install better auth in next.js project use auth client in app directory try execute next build Current vs. Expected behavior e...
GitHub
useSyncExternalStore not recognized in react19 · Issue #2310 · be...
Is this suited for github? Yes, this is suited for github To Reproduce Terminal error upon bun run build bun run build $ next build â–² Next.js 15.3.0 - Environments: .env Creating an optimized produ...
GitHub
Better Auth's React hooks fail when used with Next.js 15 App Router...
Is this suited for github? Yes, this is suited for github To Reproduce Create Next.js 15 app with App Router Install better-auth@1.2.10 Create auth client: import { createAuthClient } from "be...
GitHub
nextjs doesn't build · Issue #1793 · better-auth/better-auth
Is this suited for github? Yes, this is suited for github To Reproduce $ pnpm build > nextjs-template@0.1.0 build C:\Users\mario\OneDrive\Desktop\fe\new\Easy-Check-In > pnpm dr:build &&am...

Did you find this page helpful?