Fix peer dependencies issues

package.json

@@ -74,12 +74,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.8.3",
     "vitest": "^3.1.4",
-    "zod": "^3.24.1"
+    "zod": "~3.24.4"
   },
   "workspaces": {
     "packages": [
@@ -96,6 +96,22 @@
     "printWidth": 120
   },
   "version": "0.0.0",
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "@shopify/cli-hydrogen>@graphql-codegen/cli": "6.0.1"
+      }
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "msw",
+      "nx",
+      "protobufjs",
+      "unrs-resolver",
+      "yarn"
+    ]
+  },
   "resolutions": {
     "@types/react": "18.3.12",
     "vite": "6.4.1",
@@ -286,7 +302,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": "^18.2.0",
     "react-dom": "18.3.1",
@@ -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": "^18.2.0",
     "@types/react-dom": "^18.2.0",

packages/cli-kit/package.json

@@ -162,7 +162,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",

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'

packages/ui-extensions-dev-console/vite.config.ts

@@ -1,10 +1,10 @@
 import {defineConfig} from 'vite'
-import reactRefresh from '@vitejs/plugin-react-refresh'
+import react from '@vitejs/plugin-react'
 import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh()],
+  plugins: [react()],
   build: {
     outDir: '../app/assets/dev-console',
     assetsDir: 'extensions/dev-console/assets',

packages/ui-extensions-server-kit/package.json

@@ -52,16 +52,16 @@
     }
   },
   "devDependencies": {
-    "@shopify/react-testing": "^3.0.0",
+    "@shopify/react-testing": "^5.3.0",
     "@shopify/ui-extensions-test-utils": "3.26.0",
-    "@types/react": "17.0.2",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "@types/react": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "jsdom": "^20.0.3",
-    "react": "^17.0.2",
-    "vi-fetch": "^0.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "vite": "6.4.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": ">=17.0.2"
   }
 }

packages/ui-extensions-server-kit/tests/setup.ts

@@ -1,6 +1,3 @@
-import 'vi-fetch/setup'
-import {mockFetch} from 'vi-fetch'
-
 beforeEach(() => {
-  mockFetch.clearAll()
+  vi.restoreAllMocks()
 })

packages/ui-extensions-server-kit/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2016",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vitest/globals", "vi-fetch/matchers"],
+    "types": ["vitest/globals"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,

packages/ui-extensions-server-kit/vite.config.ts

@@ -1,6 +1,6 @@
 import {createEntryFiles} from './scripts/create-entry-files.js'
 import {defineConfig} from 'vite'
-import reactRefresh from '@vitejs/plugin-react-refresh'
+import react from '@vitejs/plugin-react'
 import path from 'path'
 
 // https://vitejs.dev/config/
@@ -46,7 +46,7 @@ export default defineConfig({
     },
   },
   plugins: [
-    reactRefresh(),
+    react(),
     createEntryFiles({
       files: {
         index: './dist/index',

packages/ui-extensions-test-utils/package.json

@@ -28,13 +28,13 @@
     }
   },
   "devDependencies": {
-    "@shopify/react-testing": "^3.0.0",
-    "@types/react": "16.14.0",
-    "@types/react-dom": "^16.9.11",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@shopify/react-testing": "^5.3.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": ">=17.0.2"
   }
 }