React 18 "React.use" webpack fix #14113
Conversation
This commit addresses webpack module resolution errors that occur when bundling React Router's RSC features in React 18 environments, where React.use does not exist. **Problem:** Webpack's static analysis phase occurs before any runtime code executes. When webpack encounters `React.use(getPayload())` in the source code, it attempts to validate that the `use` export exists in the React module during build time. In React 18, this export doesn't exist, causing the build 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) ``` **Solution:** Implemented `react18compatibleUse` function that: Moves the property resolution from build-time to runtime, bypassing webpack's static validation while maintaining the same functionality. I tried many other alternate solutions but they all failed due to them being runtime solutions, but webpack's static analysis happens _before_ runtime. This solution: 1. **Hides property access from static analysis** using dynamic property lookup with a string variable instead of direct `React.use` access 2. **Provides React 18/19 compatibility** by detecting if React.use exists at runtime and falling back to an informative error function 3. **Maintains identical API** to React.use, enabling seamless migration when React 18 support is eventually dropped 4. **Preserves type safety** with proper generic typing matching React 19's Usable<T> interface
🦋 Changeset detectedLatest commit: ee71d02 The changes in this PR will be included in the next version bump. This PR includes changesets to release 11 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Hi @GeoffKarnov, Welcome, and thank you for contributing to React Router! Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once. You may review the CLA and sign it by adding your name to contributors.yml. Once the CLA is signed, the If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected]. Thanks! - The Remix team |
|
I'm not sure how to add tests for this to this repository, since the problem requires react 18 and webpack I have verified it works by manually testing against the reproduction repository: timdorr/rr-treeshaking-issue@5fed997 |
|
Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳 |
|
Thanks! I made a small update to follow the pattern we used for this type of issue when supporting React 17/18 at the same time but this is definitely the way to go. I'm a bit surprised webpack is inspecting code that isn't actually imported by the app code but 🤷 |
|
Great. Thanks! |
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
3 participants
This commit addresses webpack module resolution errors that occur when bundling React Router's RSC features in React 18 environments, where React.use does not exist.
Problem:
Webpack's static analysis phase occurs before any runtime code executes. When webpack encounters
React.use(getPayload())in the source code, it attempts to validate that theuseexport exists in the React module during build time. In React 18, this export doesn't exist, causing the build error:Solution:
Implemented
react18compatibleUsefunction that:Moves the property resolution from build-time to runtime, bypassing webpack's static validation while maintaining the same functionality.
I tried many other alternate solutions but they all failed due to them being runtime solutions, but webpack's static analysis happens before runtime.
This solution:
React.useaccessFixes #14020