Skip to content

fix: add React 18-compatible useActionState shim and update imports#546

Open
ajphilton wants to merge 1 commit intomedusajs:mainfrom
ajphilton:fix/react18-useactionstate-shim
Open

fix: add React 18-compatible useActionState shim and update imports#546
ajphilton wants to merge 1 commit intomedusajs:mainfrom
ajphilton:fix/react18-useactionstate-shim

Conversation

@ajphilton
Copy link
Copy Markdown

Summary

This PR adds a small compatibility shim for useActionState so that the
Next.js starter can run correctly on React 18 while the codebase still uses
the React 19-style useActionState API.

React 18 does not yet export useActionState from "react", which causes
build/runtime errors for projects using the current starter.

What this changes

  1. New shim utilities
  • src/lib/react-compat.ts

    • Adds useActionStateShim, implemented on top of useState +
      useTransition.
    • API shape: [state, dispatch, isPending], matching the React 19
      useActionState tuple.
  • src/lib/react-use-action-state-shim.ts

    • Thin wrapper that re-exports the shim as useActionState so components
      can simply do:
      import { useActionState } from "@lib/react-use-action-state-shim"
  1. Update imports in components that used useActionState from "react"

Replaced:

import { useActionState } from "react"

with:

import { useActionState } from "@lib/react-use-action-state-shim"

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

•	The shim only affects components that were already calling

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:

import { useActionState } from "react"

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).

@vercel
Copy link
Copy Markdown

vercel bot commented Nov 28, 2025

@ajphilton is attempting to deploy a commit to the medusajs Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant