AI Studio tends to get confused about which version of React it should use. As a result, it tends to fail to create apps as it combines both 18 and 19 in the same app it generates. And this is an annoying bug to fix as AI Studio is a bit unclear about this error.
Can you please fix this so AI Studio will never try to combine multiple React versions together?
6 Likes
Hello,
Could you please confirm if you are currently using Build mode in AI Studio?
2 Likes
“Build mode”? Had to think about that but then saw the Chat/Stream/Build/History options on the left. Yeah, I’m definitely in “Build” mode for this.
I generally use it at a wider resolution, though. My screen is 5120x1440 so I really like this layout.
The problem is generally in the index.html where the import map starts to combine React 18 and React 19 modules.
1 Like
I am experiencing the same thing.
2 Likes
I am expering the same thing with Gemini 2.5 Pro
1 Like
I’ve been experiencing this exact same issue for months. AI Studio simply automatically injects React 19, causing several bugs, including the inability to render the preview… It’s unfortunate that an error like this continues to happen so frequently.
Could you please share some of the prompts, so that I can try to repro this issue?
1 Like
It generally starts by creating a new React App. For example: “Let’s make a simple clock app”. Then the index.html pahe starts with:
{
"imports": {
"react-dom/": "https://esm.sh/react-dom@^19.1.1/",
"react/": "https://esm.sh/react@^19.1.1/",
"react": "https://esm.sh/react@^19.1.1"
}
}
Then I asked" Put two eyes on the app that will look at the cursor, following it around the screen." Which works fine.
Next: “Use a timeout to make the eyes blink every 4 to 8 seconds.” And still everything is okay.
But then I ask: “Can you add the React Router libraries?” and the App goes blank with no error messages.
{
"imports": {
"react-dom/": "https://esm.sh/react-dom@^19.1.1/",
"react/": "https://esm.sh/react@^19.1.1/",
"react": "https://esm.sh/react@^19.1.1",
"react-router-dom/": "https://esm.sh/react-router-dom@^6.25.1/",
"react-router/": "https://esm.sh/react-router@^6.25.1/",
"react-router-dom": "https://esm.sh/react-router-dom@^7.8.0"
}
}
As you can see, AI Studio included more React modules, but those are probably the wrong versions. Se next I say: “The App is now just blank.” and AI Studio tries to repair it:
{
"imports": {
"react-dom/": "https://esm.sh/react-dom@^19.1.1/",
"react/": "https://esm.sh/react@^19.1.1/",
"react": "https://esm.sh/react@^19.1.1",
"react-router-dom": "https://esm.sh/react-router-dom@^6.25.1",
"react-router": "https://esm.sh/react-router@^6.25.1"
}
}
It removed one import, though. So now I say: “Still blank!” and AI Studio finds an error, but still lails to solve it:
You’ve hit on a subtle but important issue with the recent upgrade to React 19! The type React.FC (or React.FunctionComponent) has been changed in React 19 and is generally discouraged now. Its usage was causing a compatibility error that resulted in the blank screen.
I’ve gone through the components and updated their definitions to the modern, simpler syntax by removing the : React.FC type annotation. This resolves the error and is also better practice moving forward.
The app should now render correctly. Here are the updated files:
Yeah, well. Nope. Still failing. And this tends to result in a cascade of failures from the AI as it tries to fic the code in all the wrong locations. But explicitly telling it to check the imports with “Can you please check all the imports and make sure they are the correct version?” gets close:
{
"imports": {
"react": "https://esm.sh/react@^19.1.1",
"react-dom/client": "https://esm.sh/react-dom@^19.1.1/client",
"react-router-dom": "https://esm.sh/react-router-dom@^6.25.1",
"react-router": "https://esm.sh/react-router@^6.25.1",
"react-dom/": "https://esm.sh/react-dom@^19.1.1/",
"react/": "https://esm.sh/react@^19.1.1/"
}
}
Then again, I’m no React-sexpert so this might still be very wrong. But there’s one more React-19 import in there. Repeating my last request now gives:
{
"imports": {
"react": "https://esm.sh/react@19.1.1",
"react-dom/client": "https://esm.sh/react-dom@19.1.1/client",
"react-router-dom": "https://esm.sh/react-router-dom@6.25.1",
"react-dom/": "https://esm.sh/react-dom@^19.1.1/",
"react/": "https://esm.sh/react@^19.1.1/"
}
}
That removed one of the bad imports but there’s still another bad one. So repeat the prompt yet again and now I get:
{
"imports": {
"react": "https://esm.sh/react@19.0.0-rc.0",
"react/jsx-runtime": "https://esm.sh/react@19.0.0-rc.0/jsx-runtime",
"react-dom/client": "https://esm.sh/react-dom@19.0.0-rc.0/client",
"react-router-dom": "https://esm.sh/react-router-dom@6.25.1",
"react-dom/": "https://esm.sh/react-dom@^19.1.1/",
"react/": "https://esm.sh/react@^19.1.1/"
}
}
But this time AI Studio sees something is wrong and comes with the “Auto-fix” button, which I click. And AI Studio says:
Of course. I’ve analyzed the code and found the source of the TypeError. You’re running into a classic issue with importmap configurations when dealing with complex libraries like React.
The problem is in your index.html file. The importmap contains conflicting and redundant entries for React:
codeJSON
{ "imports": { "react": "https://esm.sh/react@19.0.0-rc.0", /* ... other correct entries ... */ "react-dom/": "https://esm.sh/react-dom@^19.1.1/", "react/": "https://esm.sh/react@^19.1.1/" } }The last two lines, “react-dom/” and “react/”, create ambiguity. They can cause the browser to load a different version of React than the one specified (19.0.0-rc.0), or fail to load it entirely. When this happens, the React object is null in your components, and any attempt to access its properties (like React.useRef or React.useState) will fail with the error you’re seeing.
I will fix this by removing these conflicting entries, leaving a clean and unambiguous map that ensures only one version of React is loaded. The React components themselves are perfectly fine.
I love how confident AI Studio is, but this still didn’t fix anything… And the biggest problem is that users might keep asking AI Studio to fix it without AI Studio ever succeeding.
Fortunately, up to this point I had not saved the project so I do a reload of the page and my old, working version is looking right back at me again. 
Or, to keep it short: the problem generally comes when AI Studio is adding and importing more React libraries.
First off, I don’t know how to code but I do know how to watch Youtube videos which got me to this moment. @Katje I was that guy on the never ending loop of asking why the preview doesn’t work anymore. When code assist kept coming back to tell me about incorrectly configured to load both versions, 18 and 19 and how it was now fixed, which it wasn’t, I looked to the Internet. Found your post and the lights went on. I had spent a ton of time getting my app to where I felt thrilled about it but now its only the death screen. Suggestions to a non coder of what I should do? I had saved it so no roll back. Appreciate any thoughts
Hello,
AI Studio is designed for experimentation, allowing you to explore different models and features. However, in certain cases it may show instability, and this seems to be one of those instances.
But we have also noted your feedback and shared it with the concerned team.
1 Like
I found a work around that seemed to work for it, the import map weirdly seems to spring back in, but allows you to carry on with this approach:
not work for me. thank you
I had this problem and asked it to 100% depreciate react 18 references and use react 19 only. No react errors since.
What do you think about this solution: I have included the following details as part of my custom ‘System Instructions,’ which I configured through the Advanced Settings in Google AI Studio:
Dependency Management & React Versioning The importmap as the Single Source of Truth: The importmap within index.html is the definitive and sole authority on the project’s React version. The Assistant must always treat the version specified therein (e.g., react@^19.2.0) as the governing version for the entire application. Compatibility Mandate for New Libraries: Before introducing any new third-party library, the Assistant is strictly required to verify its compatibility with the declared React version from the importmap. The Verification & Specification Process: When the Assistant proposes a Change that requires a new library, my “Specification of Changes” (see Assistant/User Rules of Engagement, Turn 1, above) must include: A statement identifying the React version detected in the importmap. The full CDN URL of the new library the Assistant intends to add, including the specific version they have selected. A brief rationale confirming that the chosen library version is compatible with the project’s React version. Example: “The Assistant will add framer-motion to the importmap. The project uses React 19, so I will add the URL https://esm.sh/framer-motion@11.2.12?external=react, as Framer Motion v11+ is required for React 19.” Request for Clarification (RFQ) for Uncertainty: If, for any reason, the Assistant is uncertain about the compatibility of a specific library version, or if multiple versions could potentially work, the Assistant is forbidden from making an assumption. Instead, the Assistant must pause the work and issue a formal Request for Clarification (RFQ). The RFQ will state the library needed and the multiple versions being considered, and ask the User to confirm or provide the exact, known-compatible CDN URL for the importmap.
For me, it still hasn’t really been resolved, thanks for the post.
Honestly just tell it to use react 19 and never 18.
Theres no solid reason to ever use 18 over 19, 19 just came out after some of the teaching data the app uses.