react 19.1.0 breaks use-intl?

[stunaz]

After upgrading to react 19.1.0,
my stopped working:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
Error in renderToPipeableStream: TypeError: Cannot read properties of null (reading 'useContext')
    at process.env.NODE_ENV.exports.useContext (/****/node_modules/use-intl/node_modules/react/cjs/react.development.js:1464:25)

I only use use-intl.
and this line https://github.com/amannn/next-intl/blob/main/packages/use-intl/src/react/IntlProvider.tsx#L25 seems to break with SSR.

any thoughts?

[amannn]

My guess would be this:

You might have more than one copy of React in the same app

Can you try to investigate and verify that your package manager has only installed a single version? Sometimes it can help to remove the lockfile and reinstall.

[stunaz]

indeed, double checked, and find duplicated.
Thanks

[naquiroz]

Hey @amannn , I'm running into this when I reload the page after doing a code change. Looking at the logs it seems like a hydration issue, or because chrome devtools seems to be making a request back, that throws 404. strange thing is that it works on the first render and subsequent re renders, but if I change the code, and then force a reload. It breaks."

I checked, my package.json and pnpm.lock.yaml and no duplicates.

I'm getting:

 ✓ Compiled /_not-found/page in 1573ms
 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 1651ms
 ✓ Compiled in 144ms
 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 160ms
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
🚀 ~ countries: [ 'CL' ]
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
 ⨯ TypeError: Cannot read properties of null (reading 'useState')
    at EditName (src/app/submissions/[id]/edit/edit-form.tsx:15:34)
  13 |  defaultName,
  14 | }: { submissionId: string; defaultName: string }) {
> 15 |  const [name, setName] = useState(defaultName);
     |                                  ^
  16 |  const { execute, isPending } = useAction(
  17 |          updateSubmission.bind(null, submissionId),
  18 |  ); {
  digest: '2438301874'
}
 ⨯ TypeError: Cannot read properties of null (reading 'useState')
    at EditTagline (src/app/submissions/[id]/edit/edit-form.tsx:38:40)
  36 |  defaultTagline,
  37 | }: { submissionId: string; defaultTagline: string}) {
> 38 |  const [tagline, setTagline] = useState(defaultTagline);
     |                                        ^
  39 |  const { execute, isPending } = useAction(
  40 |          updateSubmission.bind(null, submissionId),
  41 |  ); {
  digest: '2015319989'
}
 ⨯ TypeError: Cannot read properties of null (reading 'useState')
    at EditDescription (src/app/submissions/[id]/edit/edit-form.tsx:61:48)
  59 |  defaultDescription,
  60 | }: { submissionId: string; defaultDescription: string }) {
> 61 |  const [description, setDescription] = useState(defaultDescription);
     |                                                ^
  62 |  const { execute, isPending } = useAction(
  63 |          updateSubmission.bind(null, submissionId),
  64 |  ); {
  digest: '3436637826'
}
 ⨯ TypeError: Cannot read properties of null (reading 'useContext')
    at ProductCard (src/components/product-card.tsx:51:22)
  49 |  const displayCountries = countries.slice(0, 3);
  50 |  const remainingCount = countries.length - 3;
> 51 |  const lang = useLocale();
     |                      ^
  52 |  console.log("🚀 ~ lang:", lang)
  53 |  const officialNames = countryList.getNames(
  54 |          normalizeLocale(lang) as TCountryCode, {
  digest: '3920304311'
}
 GET /submissions/1879a061-3f74-4323-8693-a64ea12f36d9/edit 200 in 1746ms
 GET /favicon.ico?favicon.45db1c09.ico 200 in 41ms