Stack Overflow
Stack Overflow

Questions tagged [react-18]

153 questions
28
votes
7 answers

create-react-app dependency version issues with React 18

npx create-react-app my-project results in the following dependency errors: npx version: 8.5.0 Installing template dependencies using npm... npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While…
hayata_suenaga
  • 642
  • 1
  • 5
  • 16
18
votes
7 answers

React-18 | You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before

In my react-based library, I was using ReactDOM.render at 3 different levels. The first level is at the root level and I am clear and replaced it using the below code: import { createRoot } from 'react-dom/client'; const root =…
RahulGarg
  • 185
  • 1
  • 1
  • 4
8
votes
1 answer

React 18 async way to unmount root

I have a rare usecase where I need to register multiple roots in my React Component and destroy them when the component unmounts. Obviously, it happens that I unmount a root when its rendering. I simulated that case by calling root.unmount() right…
jvllmr
  • 350
  • 2
  • 11
6
votes
2 answers

Upgraded to React 18 - failing tests -- now must wrap many test assertions in "await waitFor()"

So I updated to React 18 and now I am getting TONS of act warnings as well as failing tests. versions: react: 18.2.0 react-dom: 18.2.0 jest: 29.3.1 jest-environment-jsdom: 29.3.1 ts-jest: 29.0.3 typescript: 4.9.4 console.error Warning: An update to…
Chris Cunningham
  • 111
  • 5
6
votes
0 answers

Do i need to upgrade react-scripts while upgrading from React 17 to React 18

I have a react application using the react version 17.0.2 and react-scripts version 4.0.3 I updated my react version to 18 but i didn't updated my react-scripts. Is this a right approach? Do i really need to upgrade react-scripts as well to…
Jagadeesh Kumar CK
  • 217
  • 3
  • 13
5
votes
2 answers

ReactDOM.render is no longer supported in React 18

Im using rerender and renderHook in react testing library. Recently upgraded react version to 18. Got below error in one of the test case. console.error Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you…
John
  • 2,035
  • 13
  • 35
  • 44
5
votes
3 answers

Handling Non Idempotent Mutations inside useEffect with StrictMode Enabled

I am working on a component where I read the query parameters from the URL and post a request inside useEffect, due to strict mode this is getting executed twice. The request is non-idempotent, what is the best way to handle this scenario? I was…
king.reflex
  • 313
  • 4
  • 10
5
votes
4 answers

npx react-native link command not working in latest version of react native. How can we link custom font family in my project

I want to use a custom font family in my react-native project for that when I run the command npx react-native link it shows me the error error Unrecognized command "link". As I checked this may be because react-native removed the link command from…
Ashirbad Panigrahi
  • 634
  • 6
  • 13
5
votes
0 answers

What's the correct way to fetch data and put into a store in React 18?

With React 18 Strict mode, useEffect runs twice, so data fetching in useEffect without workarounds is not good. I watched some videos, read some articles saying that we shouldn't fetch data in this hook, however I have not seen practical examples…
otavio1992
  • 712
  • 2
  • 6
  • 18
5
votes
2 answers

React 18: how to force synchronous rendering?

After upgrading to React 18, I am having issues with Leaflet popup rendering. It seems the new rendering function has become asynchronous, which breaks Leaflet popup display (because Leaflet needs to compute the size of the popup for positioning,…
piero-la-lune
  • 111
  • 5
4
votes
2 answers

Switching from ReactDOM.render to createRoot makes simple jest test fail

I just started studying "Mastering React Test-Driven Development" by Daniel Irvine, and I figured that it shouldn't be too hard to convert the examples to React 18. But I am running into trouble converting the very first test in the book using…
jaybulsara
  • 101
  • 1
  • 8
4
votes
1 answer

Parcel and react 18 project set up error. @parcel/transformer-js: Unexpected token `)`. Expected this, import, async, function

Server running at http://localhost:1234 Build failed. @parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number,…
Owen Alikula
  • 408
  • 3
  • 11
4
votes
1 answer

Update Next.js to React 18 breaks my API calls using next-auth

This is a strange one, but here's the situation. I'm using Next.js with the Next-auth package to handle authentication. I'm not using Server-Side rendering, it's an admin area, so there is no need for SSR, and in order to authenticate users, I've…
Ruby
  • 2,207
  • 12
  • 42
  • 71
4
votes
1 answer

In React 18, is useEffect's function guaranteed to run AFTER a Suspense promise completes?

I have a simple master-detail scenario where on the left side, I load a list of cities using useSwr with a REST service, then on the right side I have a city detail windows that also uses useSwr to load a single city (either from clicked on left, or…
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188
4
votes
1 answer

createRoot(...): Target container is not a DOM element in React Test file

I'm using React-18.0.0 in my project and in the test file I'm getting an error something below createRoot(...): Target container is not a DOM element. My test file is : import ReactDOM from 'react-dom/client'; import { render, screen } from…
KARTHIKEYAN.A
  • 18,210
  • 6
  • 124
  • 133
1
2 3
…
10 11