diff --git a/docs/content/advanced/backend/upgrade-guides/medusa-react/4-0-2.md b/docs/content/advanced/backend/upgrade-guides/medusa-react/4-0-2.md index 22d7089c61..a78ddd1b46 100644 --- a/docs/content/advanced/backend/upgrade-guides/medusa-react/4-0-2.md +++ b/docs/content/advanced/backend/upgrade-guides/medusa-react/4-0-2.md @@ -52,3 +52,36 @@ import { QueryClient } from "@tanstack/react-query" // this remains the same const queryClient = new QueryClient() ``` + +### Fix No QueryClient set Errors + +If you're using a Next.js storefront, you might face the following error after this update when you run your storefront: + +```bash +No QueryClient set +``` + +This is due to an issue related to Tanstack Query shipping `esm` modules in its latest versions and how Next.js uses Webpack. + +Although in future versions of `medusa-react` this issue will be fixed, you can add the following into `next.config.js` to fix this error: + +```js +const path = require("path") + +/** @type {import('next').NextConfig} */ +const nextConfig = { + // ... other configs + 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 + return config + }, +} + +module.exports = nextConfig +```