Getting "Error: No QueryClient set, use QueryClientProvider to set one" after following upgrade tutorial

[craftalpian]

After following this tutorial https://docs.medusajs.com/upgrade-guides/medusa-react/4-0-2, i've got error about no QueryClient set.

This is my package.json:

{
  "name": "medusa-next",
  "version": "1.0.3",
  "private": true,
  "author": "Kasper Fabricius Kristensen <[email protected]> (https://www.medusajs.com)",
  "description": "Next.js starter to be used with Medusa server",
  "keywords": [
    "medusa-storefront"
  ],
  "scripts": {
    "dev": "next dev -p 8000",
    "build": "next build",
    "start": "next start -p 8000",
    "lint": "next lint",
    "cypress": "cypress open",
    "analyze": "ANALYZE=true next build"
  },
  "resolutions": {
    "webpack": "^5",
    "@types/react": "17.0.40"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^2.0.14",
    "@hookform/error-message": "^2.0.0",
    "@loadable/component": "^5.15.2",
    "@medusajs/medusa": "^1.20.10",
    "@medusajs/medusa-js": "^2.0.2",
    "@meilisearch/instant-meilisearch": "^0.7.1",
    "@mui/material": "^5.11.9",
    "@paypal/paypal-js": "^5.0.6",
    "@paypal/react-paypal-js": "^7.8.1",
    "@remix-run/node": "^1.15.0",
    "@remix-run/react": "^1.15.0",
    "@stripe/react-stripe-js": "^1.7.2",
    "@stripe/stripe-js": "^1.29.0",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@tanstack/react-query": "4.22",
    "aws-sdk": "^2.1359.0",
    "axios": "^1.4.0",
    "classnames": "^2.3.2",
    "clsx": "^1.1.1",
    "core-js": "^3.38.1",
    "core-js-pure": "^3.38.1",
    "dompurify": "^3.0.2",
    "flowbite": "^1.6.3",
    "form-data": "^4.0.0",
    "formidable-serverless": "^1.1.1",
    "lodash": "^4.17.21",
    "medusa-file-spaces": "^1.3.6",
    "medusa-react": "^9.0.18",
    "mingcute_icon": "^2.4.0",
    "multi-range-slider-react": "^2.0.2",
    "next": "^12.3.4",
    "nextjs-progressbar": "^0.0.16",
    "query-string": "^8.1.0",
    "react": "17.0.2",
    "react-avatar": "^5.0.3",
    "react-country-flag": "^3.0.2",
    "react-datepicker": "^4.10.0",
    "react-dom": "17.0.2",
    "react-hook-form": "^7.30.0",
    "react-icons": "^4.7.1",
    "react-images-uploading": "^3.1.7",
    "react-instantsearch-hooks-web": "^6.29.0",
    "react-intersection-observer": "^9.3.4",
    "react-number-format": "^5.3.1",
    "react-select": "^5.7.3",
    "react-slider": "^2.0.4",
    "sharp": "^0.30.7",
    "swiper": "^9.0.3",
    "tailwind-scrollbar-hide": "^1.1.7"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@svgr/webpack": "^6.5.1",
    "@types/dompurify": "^3.0.2",
    "@types/fs-extra": "^11.0.1",
    "@types/loadable__component": "^5.13.4",
    "@types/node": "17.0.21",
    "@types/react": "17.0.40",
    "@types/react-calendar": "^3.9.0",
    "@types/react-datepicker": "^4.8.0",
    "@types/react-instantsearch-dom": "^6.12.3",
    "@types/react-slider": "^1.3.1",
    "autoprefixer": "^10.4.13",
    "babel-loader": "^8.2.3",
    "cypress": "^9.5.2",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4",
    "typescript": "4.6.2"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

And this my next.config.js:

const { withStoreConfig } = require("./store-config")
const store = require("./store.config.json")
const path = require("path")

const MEDUSA_BACKEND_URL =
  process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL ?? "http://localhost:9000"

module.exports = withStoreConfig({
  features: store.features,
  reactStrictMode: true,
  images: {
    domains: [
      "localhost",
      "is3.cloudhost.id",
    ],
  },
  webpack: (config, options) => {
    if (options.isServer) {
      config.externals = ["@tanstack/react-query", ...config.externals]
    }
    const reactQuery = path.resolve(require.resolve("@tanstack/react-query"))
    config.resolve.alias["@tanstack/react-query"] = reactQuery

    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    })

    return config
  },
  async rewrites() {
    return [
      {
        source: "/store/:path*",
        destination: `${MEDUSA_BACKEND_URL}/store/:path*`,
      },
    ]
  },
})