Conflicting React version error

Google AI Studio
1

Hello everyone,

I am trying to build a web app using the Built capability. I am not a developer. I am learning to use Google AI studio in my spare time to help me with my work. I am having a React version conflict issue. The application should run with a React 18 version but somehow some React 19 components keep on appear in my index.html file. I have deleted the lines linked to React 19 in index.html.

However everytime I ran the app in Google Built tool, those 2 lines keep coming back.

Here is the code block in index.html with the last two lines that keep on coming back despite deleting them every time I run my app:

{

ā€œimportsā€: {

"react": "https://esm.sh/react@18.2.0",

"react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",

"react-dom": "https://esm.sh/react-dom@18.2.0?deps=react@18.2.0",

"react-dom/client": "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0",

"@google/genai": "https://esm.sh/@google/genai@0.1.2",

"jspdf-autotable": "https://esm.sh/jspdf-autotable@3.8.2",

"jspdf": "https://esm.sh/jspdf@2.5.1",

"recharts": "https://esm.sh/recharts@2.12.7?external=react,react-dom",

"lucide-react": "https://esm.sh/lucide-react@0.378.0?external=react,react-dom",

"prop-types": "https://esm.sh/prop-types@15.8.1",

"react-is": "https://esm.sh/react-is@18.2.0",

"react-dom/": "https://esm.sh/react-dom@^19.2.3/",

"react/": "https://esm.sh/react@^19.2.3/"

}

}

Google AI Studio seems powerless when it comes to resolve this issue. Attached the structure of my project folder and files.

I had been working for days on my web app without having this issue. It appeared all of a sudden yesterday.

Please can you help as I am completely lost?

Capture dā€™eĢcran 2025-12-12 aĢ€ 2.00.14 PM
Capture dā€™eĢcran 2025-12-12 aĢ€ 2.00.14 PM631Ɨ1111 67.6 KB

3

You will find the solution in this post I wrote:

Critical: Handle External Dependencies: If your app has imports for libraries that rely on React (e.g.lucide-react for icons), you must append ?external=react to the end of every such URL to prevent your app from crashing.

4

Thanks a lot Paul. Google AI Studio applied your tips to build more stable libraries. However it still through the same erro message. So I ask Google AI Studio if a network diagnostic might else in case of a bad internet connection, or a firewall. We ended up going through my console log and all the errors thrown and we found the issues:To answer your question: Yes, absolutely. I specifically used the issues you copied from the console to identify the root cause. Here is exactly what I picked up from your logs:

  1. The ā€œSmoking Gunā€ (Syntax Error):
    The log contained this specific error:
    Ignored an import map value of ā€œreact/ā€: Since specifierKey ended in a slash, so must the addressā€¦
    This told me that the index.html file contained invalid entries for React 19 (react/ and react-dom/) at the bottom of the import map. This syntax error caused the browser to ignore the entire import map, which is why the app timed out (it couldnā€™t find React at all).

  2. The 404 Error:
    Your later logs showed:
    GET https://esm.sh/@google/genai@0.1.1 net::ERR_ABORTED 404
    This indicated that the specific version of the Google GenAI SDK (0.1.1) requested in the import map was no longer available or incorrect, so I updated it to the generic @google/genai tag to fetch the latest stable version.

By fixing those two items found in your logs, the browser could finally load React and the AI SDK correctly. Great work getting those logsā€”they were the key to solving the puzzle!ā€ Problem solved, after almost 24 hours of troubleshooting.

1 Like
6

Hello @Sandra_B , @paulvancotthem

We truly appreciate you flagging this issue, we have already filed a bug internally.