fix(example): use import type for ActivityComponentType to avoid runtime errors #603
Conversation
…t runtime error `ActivityComponentType` is a type-only export from `@stackflow/react`, and importing it as a value causes a runtime error in TypeScript when using ESM. This commit updates the example to use `import type`, which is the correct and safe way to import types.
|
📝 WalkthroughSummary by CodeRabbit
WalkthroughDocumentation TypeScript examples across English and Korean pages were updated to import ActivityComponentType as a type-only import (using Changes
Sequence Diagram(s)(Skipped — changes are import-style edits in documentation and do not alter control flow.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
docs/pages/docs/advanced/preloading.en.mdx (1)
85-90: Fix broken component type annotation and missing React importThe example currently has an incomplete type annotation (
const MyActivity: = () => {) and usesuseEffectwithout importing it. Also, the code block filename isMyActivity.tswhile JSX is used; prefer.tsx.Apply the following diff in this block:
-import type { ActivityComponentType } from "@stackflow/react"; +import type { ActivityComponentType } from "@stackflow/react"; +import { useEffect } from "react"; @@ -const MyActivity: = () => { +const MyActivity: ActivityComponentType = () => {Additionally, consider changing the code fence filename from
MyActivity.tstoMyActivity.tsxto reflect JSX usage.docs/pages/docs/advanced/preloading.ko.mdx (1)
85-90: 컴포넌트 타입 주석 누락 및 ReactuseEffect임포트 누락코드 블록에
const MyActivity: = () => {로 타입이 비어 있고,useEffect를 임포트하지 않았습니다. 또한 JSX를 사용하므로 파일명은.tsx가 더 적절합니다.아래 수정안을 적용해 주세요:
-import type { ActivityComponentType } from "@stackflow/react"; +import type { ActivityComponentType } from "@stackflow/react"; +import { useEffect } from "react"; @@ -const MyActivity: = () => { +const MyActivity: ActivityComponentType = () => {추가로, 코드 펜스의 파일명을
MyActivity.ts에서MyActivity.tsx로 변경하는 것을 권장합니다.
🧹 Nitpick comments (1)
docs/pages/docs/get-started/navigating-step.ko.mdx (1)
98-98: LGTM: type-only import here as well.All step-related examples now consistently avoid runtime imports for
ActivityComponentType.Consider adding a brief note near the first snippet explaining that
ActivityComponentTypeis a type-only export and thus imported withimport typeto avoid runtime errors in ESM builds. This can preempt questions from readers.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (8)
docs/pages/docs/advanced/preloading.en.mdx(2 hunks)docs/pages/docs/advanced/preloading.ko.mdx(2 hunks)docs/pages/docs/get-started/activity.en.mdx(2 hunks)docs/pages/docs/get-started/activity.ko.mdx(2 hunks)docs/pages/docs/get-started/navigating-activities.en.mdx(3 hunks)docs/pages/docs/get-started/navigating-activities.ko.mdx(3 hunks)docs/pages/docs/get-started/navigating-step.en.mdx(3 hunks)docs/pages/docs/get-started/navigating-step.ko.mdx(3 hunks)
🔇 Additional comments (16)
docs/pages/docs/advanced/preloading.en.mdx (1)
58-61: Type-only import is correct and prevents ESM runtime errorsSwitching to
import typeforActivityComponentTypeis appropriate since it's a type-only export. This aligns the example with TS best practices and avoids runtime import issues.docs/pages/docs/get-started/activity.ko.mdx (2)
24-33: 올바른 타입 전용 임포트 변경
ActivityComponentType를import type으로 가져오도록 변경한 부분이 적절합니다. 런타임 임포트 오류를 방지합니다.
108-116: 타입 전용 임포트 변경 LGTM예제에서 타입으로만 사용하는
ActivityComponentType을import type으로 바꾼 것이 맞습니다.docs/pages/docs/advanced/preloading.ko.mdx (1)
58-61: 타입 전용 임포트로의 변경이 적절합니다
ActivityComponentType는 타입 전용이므로import type사용이 맞습니다. ESM 환경에서의 런타임 오류를 방지합니다.docs/pages/docs/get-started/navigating-activities.en.mdx (3)
17-22: Type-only import change looks goodUsing
import typehere is correct and prevents bundlingActivityComponentTypeas a runtime value.
79-84: Type-only import change looks goodConsistent change across examples; no runtime impact.
137-145: Type-only import change looks goodCorrectly imports
ActivityComponentTypeas a type only for the Article example.docs/pages/docs/get-started/navigating-step.en.mdx (3)
23-31: Type-only import is correctAppropriate use of
import typeforActivityComponentTypein the StepPush example.
60-68: Type-only import is correctConsistent and correct in the StepReplace example.
96-104: Type-only import is correctConsistent and correct in the StepPop example.
docs/pages/docs/get-started/navigating-step.ko.mdx (1)
62-62: Consistent and correct use ofimport typein this snippet.This aligns the docs with TS best practices and prevents accidental value import at runtime.
docs/pages/docs/get-started/activity.en.mdx (2)
24-24: Good fix:import typeensures no runtime value import.Prevents ESM runtime errors and matches how
ActivityComponentTypeis intended to be used.
104-104: LGTM for the parameterized example as well.Consistent, type-safe, and avoids runtime import pitfalls.
docs/pages/docs/get-started/navigating-activities.ko.mdx (3)
17-17: Solid: replaced runtime import withimport type.Prevents importing a non-existent runtime symbol; aligns with TS best practices.
81-81: LGTM: consistent application ofimport type.This keeps the docs accurate for ESM consumers.
142-142: LGTM: Article example updated correctly.Type-only import used; no runtime side effects introduced.
|
|
||
| ```tsx showLineNumbers filename="Article.tsx" copy /stepPush/ | ||
| import { ActivityComponentType } from "@stackflow/react"; | ||
| import type { ActivityComponentType } from "@stackflow/react"; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Correct: switch to type-only import prevents ESM runtime errors.
Using import type { ActivityComponentType } matches its type-only nature and avoids runtime import of a non-existent value in ESM builds. LGTM.
To ensure there are no remaining runtime imports of ActivityComponentType elsewhere, run:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Any remaining non-type runtime imports (should return no matches)
rg -nP -C2 $'import\\s*\\{\\s*ActivityComponentType\\s*\\}\\s*from\\s*[\'"]@stackflow/react[\'"]'
# 2) For reference, show the updated type-only imports
rg -nP -C1 $'import\\s+type\\s*\\{\\s*ActivityComponentType\\s*\\}\\s*from\\s*[\'"]@stackflow/react[\'"]'Length of output: 115
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Repo root: $(pwd)"
echo "Git branch: $(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo 'no-git')"
echo
echo "Looking for the file path (case-sensitive):"
rg -n --hidden -S 'navigating-step.ko.mdx' || true
echo
echo "If present, print first 200 lines of docs/pages/docs/get-started/navigating-step.ko.mdx:"
if [ -f docs/pages/docs/get-started/navigating-step.ko.mdx ]; then
sed -n '1,200p' docs/pages/docs/get-started/navigating-step.ko.mdx || true
else
echo "File not found at docs/pages/docs/get-started/navigating-step.ko.mdx"
fi
echo
echo "Search for any mention of ActivityComponentType in the repo:"
rg -n --hidden -S 'ActivityComponentType' || true
echo
echo "Search for any runtime imports from @stackflow/react that include ActivityComponentType:"
rg -nP -S $'import\\s*\\{\\s*ActivityComponentType\\s*\\}\\s*from\\s*[\'"]@stackflow/react[\'"]' || true
echo
echo "Search for any type-only imports from @stackflow/react that include ActivityComponentType:"
rg -nP -S $'import\\s+type\\s*\\{\\s*ActivityComponentType\\s*\\}\\s*from\\s*[\'"]@stackflow/react[\'"]' || true
echo
echo "Also show any imports from @stackflow/react (for broader context):"
rg -n --hidden -S "@stackflow/react" -g '!*node_modules/*' || trueLength of output: 53434
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching for non-type imports that include ActivityComponentType from @stackflow/react or @stackflow/react/future..."
rg -nP --hidden -S "import\s*\{[^}]*ActivityComponentType[^}]*\}\s*from\s*['\"]@stackflow/react(?:/future)?['\"]" -g '!*node_modules/*' || true \
| rg -v "import\s+type" || trueLength of output: 892
Fix required: convert remaining runtime imports of ActivityComponentType to type-only
The type-only import change is correct, but I found remaining runtime imports that include ActivityComponentType alongside value exports — these should be split into a type-only import + a runtime import.
Files to update:
- docs/pages/docs/get-started/getting-state.ko.mdx — lines 21, 72
- docs/pages/docs/get-started/getting-state.en.mdx — lines 21, 72
Suggested fixes (examples):
Replace:
import { ActivityComponentType, useStack } from "@stackflow/react";
With:
import type { ActivityComponentType } from "@stackflow/react";
import { useStack } from "@stackflow/react";
Replace:
import { ActivityComponentType, useActivity } from "@stackflow/react";
With:
import type { ActivityComponentType } from "@stackflow/react";
import { useActivity } from "@stackflow/react";
🤖 Prompt for AI Agents
In docs/pages/docs/get-started/getting-state.ko.mdx around lines 21 and 72 (and
similarly in docs/pages/docs/get-started/getting-state.en.mdx at the same
lines), the import currently mixes the type ActivityComponentType with runtime
hooks (e.g. useStack, useActivity); change each combined import into two
imports: a type-only import for ActivityComponentType and a separate runtime
import for the value exports (useStack, useActivity) from "@stackflow/react".
Ensure you replace import { ActivityComponentType, X } with import type {
ActivityComponentType } and import { X } to avoid bringing the type into
runtime.
There was a problem hiding this comment.
@umsungjun Would you apply changes to these files too?
PS. I guess it's okay to ignore other comments from coderabbit
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
@ENvironmentSet
It seems that the changes are already applied in the commit, so this might be a Coderabbit error.
There was a problem hiding this comment.
I cannot find docs/pages/docs/get-started/getting-state.ko.mdx and docs/pages/docs/get-started/getting-state.en.mdx are changed in anywhere. Where can I check them?
There was a problem hiding this comment.
@ENvironmentSet Sorry for the confusion, I misunderstood earlier.
As you pointed out, I’ve updated and committed the changes to both docs/pages/docs/get-started/getting-state.ko.mdx and docs/pages/docs/get-started/getting-state.en.mdx.
Thanks for pointing it out!
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
docs/pages/docs/get-started/getting-state.en.mdx(2 hunks)docs/pages/docs/get-started/getting-state.ko.mdx(2 hunks)
🔇 Additional comments (2)
docs/pages/docs/get-started/getting-state.en.mdx (1)
73-74: LGTM: correct separation of value vs. type import.
useActivitystays as a value import;ActivityComponentTypeis type-only. This matches the PR objective and avoids runtime import issues.docs/pages/docs/get-started/getting-state.ko.mdx (1)
21-22: LGTM: 타입 전용 임포트 분리 적절.
useStack는 런타임 임포트로 유지하고,ActivityComponentType만 타입 전용으로 임포트한 구성은 올바릅니다.
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
docs/pages/docs/get-started/getting-state.en.mdx (1)
63-63: Typo: “activites” → “activities”User-facing docs should be typo-free.
-| activities | `Activity[]` | list of activites | +| activities | `Activity[]` | list of activities |
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
docs/pages/docs/get-started/getting-state.en.mdx(2 hunks)docs/pages/docs/get-started/getting-state.ko.mdx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/pages/docs/get-started/getting-state.ko.mdx
ENvironmentSet
left a comment
ENvironmentSet
left a comment
There was a problem hiding this comment.
Thank you for your contribution, check my minor suggestions and request me a review when you think it's okay to merge
|
@ENvironmentSet |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/pages/docs/get-started/navigating-activities.ko.mdx (1)
17-17: Optional: enforce with ESLint to prevent regressionsConsider enabling @typescript-eslint/consistent-type-imports so type-only imports are enforced uniformly in examples and source.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
docs/pages/docs/get-started/getting-state.en.mdx(2 hunks)docs/pages/docs/get-started/navigating-activities.en.mdx(3 hunks)docs/pages/docs/get-started/navigating-activities.ko.mdx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/pages/docs/get-started/navigating-activities.en.mdx
- docs/pages/docs/get-started/getting-state.en.mdx
🔇 Additional comments (4)
docs/pages/docs/get-started/navigating-activities.ko.mdx (4)
81-81: Repeat fix looks goodThis block also correctly uses
import typewithActivityComponentType. No issues found.
138-138: No substantive changeOnly whitespace/context marker adjusted here. Nothing to review.
140-140: Type-only import is correct for generic usage
ActivityComponentType<ArticleParams>is used purely in a type position; importing it withimport typeavoids runtime import of a non-runtime symbol. Looks good.
17-17: All non-type imports ofActivityComponentTypehave been removed
The verification script returned no matches for value-imports, confirming thatActivityComponentTypeis now imported only as a type and won’t cause any ESM runtime errors. LGTM!
2 participants
Summary
This PR updates the example code to use
import typewhen importingActivityComponentTypefrom@stackflow/react.Reason
ActivityComponentTypeis a type-only export. Usingimport { ActivityComponentType }can lead to runtime errors in TypeScript, especially when the module is compiled to ESM.By switching to
import type, the example is now aligned with best practices and avoids potential issues.