search

saleor / storefront

Saleor Storefront built with React 18, Next.js 14, App Router, TypeScript, GraphQL, and Tailwind CSS.
https://storefront.saleor.io
BSD 3-Clause "New" or "Revised" License
1.01k stars 585 forks source link

can not integrate Web3modal into saleor/storefront adding config file and context file from web3modal make the loading of checkout page fail #1084

Open Maltstar opened 4 months ago

Maltstar commented 4 months ago

Summary

Link to minimal reproducible example

just
switch to the webshop branch
execute npm install
then the error is located in /src/checkout/Root.tsx

Summary

When adding the config file and the context file as per Web3Modal documentation after installing web3modal into the saleor storefront, the call to createClient from "urql"(node_modules) does not work anymore in src/checkout/Root.tsx as result the checkout page can not be loaded

image

Error:
Argument of type 
'import("ethGlobal/2024/04/Grouponweb3/Shop/test4/eCoupon-ScalingEth24/node_modules/undici-types/fetch").
RequestInfo' is not assignable to parameter of type 'RequestInfo'.
  Type 'URL' is not assignable to type 'RequestInfo'.
    Type 'URL' is missing the following properties 
from type 'Request': cache, credentials, destination, headers, and 17 more.ts(2345)

package.json

{
    "name": "saleor-storefront",
    "version": "0.1.0",
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "predev": "pnpm run generate",
        "prebuild": "pnpm run generate",
        "lint": "next lint --dir src --fix",
        "generate": "graphql-codegen --config .graphqlrc.ts",
        "prepare": "husky install",
        "test": "playwright test"
    },
    "dependencies": {
        "@adyen/adyen-web": "5.53.2",
        "@adyen/api-library": "14.4.0",
        "@headlessui/react": "1.7.17",
        "@saleor/auth-sdk": "0.14.0",
        "@stripe/react-stripe-js": "2.3.1",
        "@stripe/stripe-js": "2.1.11",
        "@tanstack/react-query": "5.29.2",
        "@web3modal/wagmi": "4.1.10",
        "clsx": "2.0.0",
        "editorjs-html": "3.4.3",
        "encoding": "0.1.13",
        "formik": "2.4.5",
        "libphonenumber-js": "1.10.49",
        "lodash-es": "4.17.21",
        "lucide-react": "0.292.0",
        "next": "14.0.2",
        "pino-pretty": "11.0.0",
        "query-string": "8.1.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-error-boundary": "4.0.11",
        "react-spinners": "0.13.8",
        "react-test-renderer": "18.2.0",
        "react-toastify": "9.1.3",
        "ts-invariant": "0.10.3",
        "url-join": "5.0.0",
        "urql": "4.0.5",
        "viem": "2.9.23",
        "wagmi": "2.5.20",
        "xss": "1.0.14",
        "yup": "1.3.2",
        "zustand": "4.4.6"
    },
    "devDependencies": {
        "@graphql-codegen/cli": "5.0.0",
        "@graphql-codegen/client-preset": "4.1.0",
        "@graphql-typed-document-node/core": "3.2.0",
        "@next/env": "14.0.2",
        "@parcel/watcher": "2.3.0",
        "@playwright/test": "1.39.0",
        "@tailwindcss/forms": "0.5.7",
        "@tailwindcss/typography": "0.5.10",
        "@types/lodash-es": "4.17.11",
        "@types/node": "20.9.0",
        "@types/react": "18.2.37",
        "@types/react-dom": "18.2.15",
        "@types/url-join": "4.0.3",
        "@typescript-eslint/eslint-plugin": "6.10.0",
        "@typescript-eslint/parser": "6.10.0",
        "autoprefixer": "10.4.16",
        "eslint": "8.53.0",
        "eslint-config-next": "14.0.2",
        "eslint-config-prettier": "9.0.0",
        "eslint-plugin-import": "2.29.0",
        "eslint-plugin-playwright": "0.18.0",
        "graphql-tag": "2.12.6",
        "husky": "8.0.3",
        "lint-staged": "15.0.2",
        "postcss": "8.4.31",
        "prettier": "3.0.3",
        "prettier-plugin-tailwindcss": "0.5.7",
        "schema-dts": "1.1.2",
        "tailwindcss": "3.3.5",
        "typescript": "5.2.2",
        "wonka": "6.3.4"
    },
    "resolutions": {
        "graphql": "16.8.1"
    },
    "packageManager": "pnpm@8.9.0",
    "engines": {
        "pnpm": ">=8.9.0",
        "node": ">=18"
    }
}

Steps to reproduce

1.clone the repo https://github.com/Hack-Projects-n-Teams/eCoupon-ScalingEth24.git and switch to the branch webshop 2.install the package run npm install

or

1.clone the repo https://github.com/saleor/storefront.git

  1. install the package run npm install
  2. install web3modal npm install @web3modal/wagmi wagmi viem @tanstack/react-query
  3. add the config file and the context file as per Web3Modal documentation into the folder src

then

fetch: (input , init) => saleorAuthClient.fetchWithAuth(input as NodeJS.fetch.RequestInfo, init),

you will notice an error on input if you scroll the input with the mouse

(input as NodeJS.fetch.RequestInfo)
Error:
Argument of type 
'import(saleor/storefront/node_modules/undici-types/fetch").
RequestInfo' is not assignable to parameter of type 'RequestInfo'.
  Type 'URL' is not assignable to type 'RequestInfo'.
    Type 'URL' is missing the following properties 
from type 'Request': cache, credentials, destination, headers, and 17 more.ts(2345)

as a result the checkout page is not loaded. It seems that adding the files src/config/index.tsx and src/context/index.tsx triggers a change of type of the input parameter of the fetch function in createClient(), somehow the input is not anymore from RequestInfo type but has the URL type now.

A link to a reproduction repository

https://github.com/Hack-Projects-n-Teams/eCoupon-ScalingEth24.git

Output from envinfo

System: