Basic install fails for Yarn PnP

[forresthopkinsa]

Which project does this relate to?

Router

Describe the bug

When using Yarn PnP, the basic installation steps create an error that kills the Vite dev server:

$ yarn dev
♻️  Generating routes...
✅ Processed routes in 55ms
5:28:36 PM [vite] (client) Forced re-optimization of dependencies

  VITE v6.2.1  ready in 447 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "tiny-invariant"

    ../../node_modules/.store/@tanstack-router-devtools-core-virtual-85598b6a68/package/dist/esm/BaseTanStackRouterDevtoolsPanel.js:3:22:
      3 │ import invariant from "tiny-invariant";
        ╵                       ~~~~~~~~~~~~~~~~

  You can mark the path "tiny-invariant" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@tanstack/router-core"

    ../../node_modules/.store/@tanstack-router-devtools-core-virtual-85598b6a68/package/dist/esm/BaseTanStackRouterDevtoolsPanel.js:4:38:
      4 │ import { rootRouteId, trimPath } from "@tanstack/router-core";
        ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@tanstack/router-core" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

<project_path>/node_modules/.store/esbuild-npm-0.25.0-239cf019a2/package/lib/main.js:1477
  let error = new Error(text);
              ^
Error: Build failed with 2 errors:
../../node_modules/.store/@tanstack-router-devtools-core-virtual-85598b6a68/package/dist/esm/BaseTanStackRouterDevtoolsPanel.js:3:22: ERROR: Could not resolve "tiny-invariant"
../../node_modules/.store/@tanstack-router-devtools-core-virtual-85598b6a68/package/dist/esm/BaseTanStackRouterDevtoolsPanel.js:4:38: ERROR: Could not resolve "@tanstack/router-core"
    at failureErrorWithLog (<project_path>/node_modules/.store/esbuild-npm-0.25.0-239cf019a2/package/lib/main.js:1477:15)
    at <project_path>/node_modules/.store/esbuild-npm-0.25.0-239cf019a2/package/lib/main.js:946:25
    at <project_path>/node_modules/.store/esbuild-npm-0.25.0-239cf019a2/package/lib/main.js:1355:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Your Example Website or App

Will add on request

Steps to Reproduce the Bug or Issue

1. Create a Yarn + Vite + React package
2. Follow the steps from Quickstart exactly
3. Run the Vite dev server

Expected behavior

Expected the dev server to start without error

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: N/A
• Versions:

"@tanstack/react-router": "^1.114.17",
"@tanstack/eslint-plugin-router": "^1.114.12",
"@tanstack/react-router-devtools": "^1.114.21",
"@tanstack/router-plugin": "^1.114.17",

Additional context

Will add a lot more detail if this is not immediately reproducible for you, just let me know

[forresthopkinsa]

I can work around this by adding package extensions to .yarnrc.yml:

packageExtensions:
  "@tanstack/react-router-devtools@^1.114.21":
    dependencies:
      "@tanstack/router-core": "^1.114.17"
      "tiny-invariant": "^1.3.3"

[SeanCassiere]

This might've just been a bad release, could you try again?

[smithgeek]

I'm seeing the same issue with the latest release

[sooohka]

I can work around this by adding package extensions to .yarnrc.yml:

packageExtensions:
"@tanstack/react-router-devtools@^1.114.21":
dependencies:
"@tanstack/router-core": "^1.114.17"
"tiny-invariant": "^1.3.3"

@forresthopkinsa you saved my day thanks

[leaumar]

Same with 1.116.0 under yarn pnp. Dependencies should really just be declared properly. Downstream projects working around missing deps by tacking them on top is asking for problems in the future as it's impossible to properly maintain such hacks (as version numbers change etc).

[SeanCassiere]

... Downstream projects working around missing deps by tacking them on top is asking for problems in the future as it's impossible to properly maintain such hacks (as version numbers change etc).

I agree!

The problem is that we don't know what's specifically wrong in the listed dependencies that's causing this Yarn PnP specific issue. What's even more puzzling is that this works on the other package managers (npm and pnpm) and even the bleeding edge stuff going on in the Bun world.

Unless we can figure out what's going on here, specifically with Yarn PnP, there's really nothing that we can do.

If anyone has any idea as to what changes needs to be made to the dependencies fields in the package.json files to get this resolved, I'd be happy to try them out.

[ramekpai]

I can work around this by adding package extensions to .yarnrc.yml:

packageExtensions:
"@tanstack/react-router-devtools@^1.114.21":
dependencies:
"@tanstack/router-core": "^1.114.17"
"tiny-invariant": "^1.3.3"

Thx!

Also want to bump this thread because of still seeing the same issue with the latest release (1.120.11)