React frontend not rendering in Shopify Admin

Shopify Apps

Topic summary

React frontend in a Shopify app (PHP template) fails to render inside Shopify Admin. Browser console reports module loading blocked due to disallowed MIME type “text/html” for index.jsx and dev_embed.js served from an ngrok URL.

Key details:

  • Only recent change: added “./” to the script src in index.html. Nginx config was checked and appears fine. yarn dev is running; app is not yet in production.
  • Placing plain HTML inside the target div renders, but the React component does not.
  • index.html and console error snippets are central to the issue.

What the errors imply: The server is returning HTML (often a 404 or fallback HTML) instead of JavaScript for module URLs, so the browser blocks them as modules. This typically points to incorrect paths, dev server proxy/middleware routing issues, or misconfigured content type for Vite/webpack dev assets behind ngrok.

Status: No resolution or decisions yet. Open questions include verifying the correct script/import paths, ensuring the dev asset server serves JS with proper MIME types, and confirming ngrok/proxy routes to the frontend dev server.

Summarized with AI on January 22. AI used: gpt-5.
1

I’m using the Shopify app template (PHP) and having trouble with the React frontend.

Nothing is rendering in Shopify Admin and the console shows these errors:

Loading module from "https://f171-2806-103e-19-9492-4c8f-262c-93f2-cc22.ngrok-free.app/index.jsx" was blocked because of a disallowed MIME type ("text/html"). f171-2806-103e-19-9492-4c8f-262c-93f2-cc22.ngrok-free.app

Loading module from "https://f171-2806-103e-19-9492-4c8f-262c-93f2-cc22.ngrok-free.app/dev_embed.js" was blocked because of a disallowed MIME type ("text/html"). f171-2806-103e-19-9492-4c8f-262c-93f2-cc22.ngrok-free.app

index.html

The code hasn’t really been updated, just ./ was added in src in script. Already checked the nginx config but everything looks good. If HTML code is placed in the div, it will render. The problem is rendering the React component.

yarn dev is running the app. The app is not in production yet.