Troubleshooting tip: "aistudiocdn.com" domain alias in Importmap may cause app load failure

[paulvancotthem]

If your Google AI Studio app isn’t loading in the preview pane, or if you are seeing console errors related to network connections, your ISP or corporate firewall might be blocking Google’s default content domain (aistudiocdn.com). Here’s a fix for that.

Here is how to fix it immediately, followed by an explanation of why this happens to your AI-generated code.

TL;DR If your AI Studio app preview is blank, your network is likely blocking aistudiocdn.com. Edit your index.html to use esm.sh instead. Also, ensure any React-dependent libraries (like Lucide) include ?external=react in their URL.

Part 1: The Quick Fix

The Goal: Manually redirect your app to use the public source (esm.sh) instead of Google’s blocked alias.

Step-by-Step Instructions

1. Open the File Editor: In the Google AI Studio interface (on the right-hand side where the code is generated), look for the file list and click on index.html to open it.

2. Find the Importmap: Scroll down until you see the <script type="importmap"> block. This is where the app defines where to download libraries like React. Here’s an example of such an importmap:

   <script type="importmap">
   {
     "imports": {
       "react-dom/client": "https://aistudiocdn.com/react-dom@19.2.3/client",
       "react-dom/": "https://aistudiocdn.com/react-dom@19.2.3/",
       "react-dom": "https://aistudiocdn.com/react-dom@19.2.3",
       "react/": "https://aistudiocdn.com/react@19.2.3/",
       "react": "https://aistudiocdn.com/react@19.2.3",
       "@google/genai": "https://aistudiocdn.com/@google/genai@1.33.0",
       "firebase/": "https://aistudiocdn.com/firebase@12.6.0/",
       "@headlessui/react": "https://aistudiocdn.com/@headlessui/react@2.2.9?external=react",
       "framer-motion": "https://aistudiocdn.com/framer-motion@12.23.26?external=react",
       "lucide-react": "https://aistudiocdn.com/lucide-react@0.557.0?external=react",
       "react-markdown": "https://aistudiocdn.com/react-markdown@10.1.0?external=react",
       "remark-gfm": "https://aistudiocdn.com/remark-gfm@4.0.1?external=react,react-markdown",
       "remark-breaks": "https://aistudiocdn.com/remark-breaks@4.0.0?external=react,react-markdown",
       "clsx": "https://aistudiocdn.com/clsx@2.1.1?external=react",
       "tailwind-merge": "https://aistudiocdn.com/tailwind-merge@3.4.0?external=react",
       "mammoth": "https://aistudiocdn.com/mammoth@1.11.0?external=react",
       "pdfjs-dist": "https://aistudiocdn.com/pdfjs-dist@5.4.449?external=react"
     }
   }
   </script>
   

   Swap the Domain: Scan the URLs inside this block. Replace every instance of https://aistudiocdn.com with https://esm.sh.

   • Change: https://aistudiocdn.com/react@19.2.3

   • To: https://esm.sh/react@19.2.3

3. 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 the URL to prevent your app from crashing.

   • Correct format:

     JSON

     "lucide-react": "https://esm.sh/lucide-react@0.557.0?external=react"
     
     

4. Apply Changes: Click the “Save” icon in the AI Studio interface to apply these manual edits. Your preview should now reload successfully.

---

Part 2: Understanding the “Why”

As a Google AI Studio user, it helps to understand what the AI is generating for you and why this specific change fixes the “blank screen” issue.

1. aistudiocdn.com vs. esm.sh

When Google AI Studio generates code, it often defaults to using the CDN aistudiocdn.com. This is simply a Google-hosted “mirror” or alias for a popular public CDN service called esm.sh.

• The Issue: Because aistudiocdn.com is a newer or specific domain, some strict Internet Service Providers (ISPs) or corporate security filters block it automatically.

• The Fix: By switching to esm.sh, you are asking for the exact same code files but asking a different CDN server that is widely recognized and usually whitelisted.

2. What is the “Importmap”?

You might notice that Gemini almost always generates a <script type="importmap"> in your HTML. This allows the AI to write clean, modern JavaScript. Instead of forcing it to write long, messy URLs inside the JavaScript logic (e.g., import React from 'https://...'), the Importmap creates a “dictionary” at the top of the file. It tells the browser: “Whenever the code says ‘import React’, go fetch it from this specific URL.”

3. The “Duplicate React” Crash (?external=react)

This is the most common reason AI-generated apps crash after you start editing imports.

• The Scenario: You import, for example, lucide-react (icons). By default, the CDN tries to be helpful and sends you the icon library plus a copy of React to make sure it works.

• The Conflict: Your app already has React loaded. If the icons library brings a second copy of React, the two copies ‘fight’ over the web page, causing a fatal error (often seen in the console as “Hooks can only be called inside the body of a function component”).

• The Solution: Adding? external=react tells the CDN: “Just send me the icons. Do not send React; I will provide it myself.”

[iTazB]

Hey,

Hope you’re keeping well.

If your AI Studio app preview is failing due to aistudiocdn.com being blocked, the quickest way to resolve it is exactly as you described—update the <script type=”importmap”> URLs in index.html to use https://esm.sh instead. This ensures your dependencies load from a widely accessible CDN. For React-dependent libraries, always append ?external=react to avoid duplicate React instances and runtime hook errors. Once saved, the preview should reload without network blocks. In corporate environments, you can also request firewall whitelisting for aistudiocdn.com to avoid manual edits in future projects.

Thanks and regards,
Taz

[paulvancotthem]

Nice to see you summarize and confirm my solution.

[Haddadi_Abdraouf]

I want to add also:
esm.sh can transpile libraries, but it cannot turn Node tools into browser code.

• No Vite
• No Rollup
• No plugins
• No Node core modules

Only runtime JS librarie