🐛[Bug]

[Martin86Ec]

Issue summary

Following the discount app tutorial I got a hook error.

After replacing the <AppProvider> tag in Volumes/new.jsx with a <div> tag, the error stops.

Expected behavior

The hook error message should not appear.

Actual behavior

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    resolveDispatcher @shopify_discount-app-components.js:6448
    useMemo23 @shopify_discount-app-components.js:6495
    AppProvider @shopify_discount-app-components.js:39224
    renderWithHooks chunk-6YPNWHZK.js:11191

The above error occurred in the <AppProvider> component:
AppProvider@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_discount-app-components.js?v=743b0033:39219:7
DiscountProvider@https://f10f-186-4-136-39.sa.ngrok.io/components/providers/DiscountProvider.jsx:3:33
Provider@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_app-bridge-react.js?v=743b0033:3072:20
AppBridgeProvider@https://f10f-186-4-136-39.sa.ngrok.io/components/providers/AppBridgeProvider.jsx:5:34
Router@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/react-router-dom.js?v=743b0033:1097:7
BrowserRouter@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/react-router-dom.js?v=743b0033:1223:7
FocusManager@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3568:22
PortalsManager@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3544:24
MediaQueryProvider2@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3499:54
div
CustomProperties@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:1285:7
AppProvider@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3602:5
PolarisProvider@https://f10f-186-4-136-39.sa.ngrok.io/components/providers/PolarisProvider.jsx:25:32
App

Steps to reproduce the problem

1. Install https://www.npmjs.com/package/@shopify/discount-app-components 1.0.2
2. Import and wrap the frontend/App.js children with the AppProvider

Specifications

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
    Memory: 2.17 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/Development/discount-app/node_modules/.bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    @shopify/discount-app-components: ^1.0.2 => 1.0.2

[knames]

Hi there, @Martin86Ec!

After replacing the <AppProvider> tag in Volumes/new.jsx with a <div> tag, the error stops.

I think the issue you are having is a result of having <AppProvider> in Volumes/new.jsx.

I followed along the steps from https://shopify.dev/apps/discounts/create up to the end of Step 2 and didn't see any issues.

You should have a DiscountProvider.jsx in frontend/components/providers

import { AppProvider } from '@shopify/discount-app-components'
import '@shopify/discount-app-components/build/esm/styles.css'
export function DiscountProvider({ children }) {
  return <AppProvider locale="en-US" ianaTimezone="America/Toronto">{children}</AppProvider>
}

as well as this line in frontend/components/providers/index.js after the other exports

export { DiscountProvider } from './DiscountProvider'

and then you should have

import {
  AppBridgeProvider,
  QueryProvider,
  PolarisProvider,
  DiscountProvider
} from "./components";

in frontend/App.jsx

and then you will want that provider you created to wrap the children there, so it might look like:

 return (
    <PolarisProvider>
      <BrowserRouter>
        <AppBridgeProvider>
          <DiscountProvider>  {/** here*/}
            <QueryProvider>
              <NavigationMenu
                navigationLinks={[
                  {
                    label: "Page name",
                    destination: "/pagename",
                  },
                ]}
              />
              <Routes pages={pages} />
            </QueryProvider>
          </DiscountProvider> {/** here*/}
        </AppBridgeProvider>
      </BrowserRouter>
    </PolarisProvider>
  );

Following step 2 in the Volumes/new.jsx will get you the new discount page, you shouldn't have any AppProviders in there. If you just copy the code from that page as is, it should display everything without issue.

I ran through this with the same npm/node/yarn versions as you and everything seemed to work.

Please feel free to reach out again if you have further issues!