Cannot read properties of null (reading 'useContext') - post-purchase checkout extension

Retired Boards Appdev Tools

Topic summary

A developer encounters a “Cannot read properties of null (reading ‘useContext’)” error when running npm run dev after generating a post-purchase checkout extension for their Shopify app.

Error Details:

  • Extension generation appears successful initially
  • Error occurs during dev server startup with React hook warnings
  • Suggests potential issues: mismatched React versions, breaking Rules of Hooks, or multiple React copies in the app

Key Points:

  • The extension code hasn’t been modified from the generated template
  • Node version: v21.6.1, NPM version: 10.4.0
  • Error trace points to React reconciler and renderer components

Discussion Status:

  • Another user suggests checking for mismatching React versions among dependencies
  • Developer confirms no code modifications were made post-generation
  • Question raised about whether all project dependencies are up to date
  • Unresolved - the thread ends with a question asking if the issue was fixed, indicating no solution has been confirmed yet
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have app in app store. I would like to extend app via post-purchase checkout extension. So I try to run command:

npm run shopify app generate extension -- --template post_purchase_ui --name my-post-purchase-ui-extension

Look like that everything is correct:

sebastiandev_0-1707239968436.png
sebastiandev_0-1707239968436.png2380×770 44.2 KB

But when I try to run command:

npm run dev

I can see error:

?  Match my-post-purchase-ui-extension (local name) with post-purchase-ui (name on Shopify Partners, ID: XYZ)?
✔  Yes, match to existing extension

Warning: 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.
Warning: 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.

  ERROR  Cannot read properties of null (reading 'useContext')

 node_modules/@shopify/app/node_modules/react/cjs/react.development.js:1618:21

 1615:     }
 1616:   }
 1617:
 1618:   return dispatcher.useContext(Context);
 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();

 - useContext (node_modules/@shopify/app/node_modules/react/cjs/react.development.js:1618:21)
 - useStdin (node_modules/@shopify/app/node_modules/ink/build/hooks/use-stdin.js:6:24)
 - Dev (node_modules/@shopify/app/dist/cli/services/dev/ui/components/Dev.js:13:53)
 - renderWithHooks (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:7478:18)
 - mountIndeterminateComponent (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:11247:13)
 - beginWork (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:12760:16)
 - beginWork$1 (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:19569:14)
 - performUnitOfWork (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:18703:12)
 - workLoopSync (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:18609:5)
 - renderRootSync (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:18577:7)

^C%

More details:

Node version: v21.6.1
NPM version: 10.4.0

Current package.json:

{
  "name": "app",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "scripts": {
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "push": "shopify app push",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "info": "shopify app info"
  },
  "dependencies": {
    "@shopify/app": "^3.55.4",
    "@shopify/cli": "^3.55.4",
    "@shopify/post-purchase-ui-extensions-react": "^0.13.4",
    "react": "^17.0.2"
  }
}

Any updates?

2

Hi Sebastian - did you check to see that your app is not doing any of the actions suggested in the “Invalid hook call” reasons, eg: mismatching versions of React?

3

@Liam The code hasn’t been modified in any way; it’s the original code after installing the extension.

4

It’s possible there could be an issue with one of the dependancies for this project - are all of these up to date?

5

did you manage to fix ?