`yarn dev` fails with "Warning: Invalid hook call." on new project

[vfonic]

Issue summary

In a brand new project, yarn dev fails with

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:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks

6. 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')

• shopify_api version: 13.4.0
• shopify_app version: 21.10.0
• Ruby version: 3.2.2
• Operating system: macOS Ventura 13.6.4

> yarn dev        
yarn run v1.22.21
$ shopify app dev
╭─ info ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                               │
│  Using shopify.app.toml:                                                                                                      │
│                                                                                                                               │
│    • Org:             Ada Apps                                                                                                │
│    • App:             2024-01-29-ruby-template                                                                                │
│    • Dev store:       2024-01-29-ruby-template.myshopify.com                                                                  │
│    • Update URLs:     Yes                                                                                                     │
│                                                                                                                               │
│   You can pass `--reset` to your command to reset your app configuration.                                                     │
│                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

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)

Expected behavior

The app starts without any errors.

Actual behavior

There's a React error with little information

Steps to reproduce the problem

1. yarn create @shopify/app --template=ruby
2. cd <proj_name>
3. yarn dev

[vfonic]

"@shopify/app": "3.54.0",
"@shopify/cli": "3.54.0"

[vfonic]

The issue here is that newer versions of @shopify/cli are only compatible with React 18. This project's template should be updated to conform to that.

[vfonic]

Here's where I found out that React 18 is required: https://github.com/Shopify/cli/issues/3189

[lizkenyon]

Thanks for flagging this! The team will look into resolving this!

[lizkenyon]

Hi folks 👋 Both the ruby and node templates have been updated to used the updated frontend template that is now on React version 18.2.