Could not resolve "react-reconciler"

kalen · December 16, 2024, 3:02pm

Ran into this issue today when trying to create a customer account UI extension:

I found these two related github issues:

github.com/Shopify/ui-extensions

NPM Resolution error for React

opened 02:45PM - 10 Apr 23 UTC

closed 05:45PM - 13 Apr 23 UTC

greatwitenorth

bug

## Please list the package(s) involved in the issue, and include the version you… are using @shopify/app: 3.45.0 @shopify/cli: 3.45.0 node v19.5.0 npm 9.3.1 ## Describe the bug I'm currently trying to follow along using this tutorial: https://shopify.dev/docs/apps/checkout/build-options#getting-started When I get to this step I run the command: ``` npm run shopify app generate extension -- --name=checkout-ext-test ``` and I see the following error: ``` Error coming from `npm install react@^17.0.0 @shopify/checkout-ui-extensions-react@^0.24.0 --save-prod` Command failed with exit code 1: npm install react@^17.0.0 @shopify/checkout-ui-extensions-react@^0.24.0 --save-prod npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: checkout-ext-test@1.0.0 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"18.2.0" from @shopify/cli-kit@3.45.0 npm ERR! node_modules/@shopify/cli-kit npm ERR! @shopify/cli-kit@"3.45.0" from @shopify/app@3.45.0 npm ERR! node_modules/@shopify/app npm ERR! @shopify/app@"3.45.0" from the root project npm ERR! @shopify/cli-kit@"3.45.0" from @shopify/cli@3.45.0 npm ERR! node_modules/@shopify/cli npm ERR! @shopify/cli@"3.45.0" from the root project npm ERR! 3 more (@shopify/plugin-cloudflare, ...) npm ERR! peer react@">=18.0.0" from ink@4.0.0 npm ERR! node_modules/ink npm ERR! ink@"4.0.0" from @shopify/cli-kit@3.45.0 npm ERR! node_modules/@shopify/cli-kit npm ERR! @shopify/cli-kit@"3.45.0" from @shopify/app@3.45.0 npm ERR! node_modules/@shopify/app npm ERR! @shopify/app@"3.45.0" from the root project npm ERR! 4 more (@shopify/cli, @shopify/plugin-cloudflare, ...) npm ERR! 2 more (react-reconciler, the root project) npm ERR! npm ERR! Could not resolve dependency: npm ERR! @shopify/checkout-ui-extensions-react@"^0.24.0" 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/checkout-ui-extensions-react@0.24.0 npm ERR! node_modules/@shopify/checkout-ui-extensions-react npm ERR! @shopify/checkout-ui-extensions-react@"^0.24.0" 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! /Users/nickv/.npm/_logs/2023-04-10T14_24_53_430Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: npm ERR! /Users/nickv/.npm/_logs/2023-04-10T14_24_53_430Z-debug-0.log ``` ## Steps to reproduce the behavior: 1. `npm init @shopify/app@latest` 1. `cd checkout-ext-test` 1. `npm run shopify app generate extension -- --name=checkout-ext-test` ## Expected behavior I expected the command to finish without any errors. ## Additional context Full error ouput: ``` # npm resolution error report While resolving: checkout-ext-test@1.0.0 Found: react@18.2.0 node_modules/react react@"18.2.0" from @shopify/cli-kit@3.45.0 node_modules/@shopify/cli-kit @shopify/cli-kit@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/cli@3.45.0 node_modules/@shopify/cli @shopify/cli@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-cloudflare@3.45.0 node_modules/@shopify/plugin-cloudflare @shopify/plugin-cloudflare@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-did-you-mean@3.45.0 node_modules/@shopify/plugin-did-you-mean @shopify/plugin-did-you-mean@"3.45.0" from @shopify/cli@3.45.0 node_modules/@shopify/cli @shopify/cli@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-ngrok@3.45.0 node_modules/@shopify/plugin-ngrok @shopify/plugin-ngrok@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project peer react@">=18.0.0" from ink@4.0.0 node_modules/ink ink@"4.0.0" from @shopify/cli-kit@3.45.0 node_modules/@shopify/cli-kit @shopify/cli-kit@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/cli@3.45.0 node_modules/@shopify/cli @shopify/cli@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-cloudflare@3.45.0 node_modules/@shopify/plugin-cloudflare @shopify/plugin-cloudflare@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-did-you-mean@3.45.0 node_modules/@shopify/plugin-did-you-mean @shopify/plugin-did-you-mean@"3.45.0" from @shopify/cli@3.45.0 node_modules/@shopify/cli @shopify/cli@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-ngrok@3.45.0 node_modules/@shopify/plugin-ngrok @shopify/plugin-ngrok@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project peer react@"^18.2.0" from react-reconciler@0.29.0 node_modules/react-reconciler react-reconciler@"^0.29.0" from ink@4.0.0 node_modules/ink ink@"4.0.0" from @shopify/cli-kit@3.45.0 node_modules/@shopify/cli-kit @shopify/cli-kit@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/cli@3.45.0 node_modules/@shopify/cli @shopify/cli@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-cloudflare@3.45.0 node_modules/@shopify/plugin-cloudflare @shopify/plugin-cloudflare@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-did-you-mean@3.45.0 node_modules/@shopify/plugin-did-you-mean @shopify/plugin-did-you-mean@"3.45.0" from @shopify/cli@3.45.0 node_modules/@shopify/cli @shopify/cli@"3.45.0" from the root project @shopify/cli-kit@"3.45.0" from @shopify/plugin-ngrok@3.45.0 node_modules/@shopify/plugin-ngrok @shopify/plugin-ngrok@"3.45.0" from @shopify/app@3.45.0 node_modules/@shopify/app @shopify/app@"3.45.0" from the root project react@"^17.0.0" from the root project Could not resolve dependency: @shopify/checkout-ui-extensions-react@"^0.24.0" from the root project Conflicting peer dependency: react@17.0.2 node_modules/react peer react@">=17.0.0 <18.0.0" from @shopify/checkout-ui-extensions-react@0.24.0 node_modules/@shopify/checkout-ui-extensions-react @shopify/checkout-ui-extensions-react@"^0.24.0" from the root project Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. ```

github.com/Shopify/ui-extensions

Conflicting peer dependency: react@17.0.2

opened 06:14AM - 21 Sep 23 UTC

CrowderSoup

bug

## 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 1. Try to install `@shopify/ui-extensions-react` with `npm i` ## Expected behavior - Installs the package without error

The latter has recent activity yesterday so I’m guessing other people are hitting this. Just wondering if there are any quick fixes to unblock me for now.

Robin-Shopify · December 16, 2024, 3:17pm

Hey,

wondering if there are any quick fixes to unblock me for now

can you try to add "react-reconciler": "0.29.0" to your package.json dependencies (and install packages) please?

I’ll try to investigate why it’s missing, but adding might unblock you for now.

JordanFinners · December 16, 2024, 3:23pm

Yeah I had to manually add it to a POS UI Extension, I think its fixed depending on the version of Shopify CLI.
I believe you can do it as a dev dependency.

Dylan · December 16, 2024, 3:24pm

I have a faint memory of running into this problem, here’s my package.json if it helps:

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

kalen · December 16, 2024, 5:11pm

Thanks @Robin-Shopify - got passed that error.

Now though it’s just hanging for me when I try to open up the account section.

Robin-Shopify · December 16, 2024, 5:56pm

When did you generate this extension and what version of the CLI are you running?

There should only be one extension target in the generated extension, but it seems like you got an older version of the template.

kalen · December 16, 2024, 7:46pm

Ah gotcha - okay I just generated it fresh and I’m having the same issue still:

CLI version - @shopify/cli/3.72.0 darwin-arm64 node-v20.12.2

kalen · December 16, 2024, 9:30pm

Turns out the reason it wasn’t working after fixing the react reconciler issue was because it’s a plus sandbox store and not a dev store.

Topic		Replies	Views
Facing issue when deploying the app Extensions checkout-ui-ext	6	58	January 10, 2025
Conflict with Checkout UI and Admin UI Extensions Extensions checkout-ui-ext , admin-ui-extensions	3	40	January 14, 2025
Bug with react-reconciler Extensions checkout-ui-ext	0	24	January 7, 2025
POS UI extension and Post Purchase checkout extension unable to coexist? Extensions checkout-ui-ext , pos-extensions	3	43	November 26, 2024
[Feature request] Better changelog and/or fixed documentation link for ui-extensions-react package Extensions checkout-ui-ext	0	8	January 20, 2025

Could not resolve "react-reconciler"

Related topics