Conflict with Checkout UI and Admin UI Extensions

Extensions
,
1

We have a subscriptions app and we’re using Product App Extension (via Admin UI Extension) on it as per Shopify’s requirement. There’s a new directive to remove ScriptTags and use Checkout UI Extension instead.

The issue is, there’s a dependency conflict for react-reconciler. @shopify/admin-ui-extensions-react version 1.1.0 (the latest version based from npm) is using react-reconciler@0.26.2 while @shopify/ui-extensions-react@2025.1.0 is using react-reconciler@0.29.0.

image
image323×162 10.9 KB

So when I’m trying to deploy the code to Shopify, I’m getting the following error:

image
image1131×420 24.1 KB

Since there’s a library conflict, what I did next is to create a separate project just for the Checkout UI Extension and then connect it to our app. I then tried deploying this extension. Now, the problem is since my Theme App Extension and Product App Extension are on a separate project, it treats it as “deleting the other extensions”.
image

I’m not sure what my next steps should be. Can anyone point me in the right direction?

2

Looks like this issue has cropped up for others as well:

I recall facing this issue as well, but I forget how I fixed it. But @Robin-Shopify recommends updating your version:

3

Here’s a snippet of what my package.json looks like:

{
  "scripts": {
    ...
  },
  "dependencies": {
    "@shopify/admin-ui-extensions-react": "^1.1.0",
    "@shopify/app": "^3.48.4",
    "@shopify/app-bridge": "^3.7.9",
    "@shopify/app-bridge-react": "^3.7.9",
    "@shopify/app-bridge-utils": "^3.5.1",
    "@shopify/cli": "^3.48.4",
    "@shopify/polaris": "^8.2.2",
    "@shopify/polaris-icons": "^4.11.0",
    "@shopify/shopify-api": "^7.6.0",
    "@shopify/ui-extensions": "2025.1.0",
    "@shopify/ui-extensions-react": "2025.1.0",
    "@slack/web-api": "^6.5.1",
    "next": "^10.0.4",
    "nextjs-cors": "^2.1.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-liquid": "^2.0.1",
    "react-reconciler": "0.29.0",
    "shopify-api-node": "^3.12.5",
    "shopify-nextjs-toolbox": "2.0.0",
    "throng": "^5.0.0",
    "underscore": "^1.13.6",
    "uuid": "^8.3.2",
  },
  "devDependencies": {
    "eslint": "^7.17.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.1.0",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "nodemon": "^3.0.1",
    "prettier": "2.2.1",
  },
  ...
}

From the above snippet, I already have "react-reconciler": "0.29.0". Prior to trying to generate Checkout UI extension, we’re already using Admin UI Extension. That extension only uses "react-reconciler": "0.26.2" so it is indeed a conflict between 2 extensions from Shopify.

4

In case anyone else encounters the same issue, here’s the final libs in my package.json that made it work:

  ...
  "@shopify/admin-ui-extensions-react": "^1.1.0",
  "@shopify/cli": "^3.73.1",
  "@shopify/ui-extensions": "2025.1.0",
  "@shopify/ui-extensions-react": "2025.1.0",
  "react-reconciler": "0.29.0",
  ...

Also, I needed to downgrade to Node v18.20.5 for this to work.

1 Like