Facing issue when deploying the app

Extensions
1

We are not able to deploy the app using npm run deploy or ‘yarn deploy’. The command returns the following error:

 [ERROR] Could not resolve "@shopify/ui-extensions-react/checkout"

Tried on Node version 18 and 20.

Here’s the package.json file:

  "scripts": {
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "info": "shopify app info",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy"
  },
  "dependencies": {
    "@shopify/app": "3.56.3",
    "@shopify/cli": "3.56.3"
  },
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ],

and

  "dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "2024.1.x",
    "@shopify/ui-extensions-react": "2024.1.x"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "react-reconciler": "0.29.0"
  }
2

Had you initiated an extension only app or a remix app?

3

Can you bump your @shopify/ui-extensions and @shopify/ui-extensions-react to “2024.10.x”.

And if you are using NPM you have a .npmrc which looks like

engine-strict=true
auto-install-peers=true
shamefully-hoist=true
4

This is an extension only app

5

I tried this and it still throws the same error using yarn.

{
  "name": "checkout-ui",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "2024.10.x",
    "@shopify/ui-extensions-react": "2024.10.x"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "react-reconciler": "0.29.0"
  }
}

  "scripts": {
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "info": "shopify app info",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy"
  },
  "dependencies": {
    "@shopify/app": "3.56.3",
    "@shopify/cli": "3.56.3"
  },
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ],


✘ [ERROR] Could not resolve "@shopify/ui-extensions-react/checkout"

    extensions/checkout-ui/src/Checkout.tsx:9:7:
      9 │ } from '@shopify/ui-extensions-react/checkout';

however, if I try using npm I face the following issue:

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

 node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();
 1622:   return dispatcher.useState(initialState);
 1623: }
 1624: function useReducer(reducer, initialArg, init) {
 1625:   var dispatcher = resolveDispatcher();
6

I know it not a ‘real’ fix per say, but I switched mine to remix and it works just fine now

7

I was able to fix it by using pnpm instead of npm or yarn

  1. run pnpm install
  2. run shopify app dev