Is MedusaProvider compatible with nextjs13?

[bmartinezg]

I am currently trying to set up my own front for an ecommerce with next13. To do this, I have installed the react sdk and I am following the documentation.

  <MedusaProvider
    queryClientProviderProps={{
      client: queryClient,
    }}
    baseUrl="http://localhost:7001"
  >
    <NextUIProvider>{children}</NextUIProvider>
  </MedusaProvider>

When I try to use a hook:

  const { error } = useCollections();

I get the following error;

useBaseQuery.js:19 Uncaught TypeError: client.defaultQueryOptions is not a function
    at useBaseQuery (webpack-internal:///(app-pages-browser)/./node_modules/@tanstack/react-query/build/modern/useBaseQuery.js:26:35)
    at useQuery (webpack-internal:///(app-pages-browser)/./node_modules/@tanstack/react-query/build/modern/useQuery.js:13:72)
    at On (webpack-internal:///(app-pages-browser)/./node_modules/medusa-react/dist/index.mjs:368:6565)
    at HomeHero (webpack-internal:///(app-pages-browser)/./src/modules/home/ui/HomeHero.tsx:22:83)
    at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10732:18)
    at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15215:20)
    at mountLazyComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15655:17)
    at beginWork$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17360:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19467:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19516:16)
    at invokeGuardedCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19591:29)
    at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25733:7)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24557:12)
    at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24273:5)
    at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24228:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23360:74)
    at workLoop (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21)

Do I have to use sdkjs instead? or is it compatible with next?

Thanks in advance!

[moigamijunior]

I'm having a Isuue like this with nextjs 14.

I upgrade this repo with yarn upgrade-interactive --latest and fix the types and tansktack/query (useMutation etc) usage. So I got this Issue.

TypeError: this[#x].defaultMutationOptions is not a function
    at m.setOptions (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/.next/server/chunks/9472.js:1:278116)
    at new m (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/.next/server/chunks/9472.js:1:277925)
    at /Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/.next/server/chunks/9472.js:1:279339
    at r8 (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:28:32037)
    at Object.useState (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:28:34009)
    at t.useState (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:60:7030)
    at useMutation (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/.next/server/chunks/9472.js:1:279326)
    at eU (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/.next/server/chunks/9472.js:1:323376)
    at wm (/Users/moises.desenvolvedor/Apps/medusajs/luz-da-lua-storefront/.next/server/chunks/9472.js:1:325613)

[VariableVic]

@bmartinezg It should be compatible! We use it in this starter, which is currently at Next 13. Could be something wrong with your config. Check out src/modules/providers/index.tsx and src/lib/config.ts for a working example.

@moigamijunior When are you getting this error? I've updated to Next 14 locally (manual upgrade by bumping the package version) and got no errors so far. I'll do some more testing and then merge the update.

[bmartinezg]

@VariableVic thanks for your quick replay! Something about I got confused in the starter FE template is that both SDKs (JS and React) are implemented. Should I use both as in the example to go through this error? Thanks again.

[VariableVic]

@bmartinezg Nope, both SDKs should be usable independently of each other. Can you share your queryClient config? Are you instantiating it properly?

[moigamijunior]

@VariableVic I realized the error was on react-query v5. It's working on Next 14 without issues.

[bmartinezg]

I updated to next 14 and so far works. Thanks for the help!