Solved

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

JayneFGulbin
Shopify Partner
13 2 8

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)

JayneFGulbin_0-1694738028428.png

 

 

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

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Think we should work together? Do you need more help? I’d love to hear from you at jaynegrace.gulbin@gmail.com or buymeacoffee.com/JayneGrace
Shopify Developer & Expert | Web Designer | Creative Graphic
Accepted Solution (1)

JayneFGulbin
Shopify Partner
13 2 8

This is an 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!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Think we should work together? Do you need more help? I’d love to hear from you at jaynegrace.gulbin@gmail.com or buymeacoffee.com/JayneGrace
Shopify Developer & Expert | Web Designer | Creative Graphic

View solution in original post

Replies 4 (4)

Liam
Shopify Staff
2731 301 779

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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Liam
Shopify Staff
2731 301 779

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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

BoldMorgan
Shopify Partner
1 0 0

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
Shopify Partner
13 2 8

This is an 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!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Think we should work together? Do you need more help? I’d love to hear from you at jaynegrace.gulbin@gmail.com or buymeacoffee.com/JayneGrace
Shopify Developer & Expert | Web Designer | Creative Graphic