Skip to content

fix(example): use import type for ActivityComponentType to avoid runtime errors #603

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

Merged
ENvironmentSet merged 7 commits into from
Aug 16, 2025
Merged

fix(example): use import type for ActivityComponentType to avoid runtime errors #603

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
283ae06
fix(example): use `import type` for `ActivityComponentType` to preven…
umsungjun May 26, 2025
831ea39
Merge branch 'main' into fix/example-import-type
ENvironmentSet Aug 15, 2025
f6de8d2
fix(example): use import type for ActivityComponentType to avoid runt…
umsungjun Aug 16, 2025
fc0c2af
fix(example): use import type for ActivityComponentType to avoid runt…
umsungjun Aug 16, 2025
7b0e804
fix(example): use import type for ActivityComponentType to avoid runt…
umsungjun Aug 16, 2025
1d33854
Remove space
ENvironmentSet Aug 16, 2025
6fa0ffe
Merge branch 'main' into fix/example-import-type
ENvironmentSet Aug 16, 2025
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
4 changes: 2 additions & 2 deletions docs/pages/docs/advanced/preloading.en.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export type TypeActivities = typeof activities;
Afterwards, within each activity, you can retrieve the `preloadRef` value using the `useActivityPreloadRef()` hook.

```tsx showLineNumbers filename="MyActivity.ts" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { useActivityPreloadRef } from "@stackflow/plugin-preload";

const MyActivity: ActivityComponentType = () => {
Expand All @@ -82,7 +82,7 @@ export const { usePreloader } = createPreloader<TypeActivities>();
```

```tsx showLineNumbers filename="MyActivity.ts" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { usePreloader } from "./usePreloader";

const MyActivity: = () => {
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/docs/advanced/preloading.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export type TypeActivities = typeof activities;
이후 각 액티비티 내에서 `useActivityPreloadRef()` 훅을 통해 해당 `preloadRef` 값을 가져올 수 있어요.

```tsx showLineNumbers filename="MyActivity.ts" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { useActivityPreloadRef } from "@stackflow/plugin-preload";

const MyActivity: ActivityComponentType = () => {
Expand All @@ -82,7 +82,7 @@ export const { usePreloader } = createPreloader<TypeActivities>();
```

```tsx showLineNumbers filename="MyActivity.ts" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { usePreloader } from "./usePreloader";

const MyActivity: = () => {
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/docs/get-started/activity.en.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { APITable } from "../../../components/APITable";
To actually use an activity, you need to register it with the `stackflow()` function before using it. An activity is a React component declared with the type `ActivityComponentType`.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

const MyActivity: ActivityComponentType = () => {
Expand Down Expand Up @@ -101,7 +101,7 @@ If you have successfully registered the initial activity, you can see the render
Some activities require specific parameters when used. In such cases, declare the parameter as the activity's Props.

```tsx showLineNumbers filename="Article.tsx" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

type ArticleParams = {
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/docs/get-started/activity.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { APITable } from "../../../components/APITable";
액티비티를 실제로 사용하기 위해서는 사용하기 전 `stackflow()` 함수에 등록이 필요해요. 액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트에요.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

const MyActivity: ActivityComponentType = () => {
Expand Down Expand Up @@ -105,7 +105,7 @@ export const { Stack, useFlow } = stackflow({
해당 액티비티가 사용될 때, 특정 파라미터가 필요한 경우가 있어요. 이런 경우 다음과 같이 액티비티의 Props로 해당 파라미터를 선언해요.

```tsx showLineNumbers filename="Article.tsx" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

type ArticleParams = {
Expand Down
6 changes: 4 additions & 2 deletions docs/pages/docs/get-started/getting-state.en.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ The activities accessible through the `activities` field contain information rel
To access the stack state in a UI component, use the `useStack()` hook.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { ActivityComponentType, useStack } from "@stackflow/react";
import { useStack } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down Expand Up @@ -69,7 +70,8 @@ There are the following fields in the stack state.
You can use the `useActivity()` hook to get information about the current activity.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { ActivityComponentType, useActivity } from "@stackflow/react";
import { useActivity } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down
6 changes: 4 additions & 2 deletions docs/pages/docs/get-started/getting-state.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import { APITable } from "../../../components/APITable";
스택 상태를 UI 컴포넌트에서 가져오려면, `useStack()` 훅을 활용해요.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { ActivityComponentType, useStack } from "@stackflow/react";
import { useStack } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down Expand Up @@ -69,7 +70,8 @@ export default MyActivity;
현재 액티비티의 정보를 가져오기 위해 `useActivity()` 훅을 사용할 수 있어요.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import { ActivityComponentType, useActivity } from "@stackflow/react";
import { useActivity } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down
6 changes: 3 additions & 3 deletions docs/pages/docs/get-started/navigating-activities.en.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ If you have successfully registered an activity, it's time to navigate between a
We use the `useFlow()` hook created in `stackflow.ts`. Through the `push()` function within this hook, we can stack a new activity as follows.

```tsx showLineNumbers filename="MyActivity.tsx" copy /push/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down Expand Up @@ -76,7 +76,7 @@ The third parameter of the `push()` function, additional options, includes the f
Next, let's look at how to replace the current activity without adding a new activity to the stack. Using the `replace()` function from the `useFlow()` hook created in `stackflow.ts`, you can replace the current activity as follows.

```tsx showLineNumbers filename="MyActivity.tsx" copy /replace/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down Expand Up @@ -134,7 +134,7 @@ The third parameter of the `replace()` function, additional options, includes th
Finally, let's look at how to delete the current activity and return to the previous activity. Using the `pop()` function from the `useFlow()` hook created in `stackflow.ts`, you can delete the current activity as follows.

```tsx showLineNumbers filename="Article.tsx" copy /pop/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down
6 changes: 3 additions & 3 deletions docs/pages/docs/get-started/navigating-activities.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { APITable } from "../../../components/APITable";
`stackflow.ts`에서 생성했던 `useFlow()` 훅을 사용해요. 해당 훅 내에 `push()` 함수를 통해 다음과 같이 새 액티비티를 쌓을 수 있어요.

```tsx filename="MyActivity.tsx" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down Expand Up @@ -78,7 +78,7 @@ push(
다음으로 스택에 새로운 액티비티를 추가하지 않고 현재 액티비티를 교체하는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `replace()` 함수를 통해 다음과 같이 현재 액티비티를 교체할 수 있어요.

```tsx filename="MyActivity.tsx" copy
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down Expand Up @@ -139,7 +139,7 @@ replace(
/**
* Article.tsx
*/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

Expand Down
6 changes: 3 additions & 3 deletions docs/pages/docs/get-started/navigating-step.en.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ You can use steps when you want to have a virtual stack state within a single ac
Use the `useStepFlow()` hook created in `stackflow.ts`. Through the `stepPush()` function within this hook, you can stack a new step as follows.

```tsx showLineNumbers filename="Article.tsx" copy /stepPush/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useStepFlow } from "./stackflow";

Expand Down Expand Up @@ -57,7 +57,7 @@ export default Article;
You can replace the current step using the `stepReplace()` function in `useStepFlow()`.

```tsx showLineNumbers filename="Article.tsx" copy /stepReplace/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useStepFlow } from "./stackflow";

Expand Down Expand Up @@ -93,7 +93,7 @@ export default Article;
You can delete the current step using the `stepPop()` function in `useStepFlow()`.

```tsx showLineNumbers filename="Article.tsx" copy /stepPop/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useStepFlow } from "./stackflow";

Expand Down
6 changes: 3 additions & 3 deletions docs/pages/docs/get-started/navigating-step.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { Callout, Link } from "nextra-theme-docs";
`stackflow.ts`에서 생성할 수 있는 `useStepFlow()` 훅을 사용해요. 해당 훅 내에 `stepPush()` 함수를 통해 다음과 같이 새 스텝을 쌓을 수 있어요.

```tsx showLineNumbers filename="Article.tsx" copy /stepPush/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

💡 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/*' || true

Length 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" || true

Length 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.

Copy link
Collaborator

@ENvironmentSet ENvironmentSet Aug 15, 2025

Choose a reason for hiding this comment

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

@umsungjun Would you apply changes to these files too?

PS. I guess it's okay to ignore other comments from coderabbit

Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

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

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!

Copy link
Contributor Author

@umsungjun umsungjun Aug 15, 2025

Choose a reason for hiding this comment

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

@ENvironmentSet
It seems that the changes are already applied in the commit, so this might be a Coderabbit error.

Copy link
Collaborator

@ENvironmentSet ENvironmentSet Aug 15, 2025

Choose a reason for hiding this comment

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

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?

Copy link
Contributor Author

@umsungjun umsungjun Aug 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

@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!

import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useStepFlow } from "./stackflow";

Expand Down Expand Up @@ -59,7 +59,7 @@ export default Article;
`useStepFlow()`의 `stepReplace()` 함수를 활용하면 현재 스텝을 교체할 수 있어요.

```tsx showLineNumbers filename="Article.tsx" copy /stepReplace/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useStepFlow } from "./stackflow";

Expand Down Expand Up @@ -95,7 +95,7 @@ export default Article;
`useStepFlow()`의 `stepPop()` 함수를 활용하면 현재 스텝을 삭제할 수 있어요.

```tsx showLineNumbers filename="Article.tsx" copy /stepPop/
import { ActivityComponentType } from "@stackflow/react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useStepFlow } from "./stackflow";

Expand Down