React frontend not rendering in Shopify Admin

jaraujo · ‎08-03-2023

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- Ensures that the UI is properly scaled in the Shopify Mobile app -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module">
      if (!import.meta.env || !import.meta.env.PROD) {
        // Because the base HTML is rendered in the server side, we need to manually embed the code to enable HMR in our
        // code, so that the vite server is properly enabled to run HMR
        const script = document.createElement('script');
        script.setAttribute('type', "module");
        script.setAttribute('src', "./dev_embed.js");
        document.getElementsByTagName('head')[0].append(script);
      }
    </script>
  </head>
  <body>
  <div id="app"><!--index.jsx injects App.jsx here--></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</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.

React frontend not rendering in Shopify Admin

React frontend not rendering in Shopify Admin

Community Blog Articles