cli: [Bug]: Cannot read properties of null (reading 'useContext')

Please confirm that you have:

Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App, Extension

Expected behavior

When running shopify app dev it should run the application.

Actual behavior

The app does not run and instead outputs this error


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

 - 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: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)

Reproduction steps

Install the lastest cli version (this bug appears on 3.49.X)
Simplified deployments is enabled
Run shopify app dev

Operating System

WSL 2 (Ubuntu 18). Chrome

Shopify CLI version (check your project’s `package.json` if you’re not sure)

3.49.2

Shell

No response

Node version (run `node -v` if you’re not sure)

16.17.0

What language and version are you using in your application?

Node 16

About this issue

Original URL
State: closed
Created 10 months ago
Reactions: 1
Comments: 38 (15 by maintainers)

Links to this issue

Solved: Re: Terminal ERROR: Cannot read properties of null (reading 'useContext') when creating an... - Shopify Community

Most upvoted comments

I’m still very much confused on what the approach should be here?

POS UI extensions from @shopify/retail-ui-extensions-react utilize @remote-ui/react locked to 4.5.x, which doesn’t support React 18 yet, yet the CLI is instructing React 18 as a dependency. Should we be sticking to an old version of the CLI until React 18 is supported downtream in the dependency tree?

rtymchyk on Jan 23, 2024

Upgrading React from 17.0 to 18.2.0 solved this issue for me.

shafy on Sep 12, 2023

For other folks having this issue, another workaround would be to remove react 17 from the top level package.json, remove node_modules AND remove package-lock.json.

matteodepalo on Nov 2, 2023

Hey folks, I’ve released 3.49.3 which should fix the issue going forward. If you have a broken app, these are the steps to fix it:

change @shopify/app to 3.49.3 in your top-level package.json
change @shopify/cli to 3.49.3 in your top-level package.json
remove react from your top-level package.json
run rm package-lock.json && rm -rf node_modules && npm install

Now npm run dev should work again. Thanks for reporting!

Arkham on Sep 14, 2023

Ha, I have the same issue here. It just not working even the “sample” code are generated from the CLI.

ps-leocxy on Sep 10, 2023

I solved the issue by adding a package.json file in the extension\[MY EXTENSION NAME] folder with the following dependencies:

  "dependencies": {
    "react": "^17.0.0",
    "@shopify/retail-ui-extensions-react": "^1.5.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0"
  }

fabiensebban on Nov 13, 2023

@matteodepalo The issue happens in a newly created project when running shopify app dev.

The following a included in at the top level package.json

"dependencies": {
    "@shopify/app": "3.50.2",
    "@shopify/cli": "3.50.2"
  },
  "private": true,
  "workspaces": [
    "extensions/*",
    "web",
    "web/frontend"
  ]

These are the warnings when installing the package.

warning " > @shopify/app@3.50.2" has unmet peer dependency "ink@4.4.1".
warning " > @shopify/app@3.50.2" has unmet peer dependency "react@18.2.0".
warning "@shopify/app > @luckycatfactory/esbuild-graphql-loader@3.8.1" has unmet peer dependency "graphql-tag@^2.11.0".
warning "@shopify/app > @luckycatfactory/esbuild-graphql-loader@3.8.1" has unmet peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0".
warning "@shopify/app > graphql-request@5.2.0" has unmet peer dependency "graphql@14 - 16".
warning "@shopify/app > @oclif/core > ts-node@10.9.1" has unmet peer dependency "@types/node@*".
warning "@shopify/app > @oclif/core > ts-node@10.9.1" has unmet peer dependency "typescript@>=2.7".
warning "@shopify/app > graphql-request > @graphql-typed-document-node/core@3.2.0" has unmet peer dependency "graphql@^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0".
warning "@shopify/cli > zod-to-json-schema@3.21.4" has unmet peer dependency "zod@^3.21.4".
warning Workspaces can only be enabled in private projects.

fyi. The issue only happened in `yarn dev’. It works in ‘npm run dev’.

cesarho on Nov 5, 2023

Great to hear! Workspaces is used by our latest templates and it should improve the dependency management situation among all the sub-folders. All new templates include this at the top level package.json

  "workspaces": [
    "web",
    "web/frontend",
    "extensions/*"
  ]

That said if the current situation works for you there is no rush to change, we’ll keep supporting projects with and without workspaces.

matteodepalo on Nov 2, 2023

yes and removing react from the root package.json, changing versions of shopify CLI, using different versions of node etc

bpfullmetal on Oct 31, 2023

@matteodepalo I checked and it says "^3.49.3". I have found a (somewhat lengthy) workaround for now:

Generate the Admin Action extension using the --legacy-peer-deps flag
Add a package.json to the newly generated extension directory, containing react, typescript, @shopify/ui-extensions, and @shopify/ui-extensions-react packages.
Run npm remove react @shopify/ui-extensions @shopify/ui-extensions-react from the root directory to remove the packages that were added to the root package.json
Run npm update to re-install the react version required by the cli/ink packages
Run npm run dev, works correctly now

stidges on Sep 19, 2023

In addition to what Matteo said, we’ve added workspaces support many months ago, so you can specify the UI extension dependency (such as react) inside the specific package.json for your extension. Try creating a new app from scratch in this way:

npm init @shopify/app@latest
npm run generate extension (choose checkout UI)
you should have a extensions/my-checkout-ui/package.json that only contains the dependencies of your extension

Then you can adapt the changes into your existing app, they should be fairly straightforward.

Arkham on Sep 18, 2023

React at the top level is actually not needed, it was added because of a quirk with npm, but if you upgrade to the latest version it won’t be added anymore when you generate a new UI extension.

matteodepalo on Sep 18, 2023

@Arkham I think you closed this too soon. It’s unreasonable to have the fix dependant on not having react installed in the top level package.json, especially as that is the happy path for for things like UI extensions.

deniszgonjanin on Sep 17, 2023