Invalid Hook Error (Post-Purchase-UI Extension)

[spencersmb]

Please list the package(s) involved in the issue, and include the version you are using

Using the Shopify CLI to create an app and then adding an app extension to it, specifically the post-purchase-ui template. After adding any hook to the component the entire app fails.

App: "@shopify/app": "3.51.2", "@shopify/cli": "3.51.2", "jsonwebtoken": "^9.0.2", "uuid": "^9.0.1"

Extension (post-purchase-ui): "react": "^17.0.0", "@shopify/post-purchase-ui-extensions-react": "^0.13.4" (also tried version: 0.13.2)

Describe the bug

After install and connecting the extension to my development shop, and adding a useState hook to the component to render, the ui breaks and you can see this error in the chrome console.

Steps to reproduce the behavior:

1. pnpm create @shopify/app
2. cd in the dir of the app you just created.
3. pnpm shopify app generate extension --template post_purchase_ui --name my-post-purchase-ui-extension (from the docs)
4. Add a useState hook to the component on the index inside the src directory:

   
   import {useState} from 'react'; // Add to top of file

export function App({ extensionPoint, storage }) { const [loading, setLoading] = useState(true) // line 65 in VS-Code

  5. save file
  6. pnpm dev
  7. Connect to an existing app thats hosted on Gadget and running on a local dev store.
  8. hit p to connect your extension to the shop through your shopify chrome extension and paste the new URL
  9. Go through the checkout process to get to the post-purchase-ui screen.
  10. Open chrome browser tools to see the error in the console

## Expected behavior

The app should render the component with no errors.

## Additional context

It looks like it may have to do with different versions of React from within the App and the extension. The App is using React 18 while the extension is using React 17. Changing the react versions in either breaks the app and it won't load.

[SuspenseFallback]

This is affecting me too - and the app won't load with React 18 either. When can we expect to see a stabler version/update to React 18?

[murshid-valar]

I'm also facing the same issue, got any workarounds yet?

[SuspenseFallback]

@murshid-valar It's working for me on version ^0.13.5 of @shopify/post-purchase-ui-extensions-react