Upgrade dependencies & pnpm (#785)

* Updated log

* Updates to root

* Updates to pnpm

* successfully moved to pnpm

* type issue

* Local as the default provider

* Upgrade dependencies

* Revert to local

* Upgrade React

* Update node-fetch deps

* Fix types

* Ignore warnings

* Fix missing dependency

* Update pnpm-lock.yaml

* Add missing @types/cookie

* Upgrade dependencies

* Fix missing dependencies

* Update README.md

Co-authored-by: Bel Curcio <curciobel@gmail.com>

.gitignore

@@ -1,9 +1,8 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 node_modules
 .pnp
 .pnp.js
+.pnpm-debug.log
 
 # testing
 coverage

README.md

@@ -23,8 +23,8 @@ Demo live at: [demo.vercel.store](https://demo.vercel.store/)
 > To run a minimal version of Next.js Commerce you can start with the default local provider `@vercel/commerce-local` that has disabled all features (cart, auth) and use static files for the backend
 
 ```bash
-yarn # run this command in root folder of the mono repo
+pnpm install # run this command in root folder of the mono repo
-yarn dev
+pnpm dev
 ```
 
 > If you encounter any problems while installing and running for the first time, please see the Troubleshoot section
@@ -110,11 +110,11 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 2. Create a new branch `git checkout -b MY_BRANCH_NAME`
-3. Install the dependencies: `yarn`
+3. Install the dependencies: `pnpm install`
 4. Duplicate `site/.env.template` and rename it to `site/.env.local`
 5. Add proper store values to `site/.env.local`
-6. Run `cd site` and `yarn dev` to build and watch for code changes
+6. Run `pnpm dev` to build the packages and watch for code changes
-7. Run `yarn turbo run build` to check the build after your changes
+7. Run `pnpm turbo run build` to check the build after your changes
 
 ## Work in progress
 
@@ -189,10 +189,10 @@ error Command failed with exit code 1.
 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 ```
 
-The error usually occurs when running yarn dev inside of the `/site/` folder after installing a fresh repository.
+The error usually occurs when running `pnpm dev` inside of the `/site/` folder after installing a fresh repository.
 
-In order to fix this, run `yarn dev` in the monorepo root folder first.
+In order to fix this, run `pnpm dev` in the monorepo root folder first.
 
-> Using `yarn dev` from the root is recommended for developing, which will run watch mode on all packages.
+> Using `pnpm dev` from the root is recommended for developing, which will run watch mode on all packages.
 
 </details>

package.json

@@ -2,10 +2,6 @@
   "name": "commerce",
   "license": "MIT",
   "private": true,
-  "workspaces": [
-    "site",
-    "packages/*"
-  ],
   "scripts": {
     "build": "turbo run build --filter=next-commerce...",
     "dev": "turbo run dev",
@@ -14,14 +10,14 @@
     "prettier-fix": "prettier --write ."
   },
   "devDependencies": {
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
-    "turbo": "^1.2.16"
+    "turbo": "^1.4.6"
   },
   "husky": {
     "hooks": {
       "pre-commit": "turbo run lint"
     }
   },
-  "packageManager": "yarn@1.22.17"
+  "packageManager": "pnpm@7.5.0"
 }

packages/bigcommerce/package.json

@@ -47,17 +47,19 @@
     }
   },
   "dependencies": {
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/commerce": "workspace:*",
+    "@vercel/fetch": "^6.2.0",
     "cookie": "^0.4.1",
     "immutability-helper": "^3.1.1",
     "jsonwebtoken": "^8.5.1",
     "lodash.debounce": "^4.0.8",
-    "uuidv4": "^6.2.12"
+    "uuidv4": "^6.2.12",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
@@ -67,15 +69,16 @@
     "@types/jsonwebtoken": "^8.5.7",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
+    "@types/node-fetch": "^2.6.2",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/bigcommerce/src/api/endpoints/cart/add-item.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { normalizeCart } from '../../../lib/normalize'
 import { parseCartItem } from '../../utils/parse-item'
 import getCartCookie from '../../utils/get-cart-cookie'

packages/bigcommerce/src/api/endpoints/cart/get-cart.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { normalizeCart } from '../../../lib/normalize'
 import { BigcommerceApiError } from '../../utils/errors'
 import getCartCookie from '../../utils/get-cart-cookie'

packages/commerce/package.json

@@ -47,16 +47,17 @@
     }
   },
   "dependencies": {
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
     "deepmerge": "^4.2.2",
     "import-cwd": "^3.0.0",
     "js-cookie": "^3.0.1",
-    "swr": "^1.2.0"
+    "swr": "^1.3.0",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
@@ -64,15 +65,16 @@
     "@taskr/watch": "^1.1.0",
     "@types/js-cookie": "^3.0.1",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
+    "@types/node-fetch": "2.6.2",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/commercejs/package.json

@@ -48,30 +48,36 @@
   },
   "dependencies": {
     "@chec/commerce.js": "^2.8.0",
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
+    "cookie": "^0.4.1",
+    "js-cookie": "^3.0.1",
+    "jsonwebtoken": "^8.5.1",
     "lodash.debounce": "^4.0.8"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
     "@types/chec__commerce.js": "^2.8.4",
+    "@types/cookie": "^0.4.1",
+    "@types/js-cookie": "^3.0.2",
+    "@types/jsonwebtoken": "^8.5.7",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/kibocommerce/package.json

@@ -49,17 +49,18 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
-    "lodash.debounce": "^4.0.8"
+    "lodash.debounce": "^4.0.8",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.3.1",
+    "@graphql-codegen/cli": "^2.7.0",
     "@graphql-codegen/schema-ast": "^2.4.1",
     "@graphql-codegen/typescript": "^2.4.2",
     "@graphql-codegen/typescript-operations": "^2.2.2",
@@ -68,15 +69,18 @@
     "@taskr/watch": "^1.1.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/node-fetch": "2.6.2",
+    "@types/react": "^18.0.14",
+    "graphql": "^16.0.0",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/local/package.json

@@ -47,28 +47,30 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1"
+    "@vercel/fetch": "^6.2.0",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
+    "@types/node-fetch": "2.6.2",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/ordercloud/package.json

@@ -47,15 +47,17 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
     "stripe": "^8.197.0",
-    "lodash.debounce": "^4.0.8"
+    "lodash.debounce": "^4.0.8",
+    "node-fetch": "^2.6.7",
+    "cookie": "^0.4.1"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
@@ -63,15 +65,17 @@
     "@taskr/watch": "^1.1.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
+    "@types/cookie": "^0.4.1",
+    "@types/node-fetch": "^2.6.2",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/saleor/package.json

@@ -49,34 +49,40 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
-    "lodash.debounce": "^4.0.8"
+    "js-cookie": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.3.1",
+    "@graphql-codegen/cli": "^2.7.0",
     "@graphql-codegen/schema-ast": "^2.4.1",
     "@graphql-codegen/typescript": "^2.4.2",
     "@graphql-codegen/typescript-operations": "^2.2.2",
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
+    "@types/js-cookie": "^3.0.2",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/node-fetch": "^2.6.2",
+    "@types/react": "^18.0.14",
+    "graphql": "^16.0.0",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/saleor/src/cart/use-remove-item.tsx

@@ -1,6 +1,12 @@
 import { useCallback } from 'react'
-import type { MutationHookContext, HookFetcherContext, MutationHook } from '@vercel/commerce/utils/types'
+import type {
-import useRemoveItem, { UseRemoveItem } from '@vercel/commerce/cart/use-remove-item'
+  MutationHookContext,
+  HookFetcherContext,
+  MutationHook,
+} from '@vercel/commerce/utils/types'
+import useRemoveItem, {
+  UseRemoveItem,
+} from '@vercel/commerce/cart/use-remove-item'
 import useCart from './use-cart'
 import * as mutation from '../utils/mutations'
 import { getCheckoutId, checkoutToCart } from '../utils'
@@ -11,7 +17,11 @@ export default useRemoveItem as UseRemoveItem<typeof handler>
 
 export const handler = {
   fetchOptions: { query: mutation.CheckoutLineDelete },
-  async fetcher({ input: { itemId }, options, fetch }: HookFetcherContext<RemoveItemHook>) {
+  async fetcher({
+    input: { itemId },
+    options,
+    fetch,
+  }: HookFetcherContext<RemoveItemHook>) {
     const data = await fetch<Mutation, MutationCheckoutLineDeleteArgs>({
       ...options,
       variables: {
@@ -27,7 +37,7 @@ export const handler = {
       const { mutate } = useCart()
 
       return useCallback(
-        async function removeItem(input) {
+        async function removeItem(input: { id: string }) {
           const data = await fetch({ input: { itemId: input.id } })
           await mutate(data, false)
 

packages/sfcc/package.json

@@ -47,29 +47,31 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
-    "commerce-sdk": "^2.7.0"
+    "commerce-sdk": "^2.7.0",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
+    "@types/node-fetch": "^2.6.2",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/shopify/package.json

@@ -49,35 +49,40 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
+    "node-fetch": "^2.6.7",
+    "js-cookie": "^3.0.1",
     "lodash.debounce": "^4.0.8"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.3.1",
+    "@graphql-codegen/cli": "2.7.0",
     "@graphql-codegen/schema-ast": "^2.4.1",
-    "@graphql-codegen/typescript": "^2.4.2",
+    "@graphql-codegen/typescript": "^2.6.0",
-    "@graphql-codegen/typescript-operations": "^2.2.2",
+    "@graphql-codegen/typescript-operations": "^2.4.3",
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
-    "@types/lodash.debounce": "^4.0.6",
+    "@types/js-cookie": "3.0.2",
-    "@types/node": "^17.0.8",
+    "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^17.0.38",
+    "@types/node": "^18.0.3",
-    "dotenv": "^12.0.3",
+    "@types/react": "^18.0.14",
-    "lint-staged": "^12.1.7",
+    "@types/node-fetch": "2.6.2",
-    "next": "^12.0.8",
+    "graphql": "^16.0.0",
-    "prettier": "^2.5.1",
+    "dotenv": "^16.0.1",
-    "react": "^17.0.2",
+    "lint-staged": "^13.0.3",
-    "react-dom": "^17.0.2",
+    "next": "^12.2.1",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
-    "taskr-swc": "^0.0.1",
+    "taskr-swc": "workspace:*",
-    "typescript": "^4.5.4"
+    "typescript": "^4.3.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/spree/package.json

@@ -48,31 +48,35 @@
   },
   "dependencies": {
     "@spree/storefront-api-v2-sdk": "^5.1.1",
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
-    "swr": "^1.2.0",
+    "js-cookie": "^3.0.1",
-    "lodash.debounce": "^4.0.8"
+    "lodash.debounce": "^4.0.8",
+    "node-fetch": "^2.6.7",
+    "swr": "^1.3.0"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
+    "@types/js-cookie": "^3.0.2",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/node-fetch": "^2.6.2",
+    "@types/react": "^18.0.14",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/spree/src/index.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType, FunctionComponent } from 'react'
+import type { FC, ReactNode } from 'react'
 import {
   Provider,
   CommerceProviderProps,
@@ -14,7 +14,9 @@ import useLogout from '@vercel/commerce/auth/use-logout'
 export { spreeProvider }
 export type { SpreeProvider }
 
-export const WithTokenErrorsHandling: FunctionComponent = ({ children }) => {
+export const WithTokenErrorsHandling: FC<{ children?: ReactNode }> = ({
+  children,
+}) => {
   const logout = useLogout()
 
   return (

packages/spree/src/utils/require-config.ts

@@ -6,7 +6,7 @@ const requireConfig = <T>(isomorphicConfig: T, key: keyof T) => {
 
   if (typeof valueUnderKey === 'undefined') {
     throw new MissingConfigurationValueError(
-      `Value for configuration key ${key} was undefined.`
+      `Value for configuration key ${key.toString()} was undefined.`
     )
   }
 

packages/swell/package.json

@@ -48,31 +48,35 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1",
+    "@vercel/fetch": "^6.2.0",
-    "swell-js": "^4.0.0-next.0",
+    "js-cookie": "^3.0.1",
-    "lodash.debounce": "^4.0.8"
+    "lodash.debounce": "^4.0.8",
+    "node-fetch": "^2.6.7",
+    "swell-js": "^4.0.0-next.0"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@taskr/clear": "^1.1.0",
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
+    "@types/js-cookie": "^3.0.2",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/node-fetch": "^2.6.2",
+    "@types/react": "^18.0.14",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

packages/swell/src/cart/use-remove-item.tsx

@@ -45,7 +45,7 @@ export const handler = {
       const { mutate } = useCart()
 
       return useCallback(
-        async function removeItem(input) {
+        async function removeItem(input: { id: string }) {
           const data = await fetch({ input: { itemId: input.id } })
           await mutate(data, false)
 

packages/vendure/package.json

@@ -49,16 +49,17 @@
     }
   },
   "dependencies": {
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/fetch": "^6.1.1"
+    "@vercel/fetch": "^6.2.0",
+    "node-fetch": "^2.6.7"
   },
   "peerDependencies": {
     "next": "^12",
-    "react": "^17",
+    "react": "^18",
-    "react-dom": "^17"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.3.1",
+    "@graphql-codegen/cli": "2.7.0",
     "@graphql-codegen/schema-ast": "^2.4.1",
     "@graphql-codegen/typescript": "^2.4.2",
     "@graphql-codegen/typescript-operations": "^2.2.2",
@@ -66,15 +67,17 @@
     "@taskr/esnext": "^1.1.0",
     "@taskr/watch": "^1.1.0",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.14",
+    "@types/node-fetch": "^2.6.2",
+    "graphql": "^16.0.0",
     "lint-staged": "^12.1.7",
     "next": "^12.0.8",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "taskr": "^1.1.0",
     "taskr-swc": "^0.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json}": [

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'site'
+  - 'packages/*'

site/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

site/components/auth/SignUpView.tsx

@@ -41,7 +41,12 @@ const SignUpView: FC<Props> = () => {
       setLoading(false)
       closeModal()
     } catch ({ errors }) {
+      if (errors instanceof Array) {
         setMessage(errors[0].message)
+      } else {
+        setMessage('Unexpected error')
+        console.log(errors)
+      }
       setLoading(false)
     }
   }

site/components/checkout/context.tsx

@@ -5,6 +5,7 @@ import React, {
   useReducer,
   useContext,
   createContext,
+  ReactNode,
 } from 'react'
 import type { CardFields } from '@commerce/types/customer/card'
 import type { AddressFields } from '@commerce/types/customer/address'
@@ -65,7 +66,7 @@ const checkoutReducer = (state: State, action: Action): State => {
   }
 }
 
-export const CheckoutProvider: FC = (props) => {
+export const CheckoutProvider: FC<{ children?: ReactNode }> = (props) => {
   const [state, dispatch] = useReducer(checkoutReducer, initialState)
 
   const setCardFields = useCallback(
@@ -86,7 +87,10 @@ export const CheckoutProvider: FC = (props) => {
 
   const cardFields = useMemo(() => state.cardFields, [state.cardFields])
 
-  const addressFields = useMemo(() => state.addressFields, [state.addressFields])
+  const addressFields = useMemo(
+    () => state.addressFields,
+    [state.addressFields]
+  )
 
   const value = useMemo(
     () => ({
@@ -96,7 +100,13 @@ export const CheckoutProvider: FC = (props) => {
       setAddressFields,
       clearCheckoutFields,
     }),
-    [cardFields, addressFields, setCardFields, setAddressFields, clearCheckoutFields]
+    [
+      cardFields,
+      addressFields,
+      setCardFields,
+      setAddressFields,
+      clearCheckoutFields,
+    ]
   )
 
   return <CheckoutContext.Provider value={value} {...props} />

site/components/common/I18nWidget/I18nWidget.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
 import ClickOutside from '@lib/click-outside'
+import Image from 'next/image'
 interface LOCALE_DATA {
   name: string
   img: {
@@ -50,12 +51,13 @@ const I18nWidget: FC = () => {
           onClick={() => setDisplay(!display)}
         >
           <button className={s.button} aria-label="Language selector">
-            <img
+            <Image
               width="20"
               height="20"
               className="block mr-2 w-5"
               src={`/${LOCALES_MAP[currentLocale].img.filename}`}
               alt={LOCALES_MAP[currentLocale].img.alt}
+              unoptimized
             />
             {options && (
               <span className="cursor-pointer">

site/components/common/Layout/Layout.tsx

@@ -53,6 +53,7 @@ interface Props {
     pages?: Page[]
     categories: Category[]
   }
+  children?: React.ReactNode
 }
 
 const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({

site/components/common/Navbar/NavbarRoot.tsx

@@ -1,9 +1,9 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, ReactNode } from 'react'
 import throttle from 'lodash.throttle'
 import cn from 'clsx'
 import s from './Navbar.module.css'
 
-const NavbarRoot: FC = ({ children }) => {
+const NavbarRoot: FC<{ children?: ReactNode }> = ({ children }) => {
   const [hasScrolled, setHasScrolled] = useState(false)
 
   useEffect(() => {

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import { Cross, ChevronLeft } from '@components/icons'
 import { UserNav } from '@components/common'
 import cn from 'clsx'
 import s from './SidebarLayout.module.css'
 
-type ComponentProps = { className?: string } & (
+type ComponentProps = { className?: string; children?: ReactNode } & (
   | { handleClose: () => any; handleBack?: never }
   | { handleBack: () => any; handleClose?: never }
 )

site/components/product/ProductSlider/ProductSlider.tsx

@@ -12,7 +12,7 @@ import s from './ProductSlider.module.css'
 import ProductSliderControl from '../ProductSliderControl'
 
 interface ProductSliderProps {
-  children: React.ReactNode[]
+  children?: React.ReactNode[]
   className?: string
 }
 

site/components/ui/Button/Button.tsx

@@ -5,7 +5,7 @@ import React, {
   JSXElementConstructor,
   useRef,
 } from 'react'
-import mergeRefs from 'react-merge-refs'
+import { mergeRefs } from 'react-merge-refs'
 import s from './Button.module.css'
 import { LoadingDots } from '@components/ui'
 

site/components/ui/Collapse/Collapse.tsx

@@ -7,7 +7,7 @@ import useMeasure from 'react-use-measure'
 
 export interface CollapseProps {
   title: string
-  children: ReactNode
+  children?: ReactNode
 }
 
 const Collapse: FC<CollapseProps> = ({ title, children }) => {

site/components/ui/Grid/Grid.tsx

@@ -4,7 +4,7 @@ import s from './Grid.module.css'
 
 interface GridProps {
   className?: string
-  children?: ReactNode[] | Component[] | any[]
+  children?: ReactNode
   layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
   variant?: 'default' | 'filled'
 }

site/components/ui/Link/Link.tsx

@@ -1,6 +1,10 @@
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
 
-const Link: React.FC<NextLinkProps> = ({ href, children, ...props }) => {
+const Link: React.FC<
+  NextLinkProps & {
+    children?: React.ReactNode
+  }
+> = ({ href, children, ...props }) => {
   return (
     <NextLink href={href}>
       <a {...props}>{children}</a>

site/components/ui/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect, useCallback } from 'react'
+import { FC, useRef, useEffect, useCallback, ReactNode } from 'react'
 import s from './Modal.module.css'
 import FocusTrap from '@lib/focus-trap'
 import { Cross } from '@components/icons'
@@ -6,9 +6,8 @@ import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 
 interface ModalProps {
   className?: string
-  children?: any
+  children?: ReactNode
   onClose: () => void
-  onEnter?: () => void | null
 }
 
 const Modal: FC<ModalProps> = ({ children, onClose }) => {

site/components/ui/Skeleton/Skeleton.tsx

@@ -11,6 +11,7 @@ interface SkeletonProps {
   width?: string | number
   height?: string | number
   boxHeight?: string | number
+  children?: React.ReactNode
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({

site/components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react'
+import React, { FC, ReactNode, useCallback, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 
 export interface State {
@@ -124,7 +124,7 @@ function uiReducer(state: State, action: Action) {
   }
 }
 
-export const UIProvider: FC = (props) => {
+export const UIProvider: FC<{ children?: ReactNode }> = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = useCallback(
@@ -195,6 +195,7 @@ export const UIProvider: FC = (props) => {
       setSidebarView,
       setUserAvatar,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [state]
   )
 
@@ -209,7 +210,9 @@ export const useUI = () => {
   return context
 }
 
-export const ManagedUIContext: FC = ({ children }) => (
+export const ManagedUIContext: FC<{ children?: ReactNode }> = ({
+  children,
+}) => (
   <UIProvider>
     <ThemeProvider>{children}</ThemeProvider>
   </UIProvider>

site/lib/click-outside/click-outside.tsx

@@ -6,14 +6,16 @@ import React, {
   ReactElement,
   forwardRef,
   Ref,
+  ReactNode,
 } from 'react'
-import mergeRefs from 'react-merge-refs'
+import { mergeRefs } from 'react-merge-refs'
 import hasParent from './has-parent'
 
 interface ClickOutsideProps {
   active: boolean
   onClick: (e?: MouseEvent) => void
   ref?: Ref<any>
+  children?: ReactNode
 }
 
 /**

site/lib/focus-trap.tsx

@@ -53,6 +53,7 @@ export default function FocusTrap({ children, focusFirst = false }: Props) {
     return () => {
       returnFocus()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [root, children])
 
   return React.createElement(

site/lib/hooks/useUserAvatar.ts

@@ -17,7 +17,7 @@ export const useUserAvatar = (name = 'userAvatar') => {
       localStorage.setItem(name, value)
       setUserAvatar(value)
     }
-  }, [])
+  }, [name, setUserAvatar, userAvatar])
 
   return {
     userAvatar,

site/next.config.js

@@ -35,6 +35,11 @@ module.exports = withCommerceConfig({
         },
     ].filter(Boolean)
   },
+
+  // Avoid Module not found: ESM packages (supports-color) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
+  experimental: {
+    esmExternals: 'loose',
+  },
 })
 
 // Don't delete this console log, useful to see the commerce config in Vercel deployments

site/package.json

@@ -13,35 +13,36 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
     "@react-spring/web": "^9.4.1",
-    "@vercel/commerce": "^0.0.1",
+    "@vercel/commerce": "workspace:*",
-    "@vercel/commerce-bigcommerce": "^0.0.1",
+    "@vercel/commerce-bigcommerce": "workspace:*",
-    "@vercel/commerce-commercejs": "^0.0.1",
+    "@vercel/commerce-commercejs": "workspace:*",
-    "@vercel/commerce-kibocommerce": "^0.0.1",
+    "@vercel/commerce-kibocommerce": "workspace:*",
-    "@vercel/commerce-local": "^0.0.1",
+    "@vercel/commerce-local": "workspace:*",
-    "@vercel/commerce-ordercloud": "^0.0.1",
+    "@vercel/commerce-ordercloud": "workspace:*",
-    "@vercel/commerce-saleor": "^0.0.1",
+    "@vercel/commerce-saleor": "workspace:*",
-    "@vercel/commerce-shopify": "^0.0.1",
+    "@vercel/commerce-shopify": "workspace:*",
-    "@vercel/commerce-spree": "^0.0.1",
+    "@vercel/commerce-spree": "workspace:*",
-    "@vercel/commerce-swell": "^0.0.1",
+    "@vercel/commerce-swell": "workspace:*",
-    "@vercel/commerce-vendure": "^0.0.1",
+    "@vercel/commerce-sfcc": "workspace:*",
+    "@vercel/commerce-vendure": "workspace:*",
     "autoprefixer": "^10.4.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "js-cookie": "^3.0.1",
-    "keen-slider": "^6.6.3",
+    "keen-slider": "^6.7.0",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^12.0.8",
+    "next": "^12.3.0",
-    "next-themes": "^0.0.15",
+    "next-themes": "^0.2.0",
     "postcss": "^8.3.5",
-    "postcss-nesting": "^8.0.1",
+    "postcss-nesting": "^10.1.10",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.1",
-    "react-merge-refs": "^1.1.0",
+    "react-merge-refs": "^2.0.1",
     "react-use-measure": "^2.1.1",
     "tabbable": "^5.2.1",
     "tailwindcss": "^3.0.13"
@@ -52,16 +53,17 @@
     "@types/js-cookie": "^3.0.1",
     "@types/lodash.random": "^3.2.6",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^17.0.8",
+    "@types/node": "^18.0.3",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
     "eslint": "^8.6.0",
     "eslint-config-next": "^12.0.8",
     "eslint-config-prettier": "^8.3.0",
-    "lint-staged": "^12.1.7",
+    "lint-staged": "^13.0.3",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^7.2.3",
     "prettier": "^2.5.1",
-    "typescript": "4.3.4"
+    "typescript": "4.7.4"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [

site/pages/_app.tsx

@@ -2,12 +2,12 @@ import '@assets/main.css'
 import '@assets/chrome-bug.css'
 import 'keen-slider/keen-slider.min.css'
 
-import { FC, useEffect } from 'react'
+import { FC, ReactNode, useEffect } from 'react'
 import type { AppProps } from 'next/app'
 import { Head } from '@components/common'
 import { ManagedUIContext } from '@components/ui/context'
 
-const Noop: FC = ({ children }) => <>{children}</>
+const Noop: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const Layout = (Component as any).Layout || Noop

turbo.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://turborepo.org/schema.json",
   "baseBranch": "origin/main",
   "pipeline": {
     "build": {