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:

yarn add medusa-react@latest @medusajs/medusa@latest
Report Incorrect CodeCopy to Clipboard

Uninstall React Query v3​

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

yarn remove react-query
Report Incorrect CodeCopy to Clipboard

Install Tanstack Query​

Run the following command to install Tanstack Query:

yarn add @tanstack/react-query
Report Incorrect CodeCopy to Clipboard

Update Imports​

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

For example, update the import for QueryClientCopy to Clipboard where you use it with Medusa Provider:

import { QueryClient } from "@tanstack/react-query"

// this remains the same
const queryClient = new QueryClient()
Report Incorrect CodeCopy to Clipboard

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
Report Incorrect CodeCopy to Clipboard

This is due to an issue related to Tanstack Query shipping esmCopy to Clipboard modules in its latest versions and how Next.js uses Webpack.

Although in future versions of medusa-reactCopy to Clipboard this issue will be fixed, you can add the following into next.config.jsCopy to Clipboard 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
Report Incorrect CodeCopy to Clipboard