react-router@7.x breaks with React 18: "use is not exported from 'react'"

[klaveriuzent]

Reproduction

💥 Bug Description
When using react-router@7.7.0 with react@18.3.1, the build fails with the following error:

Attempted import error: 'use' is not exported from 'react'

📷

📌 Cause
This happens because react-router@7.x is using use() — a feature only available in upcoming React 19 — but the package’s peerDependencies still allow installing it alongside React 18, which leads to an import error during build.

System Info

System:
  OS: Windows 10 64-bit

Binaries:
  Node:  v22.13.0
  npm: v11.4.2

npmPackages:
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "@types/react": "^19.1.8",
  "@types/react-dom": "^19.1.6",
  "typescript": "^4.9.5"

Used Package Manager

npm

Expected Behavior

Either: react-router@7.x should require React 19 explicitly
Or: react-router@7.x should not use use() if compatibility with React 18 is expected

Actual Behavior

When building with react-router@7.7.0 and react@18.3.1, the build fails with:
Attempted import error: 'use' is not exported from 'react'
This suggests react-router is using a feature not available in React 18.

[andy-k]

likely cause: https://github.com/remix-run/react-router/pull/13700/files#diff-6a735542f4453c81a91fb14688ac8420daf4c6823e756514ef151cbc31faf0ddR101

[huv1k]

I think it's problem that react 18 doesn't have it, you need canary release https://18.react.dev/reference/react/use. Can you try it with it or updating react to 19? 😅 BTW you are using:

  "@types/react": "^19.1.8",
  "@types/react-dom": "^19.1.6",

Types for version 19, but you are actually using react 18.

[klaveriuzent]

I initially attempted to upgrade to React 19, but during the process I discovered that several dependencies in the project were not yet compatible. To avoid breaking the entire application, I decided to revert the React version back to 18. However, some type definitions like @types/react and @types/react-dom had already been updated to version 19, which I overlooked at the time 😅.

[timdorr]

Can you please add a reproduction to this issue?

Are you attempting to use RSC explicitly with React 18? Because that won't work, since it wasn't shipped until React 19.

[klaveriuzent]

Hi, just to clarify — I’m not using RSC explicitly. The error came from upgrading to react-router@7.7.0 while still on React 18, and I overlooked that @types/react had already moved to 19, which caused the use import error.

Since it’s clear that this isn’t a bug in the library but rather a version mismatch, I’ll close this now.
Thanks again for the responses!

[GeoffKarnov]

I believe this is still an issue and is unrelated to the types.

Here is a minimal reproduction:

package.json

{
  "name": "react-router-issue",
  "version": "1.0.0",
  "dependencies": {
    "react": "18.3.1",
    "react-router": "7.7.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^5.0.0"
  },
  "scripts": {
    "build": "webpack"
  }
}

webpack.config.js

module.exports = {
  mode: "production",
  entry: "./src/App.js",
  resolve: {
    extensions: [".js"],
  },
};

src/App.js

import { RouterProvider } from "react-router";

export default RouterProvider;

$ pnpm install && pnpm build
Lockfile is up to date, resolution step is skipped
Already up to date
Done in 264ms using pnpm v10.13.1

> react-router-issue@1.0.0 build /home/me/Dev/react-bug
> webpack

assets by status 0 bytes [cached] 1 asset
orphan modules 563 KiB [orphan] 11 modules
./src/App.js 79 bytes [built] [code generated]

ERROR in ./node_modules/.pnpm/react-router@7.7.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router/dist/development/chunk-T3VM44WY.mjs 2499:18-28
export 'use' (imported as 'React5') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version)
 @ ./node_modules/.pnpm/react-router@7.7.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router/dist/development/index.mjs 12:0-34:30 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2 144:0-273:2
 @ ./src/App.js 1:0-46 3:15-29

webpack 5.100.2 compiled with 1 error in 534 ms
 ELIFECYCLE  Command failed with exit code 1.

Note that this does NOT happen with: mode: "development"

Edit: I also assume that v7 is still expected to be compatible with react 18

Edit 2: Can someone re-open this issue? (rather than making a new one..)

[therealgilles]

Just got the same error:

export 'use' (imported as 'React5') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version)

[kolarski]

I just got the same error as well and broke the production deployment.

Something broke last days without changes from the code base:

The setup is:

  "react-router": "^7.0.1",
   "react": "^18.3.1",
   "react-dom": "^18.3.1",

The issue should be reopened.

[yecongling]

Just got the same error:

export 'use' (imported as 'React5') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version)

me too,the issue should be reopened.

[gillycheesesteak]

Same issue here, downgrading back to v7.6.3 resolves it