Merge pull request #6898 from Shopify/fix-peer-dependencies-issues

Fix peer dependencies issues

Author: gonzaloriestra

package.json

@@ -75,12 +75,12 @@
     "octokit-plugin-create-pull-request": "^3.12.2",
     "pathe": "1.1.1",
     "pin-github-action": "^3.3.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.1.3",
     "tmp": "^0.2.5",
     "ts-node": "^10.9.1",
     "typescript": "5.9.3",
     "vitest": "^3.1.4",
-    "zod": "^3.24.1"
+    "zod": "3.24.4"
   },
   "workspaces": {
     "packages": [
@@ -97,6 +97,27 @@
     "printWidth": 120
   },
   "version": "0.0.0",
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "@shopify/cli-hydrogen>@graphql-codegen/cli": "6.0.1",
+        "@shopify/polaris>react": "19.2.4",
+        "@shopify/polaris>react-dom": "19.2.4",
+        "react-dom>react": "18.3.1",
+        "use-resize-observer>react-dom": "19.2.4"
+      }
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "msw",
+      "node-pty",
+      "nx",
+      "protobufjs",
+      "unrs-resolver",
+      "yarn"
+    ]
+  },
   "resolutions": {
     "@types/react": "18.3.12",
     "vite": "6.4.1",
@@ -290,7 +311,8 @@
         ],
         "project": "**/*.{ts,tsx}!",
         "ignoreDependencies": [
-          "@shopify/react-testing"
+          "@shopify/react-testing",
+          "react-dom"
         ]
       },
       "packages/ui-extensions-test-utils": {

packages/app/package.json

@@ -69,7 +69,7 @@
     "http-proxy-node16": "1.0.6",
     "ignore": "6.0.2",
     "json-schema-to-typescript": "15.0.4",
-    "prettier": "2.8.8",
+    "prettier": "3.8.1",
     "proper-lockfile": "4.1.2",
     "react": "19.2.4",
     "react-dom": "19.2.4",
@@ -80,7 +80,6 @@
     "@types/body-parser": "^1.19.2",
     "@types/diff": "^5.0.3",
     "@types/express": "^4.17.17",
-    "@types/prettier": "^2.7.3",
     "@types/proper-lockfile": "4.1.4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

packages/cli-kit/package.json

@@ -167,7 +167,7 @@
     "terminal-link": "3.0.0",
     "ts-error": "1.0.6",
     "which": "4.0.0",
-    "zod": "3.24.1"
+    "zod": "3.24.4"
   },
   "devDependencies": {
     "@types/brotli": "^1.3.4",
@@ -183,7 +183,7 @@
     "msw": "^2.7.1",
     "node-stream-zip": "^1.15.0",
     "ts-morph": "^17.0.1",
-    "typedoc": "^0.27.6"
+    "typedoc": "^0.28.17"
   },
   "engines": {
     "node": ">=20.10.0"

packages/eslint-plugin-cli/package.json

@@ -35,7 +35,7 @@
     "debug": "4.4.0"
   },
   "devDependencies": {
-    "prettier": "2.8.8"
+    "prettier": "3.8.1"
   },
   "peerDependencies": {
     "eslint": "^9.0.0"

packages/features/package.json

@@ -31,7 +31,6 @@
     "@cucumber/messages": "30.1.0",
     "@cucumber/pretty-formatter": "2.4.1",
     "@types/fs-extra": "^9.0.13",
-    "@types/rimraf": "^3.0.2",
     "fs-extra": "^9.1.0",
     "tempy": "^1.0.1"
   },

packages/features/steps/environment.steps.ts

@@ -1,7 +1,7 @@
 import {writeFile} from '../lib/fs.js'
 import {Given, After, setDefaultTimeout} from '@cucumber/cucumber'
 import tempy from 'tempy'
-import rimraf from 'rimraf'
+import {rimrafSync} from 'rimraf'
 import * as path from 'pathe'
 
 // In the case of debug we want to disable
@@ -35,6 +35,6 @@ Given('I have a working directory', async function () {
 
 After(function () {
   if (this.temporaryDirectory) {
-    rimraf.sync(this.temporaryDirectory)
+    rimrafSync(this.temporaryDirectory)
   }
 })

packages/ui-extensions-dev-console/package.json

@@ -13,23 +13,22 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^8.0.0",
-    "@shopify/react-i18n": "^6.1.0",
+    "@shopify/react-i18n": "^7.5.0",
     "@shopify/ui-extensions-server-kit": "5.4.0",
     "copy-to-clipboard": "^3.3.3",
-    "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "qrcode.react": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@shopify/react-testing": "^3.0.0",
+    "@shopify/react-testing": "^5.3.0",
     "@shopify/ui-extensions-test-utils": "3.26.0",
-    "@types/qrcode.react": "^1.0.2",
-    "@types/react": "16.14.0",
-    "@types/react-dom": "^16.9.11",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "jsdom": "^20.0.3",
     "sass": "^1.83.1",
     "vite": "6.4.1"

packages/ui-extensions-dev-console/src/main.tsx

@@ -1,10 +1,9 @@
 import App from './App'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 
-ReactDOM.render(
+createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

packages/ui-extensions-dev-console/src/sections/Extensions/components/QRCodeModal/QRCodeModal.test.tsx

@@ -4,7 +4,7 @@ import {mockI18n} from 'tests/mock-i18n'
 import {DefaultProviders} from 'tests/DefaultProviders'
 import {Modal} from '@/components/Modal'
 import React from 'react'
-import QRCode from 'qrcode.react'
+import {QRCodeCanvas as QRCode} from 'qrcode.react'
 import {mockApp, mockExtension} from '@shopify/ui-extensions-server-kit/testing'
 import {render, withProviders} from '@shopify/ui-extensions-test-utils'
 

packages/ui-extensions-dev-console/src/sections/Extensions/components/QRCodeModal/QRCodeModal.tsx

@@ -6,7 +6,7 @@ import {IconButton} from '@/components/IconButton'
 import React, {useCallback, useMemo} from 'react'
 import {useI18n} from '@shopify/react-i18n'
 import copyToClipboard from 'copy-to-clipboard'
-import QRCode from 'qrcode.react'
+import {QRCodeCanvas as QRCode} from 'qrcode.react'
 import {toast} from 'react-toastify'
 import {Surface} from '@shopify/ui-extensions-server-kit'
 import {ClipboardIcon} from '@shopify/polaris-icons'