fix(examples/react/start): make react-start example compatible with n…#329
fix(examples/react/start): make react-start example compatible with n…#329Dhavanesh24cs412 wants to merge 3 commits intoTanStack:mainfrom
Conversation
…pm-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.
🦋 Changeset detectedLatest commit: d35a68f The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Replace 'workspace:*' dependency with fixed version for compatibility with npm-based sandboxes. This change resolves installation issues in cloud-based environments.
📝 WalkthroughWalkthroughThe react/start example is updated for npm-based sandbox compatibility by replacing a workspace-linked dependency ( Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
.changeset/npm-sandbox-compat.md (1)
7-7: Minor: Capitalize "React" as a proper noun.The word "react" in "react/start example" should be capitalized to "React/start example" since React is a proper noun (library name).
📝 Suggested capitalization fix
-Replace the 'workspace:*' dependency reference with a fixed version (^0.4.0) for `@tanstack/devtools-event-client` in the react/start example. +Replace the 'workspace:*' dependency reference with a fixed version (^0.4.0) for `@tanstack/devtools-event-client` in the React/start example.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.changeset/npm-sandbox-compat.md at line 7, Update the phrase "react/start example" to "React/start example" in the changeset entry that mentions replacing the 'workspace:*' dependency for `@tanstack/devtools-event-client` so the proper noun React is capitalized; locate the sentence containing "react/start example" and change it to "React/start example".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.changeset/npm-sandbox-compat.md:
- Around line 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).
In `@examples/react/start/package.json`:
- 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.
---
Nitpick comments:
In @.changeset/npm-sandbox-compat.md:
- Line 7: Update the phrase "react/start example" to "React/start example" in
the changeset entry that mentions replacing the 'workspace:*' dependency for
`@tanstack/devtools-event-client` so the proper noun React is capitalized; locate
the sentence containing "react/start example" and change it to "React/start
example".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d6b4efce-ba20-4204-9eb1-9245ec377c40
📒 Files selected for processing (2)
.changeset/npm-sandbox-compat.mdexamples/react/start/package.json
| --- | ||
| "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. |
There was a problem hiding this comment.
🧩 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 -5Repository: 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.jsonRepository: 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.mdRepository: 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).
| "dependencies": { | ||
| "@tailwindcss/vite": "^4.0.6", | ||
| "@tanstack/devtools-event-client": "workspace:*", | ||
| "@tanstack/devtools-event-client": "^0.4.0", |
There was a problem hiding this comment.
🧩 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.
…pm-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.
🎯 Changes
✅ Checklist
pnpm test:pr.🚀 Release Impact
Summary by CodeRabbit