Skip to main content

Medusa React: v4.0.2

Version 4.0.2 of Medusa React introduces a new update in its dependencies which can lead to breaking changes.

Overview​

Medusa React previously required installing React Query v3 as a peer dependency. This version changes the peer dependency requirement to Tanstack Query - the updated version of React Query.

This requires additional actions related to installing the new dependency and changing imports.

Actions Required​

Update Medusa Dependencies​

To update to the latest version of Medusa React, run the following command in your custom storefront or admin to update both Medusa React and the core package:

npm install medusa-react@latest @medusajs/medusa@latest

Uninstall React Query v3​

As React Query v3 is not required as a peer dependency anymore, uninstall it from your custom storefront or admin:

npm uninstall react-query

Install Tanstack Query​

Run the following command to install Tanstack Query:

npm install @tanstack/react-query

Update Imports​

Across your custom storefront or admin project, change all imports from react-query to @tanstack/react-query.

For example, update the import for QueryClient where you use it with Medusa Provider:

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:

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:

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