Skip to content

Conversation

@Dhavanesh24cs412
Copy link

Description

Fixes #321 - TanStack Start example now works in interactive sandboxes by replacing Yarn workspace protocol with published npm version.

Problem

The React Start example (examples/react/start) uses workspace:* protocol for the @tanstack/devtools-event-client dependency. This protocol is specific to Yarn workspaces and is not supported by npm, which is the package manager used by CodeSandbox, StackBlitz, and other interactive sandbox environments.

Error Before Fix

npm error code EUNSUPPORTEDPROTOCOL
npm error Unsupported URL Type "workspace:"

This prevents users from accessing the example in any npm-based interactive sandbox.

Solution

Replaced the workspace protocol with the published npm version of the dependency:

  • Before: "@tanstack/devtools-event-client": "workspace:*"
  • After: "@tanstack/devtools-event-client": "^0.4.0"

The version 0.4.0 is the latest published version on npm and provides the same functionality.

Changes

  • Modified file: examples/react/start/package.json
  • Change: Updated @tanstack/devtools-event-client dependency version
  • Impact: Zero breaking changes - only aligns with npm-published versions

Testing

  • npm install completes successfully without workspace protocol errors
  • npm run dev starts the development server without errors
  • ✅ Example loads correctly in the browser
  • ✅ All dependencies resolve properly in npm-based environments

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Related Issues

Closes #321

- Replace hardcoded 400px height with viewport-relative calculation
- Height now scales as 50% of viewport height
- Respects minimum (300px) and maximum (400px) constraints
- Fixes issue where devtools panel was fixed to small height in fullscreen
- Panel now properly adapts to different screen sizes

Fixes TanStack#320
@changeset-bot
Copy link

changeset-bot bot commented Jan 15, 2026

⚠️ No Changeset found

Latest commit: 882bf14

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Dhavanesh24cs412
Copy link
Author

Dhavanesh24cs412 commented Jan 16, 2026

This solution addresses the workspace protocol compatibility issue well by replacing Yarn-specific workspace:* protocols with npm-compatible version pins. The approach ensures the react-start example now works seamlessly across different interactive sandbox environments (CodeSandbox, StackBlitz, etc.) without sacrificing functionality.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: TanStack Start example doesn't run in interactive sandboxes

1 participant