Terminal ERROR: Cannot read properties of null (reading 'useContext') when creating an app

[JayneFGulbin]

Hi there! 

New developer who's still learning about dev in using CLI. 
I am trying to create an app following this tutorial from Gadget.dev: https://docs.gadget.dev/guides/tutorials/checkout-ui-extension#build-a-pre-purchase-checkout-ui-exte...

I made sure to follow everything but when I run 'npm run dev' an error happens:

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

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

 1615:     }

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

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

 1615:     }
 1616:   }
 - useStdin (file:///C:/02%20SHOPIFY/njc-gadget-app/node_modules/@shopify/app/node_modules/ink/build/hooks/use-stdin.js:6:24)
 - Dev (file:///C:/02%20SHOPIFY/njc-gadget-app/node_modules/@shopify/app/dist/cli/services/dev/ui/components/Dev.js:14: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)

I am using VS by the way. 
Any idea what causes this?

[Liam]

Hi Jayne,

It looks like the error you encountered may be related to the useContext function in React. This function is a hook that allows you to use context without wrapping a component in a Context.Consumer. The error message "Cannot read properties of null (reading 'useContext')" indicates that the context you're trying to access is null.

Here are a few potential causes for this error:

1. You're trying to use the hook outside of a functional component. Hooks can only be used inside the body of a function component.

2. The context you're trying to use is not properly defined or not correctly imported into the component where you're trying to use it.

3. The versions of React and other related packages are not compatible. You may need to update or downgrade certain packages to ensure compatibility.

You could try:

• Checking if the context is correctly defined and imported in your component.
• Ensuring that you're using the useContext hook inside a functional component.
• Updating your version of React and other related packages, or downgrading if necessary.

It would also be beneficial to check the Gadget.dev tutorial again to ensure you have correctly followed all the steps. If the error persists, it might be a good idea to reach out to the Gadget Discord community forum for more specific help.

[Liam]

Hi Jayne,

It looks like the error you encountered may be related to the useContext function in React. This function is a hook that allows you to use context without wrapping a component in a Context.Consumer. The error message "Cannot read properties of null (reading 'useContext')" indicates that the context you're trying to access is null.

Here are a few potential causes for this error:

1. You're trying to use the hook outside of a functional component. Hooks can only be used inside the body of a function component.

2. The context you're trying to use is not properly defined or not correctly imported into the component where you're trying to use it.

3. The versions of React and other related packages are not compatible. You may need to update or downgrade certain packages to ensure compatibility.

You could try:

• Checking if the context is correctly defined and imported in your component.
• Ensuring that you're using the useContext hook inside a functional component.
• Updating your version of React and other related packages, or downgrading if necessary.

It would also be beneficial to check the Gadget.dev tutorial again to ensure you have correctly followed all the steps. If the error persists, it might be a good idea to reach out to the Gadget Discord community forum for more specific help.

[BoldMorgan]

I can report that we too are experiencing this error using the same majors versions of Shopify packages that were once working in the past for sure. When running the `shopify app dev` command on the following versions we are getting the same error. Meanwhile, the `shopify app build` command works just fine.

"@shopify/admin-ui-extensions-react": "^1.0.4",
"@shopify/app": "3.x",
"@shopify/cli": "3.x",

At this time I suspect it's an issue with Shopify's packages. Yet, I am continuing to investigate our own repository.

CC: @Liam to keep you in the loop

[JayneFGulbin · Accepted solution]

Thank you guys so much! 
This one here helped me resolve it. https://github.com/Shopify/cli/issues/2809#issuecomment-1719146815

Just like @BoldMorgan mentioned, it's an issue on the package. Thanks a lot for the input @Liam  & @BoldMorgan!