Skip to content

fix(examples/react/start): make react-start example compatible with n… #329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dhavanesh24cs412 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(examples/react/start): make react-start example compatible with n… #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
320d7bd
fix(examples/react/start): make react-start example compatible with n…
Dhavanesh24cs412 Jan 27, 2026
d35a68f
chore: add changeset for npm-sandbox-compat fix
Dhavanesh24cs412 Jan 27, 2026
84241a3
Merge branch 'main' into patch-1
AlemTuzlak Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/npm-sandbox-compat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"start": patch
---

Make react-start example compatible with npm-based sandboxes

Replace the 'workspace:*' dependency reference with a fixed version (^0.4.0) for @tanstack/devtools-event-client in the react/start example.

The workspace:* reference was incompatible with npm-based sandboxes like StackBlitz and CodeSandbox, causing pnpm install failures with 'ERR_PNPM_OUTDATED_LOCKFILE' error.

This change allows the example to be used in cloud-based development environments while maintaining version compatibility.
Comment on lines +1 to +11
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if other example packages have changesets and verify publishing configuration

echo "=== Checking if examples directory is excluded from changesets config ==="
if [ -f .changeset/config.json ]; then
  cat .changeset/config.json | jq '.ignore // []'
fi

echo -e "\n=== Finding other changesets that target example packages ==="
rg -l '"@tanstack/devtools-example-|"start"|"time-travel"' .changeset/ -g '*.md' -g '!README.md'

echo -e "\n=== Checking package.json publish configuration for examples ==="
fd package.json examples/ -x jq -r '"\(.name): private=\(.private)"' {} \;

Repository: TanStack/devtools

Length of output: 1174

🏁 Script executed:

#!/bin/bash
# Search for changeset-related documentation or guidance

echo "=== Searching for changeset or release guidance in docs/contributing ==="
find . -maxdepth 3 -type f \( -name "CONTRIBUTING*" -o -name "CHANGELOG*" -o -name "README*" \) | head -10

echo -e "\n=== Checking for any comments about changesets in config or root ==="
rg -i "changeset|private.*example|example.*private" .changeset/config.json README.md CONTRIBUTING.md 2>/dev/null || true

echo -e "\n=== Checking git history of the changeset directory ==="
git log --oneline .changeset/config.json 2>/dev/null | head -5

Repository: TanStack/devtools

Length of output: 797

🏁 Script executed:

#!/bin/bash
# Check CONTRIBUTING.md and README.md for changeset guidance

echo "=== Checking CONTRIBUTING.md for changeset guidance ==="
rg -C 5 -i "changeset|version|release" CONTRIBUTING.md | head -50

echo -e "\n=== Checking if there are any examples in .changeset/ directory ==="
ls -la .changeset/ | grep -E "\.md$"

echo -e "\n=== Checking .changeset/config.json for ignore patterns ==="
cat .changeset/config.json

Repository: TanStack/devtools

Length of output: 654

🏁 Script executed:

#!/bin/bash
# Verify this is truly the only changeset for a private package by listing all changesets

echo "=== All changesets in the repository ==="
find .changeset -name "*.md" ! -name "README.md" -exec basename {} \;

echo -e "\n=== Content of npm-sandbox-compat.md to confirm it targets 'start' ==="
head -5 .changeset/npm-sandbox-compat.md

Repository: TanStack/devtools

Length of output: 280

Remove this changeset—it targets a private package that will not be published.

The "start" package is marked "private": true in examples/react/start/package.json. Changesets are for managing versions of publishable npm packages. Private example packages do not require changesets, as they are never published and don't need version tracking through the release process. Keeping this changeset could cause confusion and incorrect behavior in the release workflow.

🧰 Tools
🪛 LanguageTool

[uncategorized] ~7-~7: “React” is a proper noun and needs to be capitalized.
Context: ... @tanstack/devtools-event-client in the react/start example. The workspace:* referen...

(A_GOOGLE)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.changeset/npm-sandbox-compat.md around lines 1 - 11, The changeset targets
a private example package ("start") and should be removed; delete the
.changeset/npm-sandbox-compat.md file and any references to this changeset so
the release workflow doesn't try to version the private examples, and ensure the
examples/react/start/package.json (the "start" package marked "private": true)
remains unchanged (do not publish or include a changeset for
`@tanstack/devtools-event-client` or any workspace:* replacement in that private
example).

2 changes: 1 addition & 1 deletion examples/react/start/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@tailwindcss/vite": "^4.0.6",
"@tanstack/devtools-event-client": "workspace:*",
"@tanstack/devtools-event-client": "^0.4.0",
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify `@tanstack/devtools-event-client` version 0.4.0 exists and check other examples

echo "=== Checking if version 0.4.0 exists on npm ==="
npm view `@tanstack/devtools-event-client` versions --json | jq -r '.[]' | grep "^0\.4\.0$"

echo -e "\n=== Finding all examples using workspace references for this package ==="
fd -e json -x grep -l "devtools-event-client" {} \; | xargs grep -H "devtools-event-client.*workspace"

Repository: TanStack/devtools

Length of output: 377

Apply the same dependency fix to examples/react/time-travel for consistency.

The version 0.4.0 of @tanstack/devtools-event-client exists on npm. However, examples/react/time-travel/package.json currently uses "workspace:^" for the same dependency, which would cause identical sandbox failures. Change it to "^0.4.0" to match this fix.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@examples/react/start/package.json` at line 13, Update the dependency entry
for "@tanstack/devtools-event-client" in the
examples/react/time-travel/package.json to use the published semver "^0.4.0"
instead of "workspace:^" so it matches the fix applied in examples/react/start
and prevents sandbox resolution failures; locate the dependency key
"@tanstack/devtools-event-client" and replace its version string accordingly.

"@tanstack/react-devtools": "^0.10.2",
"@tanstack/react-router": "^1.132.0",
"@tanstack/react-router-devtools": "^1.132.0",
Expand Down