fix: add React 18-compatible useActionState shim and update imports #546
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a small compatibility shim for
useActionStateso that theNext.js starter can run correctly on React 18 while the codebase still uses
the React 19-style
useActionStateAPI.React 18 does not yet export
useActionStatefrom"react", which causesbuild/runtime errors for projects using the current starter.
What this changes
src/lib/react-compat.tsuseActionStateShim, implemented on top ofuseState+useTransition.[state, dispatch, isPending], matching the React 19useActionStatetuple.src/lib/react-use-action-state-shim.tsuseActionStateso componentscan simply do:
useActionStatefrom"react"Replaced:
with:
in the following files:
• src/modules/account/components/profile-phone/index.tsx
• src/modules/account/components/profile-billing-address/index.tsx
• src/modules/account/components/profile-name/index.tsx
• src/modules/account/components/profile-password/index.tsx
• src/modules/account/components/address-card/add-address.tsx
• src/modules/account/components/address-card/edit-address-modal.tsx
• src/modules/account/components/profile-email/index.tsx
• src/modules/account/components/login/index.tsx
• src/modules/account/components/register/index.tsx
• src/modules/account/components/transfer-request-form/index.tsx
• src/modules/checkout/components/addresses/index.tsx
No other behaviour changes.
Why this is safe
useActionState, and it matches the expected tuple signature.
• If/when the starter upgrades fully to React 19, this shim can be removed
and the imports swapped back to:
with minimal code churn.
Testing notes
I verified that the project installs and builds with the shim wired in.
I wasn’t able to fully exercise all runtime paths against a real Medusa
backend (publishable key constraints), so CI + your existing test harness
will provide a more robust verification than I can locally.
Happy to adjust naming/locations if you’d prefer these helpers live
somewhere else (e.g. a more general react-compat/hooks module).