Script Error when Opening Embedded Apps

Shopify Apps
1

I am experiencing a script error whenever I open any embedded app on my Shopify store.

The error message indicates that the file https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/translations/en-US.json cannot be found, resulting in a 404 error.

This sometimes causes slow app loading. Please advise on how to resolve this issue.

Snipaste_2024-07-29_13-43-53.png

2

I also keep getting the same kind of errors on an app that I’m developing. Cannot understand where they’re coming from.

Any help here will be greatly appreciated. :folded_hands:t4:

3

Same here :disappointed_face:

4

Same to me

5

I don’t know what’s the exact solution to this but i found a quick solution for my old app. when i execute the code after a month it gives me the same error so i was in hurry and need a quick solution. i pause my ad-blocker, the error remains in the console but my layout is loaded without any other issue.

6

I have the same problem and I think it is probably happening because locale is being modified dynamically somehow.
In my code I am requesting en.json

movsumov_1-1725186998427.png
movsumov_1-1725186998427.png1604×628 114 KB

movsumov_0-1725186970461.png
movsumov_0-1725186970461.png1900×486 143 KB

7

Only these locales are supported

movsumov_2-1725187099641.png
movsumov_2-1725187099641.png776×1466 91.1 KB

8 
import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App";
import { I18nProvider, useI18n } from '@shopify/react-i18n';
import translations from '@shopify/polaris/locales/en.json'; // Default to English
import createApp from '@shopify/app-bridge';
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';

const urlParams = new URLSearchParams(window.location.search);
const shopOrigin = urlParams.get('shop');

const Main = () => {
  const [i18n] = useI18n({
    id: 'Polaris',
    fallback: translations,
    translations(locale) {
      return import(
        /* webpackChunkName: "Polaris-i18n", webpackMode: "lazy-once" */ `@shopify/polaris/locales/${locale}.json`
      ).then((dictionary) => dictionary && dictionary.default);
    },
  });

Similar issue and trying to dynamically insert the locale and the Network Response 404 reveals this:

function pe(l) {
    var b = l.actions
      , n = l.store
      , f = V(l, ["actions", "store"])
      , m = B({
        id: "ContextualSaveBar_

Not sure if the library is functioning correctly or not but the concatenation is the source of the 404 error according the the Network Console,