Regression: React.use build error with React 18 and Webpack

[anomiex]

Which project does this relate to?

Router

Describe the bug

Bug #6332 was resolved by #6355, which produced code like this in the published package:

const REACT_USE = "use";
const reactUse = React[REACT_USE];

It appears that #6926 somehow caused code like this to be produced instead:

var reactUse = React$1["use"];

This no longer avoids webpack's check, causing the error to occur again.

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

1. Create a new project with the following files:
   • package.json:

     {
       "name": "react-router-issue",
       "version": "1.0.0",
       "dependencies": {
         "@tanstack/react-router": "^1.167.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "webpack": "^5.0.0",
         "webpack-cli": "^6.0.0"
       },
       "scripts": {
         "build": "webpack"
       }
     }

   • webpack.config.js

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

   • src/App.js

     import {
       Link,
       notFound,
       redirect,
       useLinkProps,
       useNavigate,
       useParams,
       useSearch
     } from "@tanstack/react-router";
     
     export {
       Link,
       notFound,
       redirect,
       useLinkProps,
       useNavigate,
       useParams,
       useSearch
     };

2. Run pnpm install && pnpm build

Expected behavior

It builds successfully.

Screenshots or Videos

Build fails with the following error:

ERROR in ./node_modules/.pnpm/@tanstack+react-router@1.168.19_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@tanstack/react-router/dist/esm/utils.js 7:15-29
export 'use' (imported as 'React$1') 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/@tanstack+react-router@1.168.19_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@tanstack/react-router/dist/esm/awaited.js 1:0-38 8:5-13 8:22-30
 @ ./node_modules/.pnpm/@tanstack+react-router@1.168.19_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@tanstack/react-router/dist/esm/index.js 2:0-49 34:0-1449 34:0-1449
 @ ./src/App.js 1:0-9:32 11:0-19:2 11:0-19:2 11:0-19:2 11:0-19:2 11:0-19:2 11:0-19:2 11:0-19:2

Platform

• Router / Start Version: @tanstack/react-router 1.167.2 – 1.168.19
• OS: Linux
• Browser: N/A
• Browser Version: N/A
• Bundler: webpack
• Bundler Version: 5.106.1

Additional context

Editing node_modules/@tanstack/react-router/dist/esm/utils.js to have code like this, similar to the code in 1.167.1, makes the build succeed again. Apparently the separate variable is needed to avoid webpack "seeing" the use of use.

var REACT_USE = "use";
var reactUse = React$1[REACT_USE];