Monorepo No QueryClient set, use QueryClientProvider to set one (from v4.3.0, turborepo, pnpm, one link)

[alikleit]

I have a turborepo monorepo that contains a CRA, and a Next app. On the packages side, 2 packages are using react-query which are built using tsup and consumed in the applications.

I'm having the same issue now (again) that I had before when once upgraded to v4.2.3 with turborepo and pnpm. and now after upgrading from v4.2.3 to the latest (or to v4.3.0 in particular)

I managed back then to make them link to only one package via hoisting and peerDependencies.

Now, I have validated that they are still one linking to one package but somehow the final build includes two versions of react-query when searching for the occurrence of throw new Error("No QueryClient set, use QueryClientProvider to set one"); I made sure other packages within the monorepo that are dependent to react-query are all the same version.

Not sure what happened from v4.3.0 for that to affect the final build. It's not an option as well to stay on v4.2.3 as now we rely on the new use client implementation for the Next app directory

"packageManager": "pnpm@7.29.1"
"turbo": "^1.9.8"
"tsup": "6.3.0"

Any take on that?

[TkDodo]

everything before 4.3.0 is pretty broken when it comes to bundling, so I recommend upgrading. it's likely a problem with peerDependencies, pnpm v8 has this fixed. There's also a flag to opt in for v7. it's this issue:

• pnpm creates multiple installations for same dependency pnpm/pnpm#5351

[alikleit]

It was not actually a pnpm issue as I tried as well to upgrade to 8, The thing is that in the lock file they are all linked to one package of @tanstack/react-query.

Made it work, by defining .mjs in the exports, this was my package.json before:

 "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsup ./index.ts --format cjs,esm --dts",
    "dev": "tsup ./index.ts --format cjs,esm --watch --dts",
    "lint": "eslint src/**"
  },

By adding exports and defining the mjs extension:

  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "typings": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./dist/*.types": {
      "import": "./dist/*.types.mjs",
      "require": "./dist/*.types.js",
      "types": "./dist/*.types.d.ts"
    },
    "./package.json": "./package.json"
  },

[djstein]

wild that this worked for me