Issues with imported .css ("Failed to load the app. Try reloading it.")

Google AI Studio
1

In aistudio apps builder, whenever I try to use a package that make use of css (e.g.
“react-image-crop”: “https://aistudiocdn.com/react-image-crop@^11.0.10”
that need an
import 'react-image-crop/dist/ReactCrop.css';
the preview is broken with the error Failed to load the app. Try reloading it.

removing the import statement of the .css it works (but of course it doesn’t uses the css)

Also it seems there is no working support for local .css files in tsx files, can you support it please? (or give workarounds beside "include your stiles straight into your .html file or similar)

Thanks

3

Hello,

Welcome to the Forum!

If this line is generated by AI Studio, it should ideally work as expected. However, we need to analyze the issue further. Could you please share a few more details to help us understand better, for example did you manually edit the code generated by AI Studio to add this line, are you experiencing difficulties with the preview in AI studio only, and does the exported code run correctly on your local machine?

5

I encountered exactly the same issue.
When starting the app, the console shows:

index.tsx:1  Failed to load resource: net::ERR_FAILED
cdn.tailwindcss.com/:64  cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation
react@%5E19.1.1:1  Failed to load resource: net::ERR_CONNECTION_RESET
c931a752-aca6-4f3e-a7c9-c13bbf15aa8b:325  Failed to load the app. Try reloading it.

Originally, index.html contained:

"imports": {
  "react/": "https://aistudiocdn.com/react@^19.1.1/",
  "react": "https://aistudiocdn.com/react@^19.1.1",
  "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
  "@google/genai": "https://aistudiocdn.com/@google/genai@^1.16.0"
}

After changing it to:

"imports": {
  "react": "https://esm.sh/react@19",
  "react-dom/": "https://esm.sh/react-dom@19/",
  "react/": "https://esm.sh/react@19/",
  "@google/genai": "https://esm.sh/@google/genai@^1.16.0"
}

the Preview tab started working normally.

This issue only happens in my company environment.
The exact same app runs without problems elsewhere.

When I ping aistudiocdn.com I get:

Packets: Sent = 4, Received = 3, Lost = 1 (25% loss)

So it’s clearly unstable — but not a complete loss.
This is weird, I guess it might be related to company firewall or proxy policies.

I didn’t investigate further, because esm.sh work for me.

7

My issue is 2 weeks old, I think you did something recently because I saw imported .css files within .tsx files is now working

9

Good to know that your issue has been resolved. Please feel free to reach out again if you encounter any further problems.