Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MissingAppProviderError despite <AppProvider /> being used; completely breaks app #11681

Closed
thosakwe opened this issue Mar 2, 2024 · 3 comments
Closed

MissingAppProviderError despite <AppProvider /> being used; completely breaks app #11681

thosakwe opened this issue Mar 2, 2024 · 3 comments
Labels
Bug Something is broken and not working as intended in the system. untriaged

Comments

@thosakwe
Copy link

thosakwe commented Mar 2, 2024 •
edited
Loading

Summary

@shopify/polaris version 12.19.0 throws a MissingAppProviderError when components are rendered, even though <AppProvider /> is being used and properly initialized.

This is a blocker for development, as I can neither see my UI on the screen, nor is there a clear workaround.

Expected behavior

The components should render on the screen, without any errors.

Actual behavior

This error is thrown when components such as TextField, Autocomplete, or Badge are used:

hooks.js:7 Uncaught MissingAppProviderError: No i18n was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.
    at useI18n2 (hooks.js:7:8)
    at Autocomplete2 (Autocomplete.js:27:4)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)

This stack trace is also available, which shows that the AppProvider is present in the component hierarchy:

react-dom.development.js:18687 The above error occurred in the <TextField> component:

    at TextField (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:17084:3)
    at div
    at BlockStack (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:15229:3)
    at div
    at BlockStack (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:15229:3)
    at div
    at https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:15059:3
    at div
    at ShadowBevel (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:15021:5)
    at Card (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:15160:3)
    at div
    at https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:15059:3
    at MethodCard (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:31158:3)
    at div
    at Section6 (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:24921:3)
    at div
    at Layout2 (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:24932:3)
    at div
    at div
    at Page (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:27754:3)
    at LogicBuilderPage (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/discount_form/logic_builder_page/logic_builder_page.tsx?t=1709402890789:37:3)
    at Suspense
    at div
    at Paywall (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/paywall.tsx?t=1709402890787:25:3)
    at DiscountFormPage (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/discount_form/discount_form_page.tsx?t=1709402890789:38:3)
    at AmountOffProductsForm (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/amount_off_products_form.tsx?t=1709402890789:20:3)
    at AmountOffProductsId (https://webcams-carl-hydrogen-ladies.trycloudflare.com/pages/amount-off-products/[functionId]/details/[id].tsx?t=1709402890789:27:15)
    at Suspense
    at component
    at RenderedRoute (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/react-router-dom.js?v=7955e827:3250:5)
    at Routes (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/react-router-dom.js?v=7955e827:3701:5)
    at Routes (https://webcams-carl-hydrogen-ladies.trycloudflare.com/Routes.tsx?t=1709402890788:22:3)
    at ShareTranslations (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/chunk-726GMLPA.js?v=67795b50:1976:5)
    at DiscountsI18nProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:5759:3)
    at AppProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_discount-app-components.js?v=7955e827:5781:14)
    at DiscountProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/providers/DiscountProvider.tsx?t=1709402890789:21:3)
    at AppLoader (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/app_loader.tsx?t=1709403397862:30:3)
    at QueryClientProvider2 (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/react-query.js?v=7955e827:2641:21)
    at QueryProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/providers/QueryProvider.jsx:19:3)
    at Router (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/chunk-UACAPO42.js?v=67795b50:5318:23)
    at Provider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/chunk-UACAPO42.js?v=67795b50:5290:23)
    at AppBridgeProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/providers/AppBridgeProvider.jsx:23:3)
    at Router (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/react-router-dom.js?v=7955e827:3648:15)
    at BrowserRouter (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/react-router-dom.js?v=7955e827:4123:5)
    at EphemeralPresenceManager (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:1338:3)
    at FocusManager (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:1295:3)
    at PortalsManager (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:1259:3)
    at MediaQueryProvider2 (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:1204:3)
    at AppProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/node_modules/.vite/deps/@shopify_polaris.js?v=7955e827:1389:5)
    at PolarisProvider (https://webcams-carl-hydrogen-ladies.trycloudflare.com/components/providers/PolarisProvider.tsx?import&t=1709403514084:64:3)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Steps to reproduce

Here's the source code of my <PolarisProvider>:

export function PolarisProvider({children}): JSX.Element {
  const [i18n] = useI18n({
    id: 'Polaris',
    fallback: translations,
    async translations(locale) {
      const dictionary = await import(
        /* webpackChunkName: "Polaris-i18n", webpackMode: "lazy-once" */ `@shopify/polaris/locales/${locale}.json`
      );
      return dictionary && dictionary.default;
    },
  });

  // i18n.translations is an array of translation dictionaries, where the first
  // dictionary is the desired language, and the second is the fallback.
  return (
    <AppProvider
      i18n={i18n.translations}
      linkComponent={AppBridgeLink as LinkLikeComponent}>
      {children}
    </AppProvider>
  );
}

As you can see, both <AppProvider> and usei18n() are being used.

In fact, my entire application is wrapped in an I18nContext.Provider. Without that, the application fails with an Uncaught Error: Missing i18n manager. Make sure to use an <I18nContext.Provider /> somewhere in your React tree. error.

  return (
    <I18nContext.Provider value={new I18nManager({
      locale: 'en',
    })}>
      <PolarisProvider>
        <BrowserRouter>
          <AppBridgeProvider>
            <QueryProvider>
              <NavigationMenu
                navigationLinks={[
                  // {
                  //   label: "Page name",
                  //   destination: "/pagename",
                  // },
                  ...billingRoutes,
                  {
                    label: "Add to theme",
                    destination: "/add-to-theme",
                  },
                  {
                    label: "Feedback",
                    destination: "/feedback",
                  },
                  {
                    label: "Support",
                    destination: "/support",
                  },
                ]}
              />
              <AppLoader render={() => <Routes pages={pages as Pages} />} />
            </QueryProvider>
          </AppBridgeProvider>
        </BrowserRouter>
      </PolarisProvider>
    </I18nContext.Provider>
  );

Are you using React components?

Yes

Polaris version number

12.19.0

Browser

Google Chrome Version 117.0.5938.149 (Official Build) (64-bit)

Device

Ubuntu 22.04.3 LTS
@thosakwe thosakwe added Bug Something is broken and not working as intended in the system. untriaged labels Mar 2, 2024
@thosakwe
Copy link
Author

thosakwe commented Mar 2, 2024

This could be a bundling issue, related to Vite, actually.

I noticed that imports from Polaris and react-i18n are getting a 2 suffix.

For example: Autocomplete2, use18n2. I'm going to figure out if Vite is duplicating these imports. It's possible that there are 2 different versions of Polaris being used, where one is from a dependency (maybe discount-app-components).

@thosakwe
Copy link
Author

thosakwe commented Mar 2, 2024

It did turn out to be that @shopify/polaris and possibly @shopify/react-i18n were getting duplicated.

I resolved this issue by configuring Vite to deduplicate them:

  resolve: {
    dedupe: [
      '@shopify/polaris',
      '@shopify/react-i18n',
    ],
    preserveSymlinks: true,
  },

@thosakwe thosakwe closed this as completed Mar 2, 2024
@CVSilvas
Copy link

It did turn out to be that @shopify/polaris and possibly @shopify/react-i18n were getting duplicated.

I resolved this issue by configuring Vite to deduplicate them:

resolve: {
dedupe: [
'@shopify/polaris',
'@shopify/react-i18n',
],
preserveSymlinks: true,
},

Just to help anyone else out who runs into this! The above code is out of date for modern Vite but it sent me on the right track. What worked for me is this:

optimizeDeps: {
  exclude: ['@shopify/polaris', '@shopify/react-i18n']
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something is broken and not working as intended in the system. untriaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thosakwe @CVSilvas