Conflicting peer dependency: react@17.0.2

[CrowderSoup]

Please list the package(s) involved in the issue, and include the version you are using

❯ node -v
v18.14.0
❯ npm -v
9.2.0
❯ npm run shopify version

> shopify
> shopify version

Current Shopify CLI version: 3.49.3

Describe the bug

After running npm run shopify app generate extension -- -n "Checkout UI" --template checkout_ui and then npm run dev I get:

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

    extensions/govalo-card-lookup/src/Checkout.tsx:6:7:
      6 │ } from '@shopify/ui-extensions-react/checkout';
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@shopify/ui-extensions-react/checkout" as external to exclude it from the
  bundle, which will remove this error.

Which leads me to believe I need to install the @shopify/ui-extensions-react/checkout dependency. However, when I try to do so I get:

❯ npm i @shopify/ui-extensions-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: govalo@undefined
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"18.2.0" from @shopify/app@3.49.3
npm ERR!   node_modules/@shopify/app
npm ERR!     @shopify/app@"^3.49.3" from the root project
npm ERR!   react@"18.2.0" from @shopify/cli-kit@3.49.3
npm ERR!   node_modules/@shopify/cli-kit
npm ERR!     @shopify/cli-kit@"3.49.3" from @shopify/app@3.49.3
npm ERR!     node_modules/@shopify/app
npm ERR!       @shopify/app@"^3.49.3" from the root project
npm ERR!     @shopify/cli-kit@"3.49.3" from @shopify/cli@3.49.3
npm ERR!     node_modules/@shopify/cli
npm ERR!       @shopify/cli@"^3.49.3" from the root project
npm ERR!     2 more (@shopify/plugin-cloudflare, @shopify/plugin-did-you-mean)
npm ERR!   2 more (ink, react-reconciler)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @shopify/ui-extensions-react@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@">=17.0.0 <18.0.0" from @shopify/ui-extensions-react@2023.7.2
npm ERR!   node_modules/@shopify/ui-extensions-react
npm ERR!     @shopify/ui-extensions-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Steps to reproduce the behavior:

1. Have the above listed versions of node, npm, and the shopify app/cli installed
2. Try to install @shopify/ui-extensions-react with npm i

Expected behavior

• Installs the package without error

[SaadMay0]

facing same issue with that dependency "@shopify/app": "^3.48.1", "@shopify/cli": "^3.48.1", "@shopify/ui-extensions": "2023.7.0", "@shopify/ui-extensions-react": "2023.7.0",

code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: my-node-app@1.0.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@">=18.0.0" from ink@4.2.0 npm ERR! node_modules/ink npm ERR! peer ink@"4.2.0" from @shopify/app@3.49.3 npm ERR! node_modules/@shopify/app npm ERR! @shopify/app@"^3.45.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[SaadMay0]

Current Shopify CLI version: 3.48.0 node -v 20.3.0 npm -v 9.7.1

[SaadMay0]

npm i @shopify/ui-extensions-react

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: my-node-app@1.0.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@">=18.0.0" from ink@4.2.0 npm ERR! node_modules/ink npm ERR! peer ink@"4.2.0" from @shopify/app@3.49.3 npm ERR! node_modules/@shopify/app npm ERR! @shopify/app@"^3.48.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[dani-sanomads]

You can use this to fix it at the moment because one of them was on 3.49.3 for me. "@shopify/app": "3.48.1" "@shopify/cli": "3.48.1"

[MitchLillie]

@CrowderSoup Are you still seeing this issue?

[ctrlaltdylan]

I'm seeing this issue as well when trying to generate a post-purchase extension through the Shopify CLI.

Here's my locked @shopify dependencies:

"@shopify/app@latest":
  version: 3.52.0

"@shopify/cli@latest":
  version: 3.52.0
  resolution: "@shopify/cli@npm:3.52.0"

Running Node v18, React 18.

Command failed with exit code 1: npm install @shopify/post-purchase-ui-extensions-react@^0.13.2 --save-prod
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @verdict/my-app@2.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from @verdict/my-app@2.0.0
npm ERR!   apps/my-app
npm ERR!     @verdict/my-app@2.0.0
npm ERR!     node_modules/@verdict/my-app
npm ERR!       workspace apps/core from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=17.0.0 <18.0.0" from @shopify/post-purchase-ui-extensions-react@0.13.4
npm ERR! node_modules/@shopify/post-purchase-ui-extensions-react
npm ERR!   @shopify/post-purchase-ui-extensions-react@"^0.13.2" from @verdict/my-app
npm ERR!   apps/core
npm ERR!     @verdict/my-app@2.0.0
npm ERR!     node_modules/@verdict/my-app
npm ERR!       workspace apps/my-app from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/gitpod/.npm/_logs/2023-12-20T19_19_17_374Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/gitpod/.npm/_logs/2023-12-20T19_19_17_374Z-debug-0.log

From what I can tell, the @shopify/post-purchase-ui-extensions-react depends on a version of remote-react that's dependent on React v17, not the latest v18.

I suspect that might be the issue?

[victor-roswell]

This is still an issue. Can we do something to make the extension packages compatible with 18?

[Jolsty]

Yeah i'm having troubles too