Build Preview Fails to Load with CORS and Resource Errors

[vanvan_wong]

Hello,

I am trying to use the “Build” feature in AI Studio to create a simple React application. However, when I try to view the output in the “Preview” pane, it remains blank.

Upon checking the browser’s developer console, I see a number of critical errors that seem to be preventing the application from loading.

Steps to Reproduce:

1. Navigate to the “Build” section in AI Studio.
2. Create a basic React application structure (e.g., an index.tsx that renders a simple component).
3. Observe the “Preview” pane and the browser’s developer console.

Expected Result:
The preview pane should render the simple React application.

Actual Result:
The preview pane is blank, and the console shows multiple errors. The most significant ones appear to be:

1. CORS Policy Error: The preview environment seems to be blocked from accessing the necessary script files due to a missing Access-Control-Allow-Origin header.

   Access to script at 'https://ai.studio/index.tsx' from origin 'https://...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
   

2. Failed to Load Resources (404): The build process is failing to find a required package.

   data.jsdelivr.com/v1/package/resolve/npm/@types/tailwindcss__browser@latest:1 Failed to load resource: the server responded with a status of 404 ()
   

3. Other Network Errors: Consequent errors like net::ERR_FAILED and net::ERR_CONNECTION_CLOSED for multiple resources (react, client, etc.).

It seems like there might be a configuration issue on the AI Studio platform regarding CORS headers and dependency resolution for the preview sandbox.

Could you please look into this? Thank you

[vanvan_wong]

anybody help？？？？？？？？？

[Krish_Varnakavi1]

Hi @vanvan_wong,

Welcome to the Google AI Forum!

I just tried to reproduce this issue but it’s working perfectly fine for me.

PFA.

Try clearing your browser’s cache and cookies or try using a different browser.