Skip to content

frontend: storybook: Fix startup failure caused by node story helpers#6126

Merged
illume merged 1 commit into
kubernetes-sigs:mainfrom
mahesh-09-12:fix/storybook-startup-crash
Jun 22, 2026
Merged

frontend: storybook: Fix startup failure caused by node story helpers#6126
illume merged 1 commit into
kubernetes-sigs:mainfrom
mahesh-09-12:fix/storybook-startup-crash

Conversation

@mahesh-09-12

Copy link
Copy Markdown
Contributor

Summary

This PR fixes a Storybook startup failure caused by an unnecessary runtime dependency on the Node implementation.

Storybook failed to start and all stories remained stuck loading, with the browser console reporting:

Cannot access 'KubeObject' before initialization

Investigation showed that Storybook's baseMocks imported node/storyHelper, which imported NODE_POOL_LABEL_KEYS and type definitions from node.ts. Although storyHelper only needed a constant and type information, importing from node.ts caused the entire Node/KubeObject dependency graph to be evaluated during Storybook startup, leading to the initialization error.

This PR extracts NODE_POOL_LABEL_KEYS into a dedicated constants module and updates storyHelper to use type-only imports, avoiding the unnecessary runtime dependency while preserving existing public exports.

Related Issue

Fixes #6125

Changes

  • Added src/lib/k8s/nodeConstants.ts and moved NODE_POOL_LABEL_KEYS into it.

  • Updated src/components/node/storyHelper.ts to:

    • Use type-only imports for KubeNode and KubeMetrics.
    • Import NODE_POOL_LABEL_KEYS directly from nodeConstants.ts.
  • Re-exported NODE_POOL_LABEL_KEYS from src/lib/k8s/node.ts to preserve plugin and consumer compatibility.

  • Added documentation around the re-export explaining its purpose.

Steps to Test

  1. Start Storybook before applying the fix.

  2. Observe that Storybook fails to load and the browser console reports:

    Cannot access 'KubeObject' before initialization
    
  3. Apply the changes from this PR.

  4. Start Storybook again.

  5. Verify that Storybook loads successfully and stories render normally.

Additionally verify:

npm run tsc
npm run lint
npm test

All pass successfully.

Screenshots

Before

Storybook failed to load and remained stuck rendering stories. The browser console reported:

Cannot access 'KubeObject' before initialization

storybook-loading-spinner-before storybook-console-error-before

After

Storybook starts successfully and stories render normally.

storybook-rendering-success-after storybook-console-clean-after

Notes for the Reviewer

  • The change is intentionally minimal and does not modify Node functionality.
  • NODE_POOL_LABEL_KEYS continues to be exported from node.ts to maintain plugin compatibility and avoid breaking existing consumers.
  • The primary goal is to avoid loading the full Node/KubeObject runtime dependency graph when only constants and type information are required.

Storybook startup failed with "Cannot access 'KubeObject' before
initialization" because baseMocks imported node/storyHelper, which
loaded node.ts at runtime only to access NODE_POOL_LABEL_KEYS and
type definitions.

Extract NODE_POOL_LABEL_KEYS into a dedicated nodeConstants module
and update storyHelper to use type-only imports, avoiding an
unnecessary runtime dependency on the Node implementation.

Re-export NODE_POOL_LABEL_KEYS from node.ts to preserve plugin and
consumer compatibility.

Signed-off-by: mahesh-09-12 <m8143177@gmail.com>
@kubernetes-prow kubernetes-prow Bot requested review from kahirokunn and sniok June 21, 2026 10:10
@kubernetes-prow kubernetes-prow Bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Jun 21, 2026

@illume illume left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎉 thanks!

@kubernetes-prow

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume, mahesh-09-12

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kubernetes-prow kubernetes-prow Bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jun 22, 2026
@illume illume merged commit d752b6a into kubernetes-sigs:main Jun 22, 2026
12 of 13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/M Denotes a PR that changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

frontend: Storybook startup fails with "Cannot access 'KubeObject' before initialization"

2 participants