Skip to content

Conversation

@valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Nov 27, 2025

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • Documentation

    • Added an FAQ subsection explaining extensionless import warnings in Storybook main config and recommending explicit ".js"/".ts" extensions with a sample tsconfig and guidance.
  • Bug Fixes / UX

    • Shortened deprecation/warning text for extensionless imports and now points to documentation.
  • Tests

    • Updated tests to match the simplified deprecation message assertions.

✏️ Tip: You can customize this high-level summary in your review settings.

@valentinpalkovic valentinpalkovic self-assigned this Nov 27, 2025
@valentinpalkovic valentinpalkovic added documentation ci:docs Run the CI jobs for documentation checks only. labels Nov 27, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 27, 2025

📝 Walkthrough

Walkthrough

Shortens the loader deprecation message to reference an external docs URL, removes a test assertion that expected the previous long inline guidance, and adds an FAQ entry documenting extensionless relative import warnings and fixes for .storybook/main.{js,ts}.

Changes

Cohort / File(s) Summary
Documentation FAQ addition
docs/faq.mdx
Adds an FAQ subsection explaining extensionless import warnings in .storybook/main.{js,ts}, recommends explicit file extensions, provides a TypeScript tsconfig.json snippet and suggests a dedicated .storybook tsconfig.
Loader runtime
code/core/src/bin/loader.ts
Replaces the long inline guidance for extensionless imports with a concise deprecation message that points to an external documentation URL; no control-flow or export changes.
Loader tests
code/core/src/bin/loader.test.ts
Removes the assertion that matched the previous long guidance text; test now only asserts the deprecation about extensionless imports.

Sequence Diagram(s)

sequenceDiagram
  participant Loader as Loader.resolveWithExtension
  participant Console as Console.warn
  participant Docs as Docs URL

  Loader->>Loader: detect extensionless relative import (e.g. "./utils")
  alt extensionless import detected
    Loader->>Console: emit deprecation with short message + docs link
    Note right of Console `#dff0d8`: Message references external docs\ninstead of embedding long guidance
    Console->>Docs: user follows link for details/fixes
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Check the exact deprecation text and linked docs URL in code/core/src/bin/loader.ts.
  • Confirm loader.test.ts still reliably asserts deprecation emission (mocking/spy correctness).
  • Quick proofread of docs/faq.mdx and the provided tsconfig.json snippet.

Possibly related PRs

✨ Finishing touches
  • 📝 Generate docstrings

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 654b679 and a7c6398.

📒 Files selected for processing (3)
  • code/core/src/bin/loader.test.ts (0 hunks)
  • code/core/src/bin/loader.ts (1 hunks)
  • docs/faq.mdx (1 hunks)
💤 Files with no reviewable changes (1)
  • code/core/src/bin/loader.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • code/core/src/bin/loader.ts
🧰 Additional context used
🧠 Learnings (6)
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-24T17:49:47.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: The Storybook repository is a TypeScript/React monorepo with main codebase in 'code/' directory and tooling in 'scripts/' directory

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-24T17:49:47.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to code/**/!(*.test).{ts,tsx,js,mjs} : Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-24T17:49:47.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to code/**/!(*.test).{ts,tsx,js,mjs} : Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error

Applied to files:

  • docs/faq.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: docs
  • GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
docs/faq.mdx (1)

104-136: Approve FAQ content structure; fix capitalization inconsistency.

The new FAQ section is well-organized and provides helpful, clear guidance on fixing extensionless import warnings. The examples are practical and the TypeScript-specific configuration is valuable. The Callout markup now appears correctly formed.

However, Line 109 uses "Javascript" instead of the standard "JavaScript" — this inconsistency should be corrected to align with common technical terminology and Storybook's documentation style.

Apply this diff to fix the capitalization:

-To fix the issue, just make sure to include the extension of the file (TypeScript or Javascript) you're importing:
+To fix the issue, just make sure to include the extension of the file (TypeScript or JavaScript) you're importing:

Please also run yarn prettier --write docs/faq.mdx to ensure MDX formatting is normalized.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
docs/faq.mdx (1)

104-128: Clear and actionable FAQ section on extensionless imports.

The new section provides a well-structured explanation of the TypeScript constraint and offers a concrete recommended setup. The tsconfig.json configuration is accurate, and the mention of the emitDeclarationOnly alternative is helpful.

Minor improvement suggestion: Consider adding a concrete example for the extends path (e.g., ../tsconfig.json or ../tsconfig.base.json) to help users in monorepo or workspace setups quickly understand what to reference. This would reduce friction for adoption.

Suggested enhancement (optional):

 ```json title=".storybook/tsconfig.json"
 {
-  "extends": "<path-to-your-main-tsconfig>",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "noEmit": true
   }
 }

+If your project uses a different tsconfig path (e.g., tsconfig.base.json in monorepo setups), adjust the extends path accordingly.


This small addition makes the guidance immediately usable without requiring users to interpret the placeholder.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used**: CodeRabbit UI

**Review profile**: CHILL

**Plan**: Pro

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5850ec7dd75ffa4ecb88b18fe5078f6557bc2765 and 829d445355e0dd672b85746bd94efe2c6b2c847c.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `docs/faq.mdx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧠 Learnings (9)</summary>

<details>
<summary>📓 Common learnings</summary>

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to **/*.{ts,tsx} : Enable TypeScript strict mode


</details>
<details>
<summary>📚 Learning: 2025-11-24T17:49:47.659Z</summary>

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to README.md : Update relevant README files for significant changes


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-11-05T09:38:47.712Z</summary>

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-11-05T09:37:25.920Z</summary>

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-10-01T15:24:01.060Z</summary>

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-11-24T17:49:47.659Z</summary>

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: The Storybook repository is a TypeScript/React monorepo with main codebase in 'code/' directory and tooling in 'scripts/' directory


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-11-24T17:49:47.659Z</summary>

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to code/**/!(*.test).{ts,tsx,js,mjs} : Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-11-24T17:49:47.659Z</summary>

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to code/**/!(*.test).{ts,tsx,js,mjs} : Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error


**Applied to files:**
- `docs/faq.mdx`

</details>
<details>
<summary>📚 Learning: 2025-11-24T17:49:47.659Z</summary>

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to **/*.{ts,tsx} : Enable TypeScript strict mode


**Applied to files:**
- `docs/faq.mdx`

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)</summary>

* GitHub Check: Core Unit Tests, windows-latest

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->

@nx-cloud
Copy link

nx-cloud bot commented Nov 27, 2025

View your CI Pipeline Execution ↗ for commit a7c6398

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 46s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-27 09:50:40 UTC

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 829d445 and 8133384.

📒 Files selected for processing (2)
  • code/core/src/bin/loader.test.ts (0 hunks)
  • code/core/src/bin/loader.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • code/core/src/bin/loader.test.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use camelCase for variable and function names

Files:

  • code/core/src/bin/loader.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes

Files:

  • code/core/src/bin/loader.ts
**/*.{ts,tsx,js,jsx,json,html,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes

Files:

  • code/core/src/bin/loader.ts
code/**/!(*.test).{ts,tsx,js,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/bin/loader.ts
🧠 Learnings (1)
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

  • code/core/src/bin/loader.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
code/core/src/bin/loader.ts (1)

43-43: FAQ URL is correct and the anchor matches the documentation section.

The FAQ section "Extensionless imports in .storybook/main.ts and required .ts extensions" exists at line 104 in docs/faq.mdx with complete documentation explaining the context and recommended setup. The anchor extensionless-imports-in-storybookmaints-and-required-ts-extensions correctly corresponds to the heading text (with backticks and dots removed per standard MDX anchor generation). The URL resolves to the correct documentation path.

Comment on lines +40 to +44
deprecate(dedent`
One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
For more information on how to resolve the issue:
https://storybook.js.org/docs/faq#extensionless-imports-in-storybookmaints-and-required-ts-extensions
`);
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Minor formatting issue: trailing space on line 42.

The deprecation message update looks good—shortening it to reference external documentation is a solid practice. However, line 42 has a trailing space after the colon.

Apply this diff to remove the trailing space:

   deprecate(dedent`
     One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
-    For more information on how to resolve the issue: 
+    For more information on how to resolve the issue:
     https://storybook.js.org/docs/faq#extensionless-imports-in-storybookmaints-and-required-ts-extensions
   `);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
deprecate(dedent`
One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
For more information on how to resolve the issue:
https://storybook.js.org/docs/faq#extensionless-imports-in-storybookmaints-and-required-ts-extensions
`);
deprecate(dedent`
One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
For more information on how to resolve the issue:
https://storybook.js.org/docs/faq#extensionless-imports-in-storybookmaints-and-required-ts-extensions
`);
🤖 Prompt for AI Agents
In code/core/src/bin/loader.ts around lines 40 to 44, the deprecation message
contains an extra trailing space after the colon on line 42; remove that
trailing space so the dedent string URL line ends immediately after the colon
(no extra whitespace), and ensure the multiline string has no other unintended
trailing spaces.

@valentinpalkovic valentinpalkovic force-pushed the valentin/provide-faq-section-for-extensionless-imports branch from 8133384 to 654b679 Compare November 27, 2025 09:16
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

♻️ Duplicate comments (1)
code/core/src/bin/loader.ts (1)

40-44: Clean up deprecation message whitespace and align docs hash fragment

Two small issues in the updated deprecation message:

  1. Line 42 still has a trailing space after the colon – this was already flagged in a prior review and will likely be caught by formatting/linting.
  2. The hash fragment in the docs URL (#extensionless-imports-in-storybookmaints-and-required-ts-extensions) doesn’t match the new FAQ heading “Extensionless imports in Storybook main config”, so the link may not jump to the right section.

Suggested fix:

-  deprecate(dedent`
-    One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
-    For more information on how to resolve the issue: 
-    https://storybook.js.org/docs/faq#extensionless-imports-in-storybookmaints-and-required-ts-extensions
-  `);
+  deprecate(dedent`
+    One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
+    For more information on how to resolve the issue:
+    https://storybook.js.org/docs/faq#extensionless-imports-in-storybook-main-config
+  `);

After applying, please run:

  • yarn prettier --write code/core/src/bin/loader.ts
  • yarn lint:js:cmd code/core/src/bin/loader.ts
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8133384 and 654b679.

📒 Files selected for processing (3)
  • code/core/src/bin/loader.test.ts (0 hunks)
  • code/core/src/bin/loader.ts (1 hunks)
  • docs/faq.mdx (1 hunks)
💤 Files with no reviewable changes (1)
  • code/core/src/bin/loader.test.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use camelCase for variable and function names

Files:

  • code/core/src/bin/loader.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes

Files:

  • code/core/src/bin/loader.ts
**/*.{ts,tsx,js,jsx,json,html,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes

Files:

  • code/core/src/bin/loader.ts
code/**/!(*.test).{ts,tsx,js,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/bin/loader.ts
🧠 Learnings (6)
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/core/src/bin/loader.ts
  • docs/faq.mdx
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

  • code/core/src/bin/loader.ts
  • docs/faq.mdx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-24T17:49:47.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: The Storybook repository is a TypeScript/React monorepo with main codebase in 'code/' directory and tooling in 'scripts/' directory

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-24T17:49:47.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to code/**/!(*.test).{ts,tsx,js,mjs} : Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error

Applied to files:

  • docs/faq.mdx
📚 Learning: 2025-11-24T17:49:47.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T17:49:47.659Z
Learning: Applies to code/**/!(*.test).{ts,tsx,js,mjs} : Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error

Applied to files:

  • docs/faq.mdx
🧬 Code graph analysis (1)
code/core/src/bin/loader.ts (2)
code/core/src/node-logger/index.ts (1)
  • deprecate (93-93)
scripts/utils/tools.ts (1)
  • dedent (119-119)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Core Unit Tests, windows-latest

Comment on lines 104 to 135
## Extensionless imports in Storybook main config

When upgrading or running Storybook, you may see warnings about extensionless relative imports in `.storybook/main.<js|ts>` (for example: `import sharedMain from '../main'`).
Storybook requires explicit extensions in config imports to avoid this deprecation warning.

To fix the issue, just make sure to include the extension of the file (TypeScript or Javascript) you're importing:

```ts title=".storybook/main.<js|ts>"
// Change from this 👇
import sharedMain from '../main';

// To this 👇
import sharedMain from '../main.js'; // or .ts
```

### For TypeScript users (`.storybook/main.ts`)
You will also need to configure TypeScript so these imports type-check without emitting JavaScript:

```json title=".storybook/tsconfig.json"
{
"extends": "<path-to-your-main-tsconfig>",
"compilerOptions": {
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"noEmit": true
}
}
```

<Callout variant="info">
It is advisable to add a `.storybook/tsconfig.json` file so that you apply changes only to Storybook config files, and not your entire project.</Callout>
</Callout>
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Fix invalid Callout markup (double </Callout>) and consider minor copy polish

The new FAQ section is very helpful, but the Callout at the end is currently invalid MDX:

  • Line 134 closes </Callout> inline inside the paragraph.
  • Line 135 then closes </Callout> again on its own line.

This will break MDX/JSX parsing for the docs page.

Suggested fix (and small style tweaks):

-### For TypeScript users (`.storybook/main.ts`)
-You will also need to configure TypeScript so these imports type-check without emitting JavaScript:
+### For TypeScript users (`.storybook/main.ts`)
+You will also need to configure TypeScript so these imports type-check without emitting JavaScript:

 ```json title=".storybook/tsconfig.json"
 {
   "extends": "<path-to-your-main-tsconfig>",
   "compilerOptions": {
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "noEmit": true
   }
 }

-

  • It is advisable to add a .storybook/tsconfig.json file so that you apply changes only to Storybook config files, and not your entire project.
    -
    +
  • It is advisable to add a .storybook/tsconfig.json file so that you apply changes only to Storybook config files, and not your entire project.
    +

Also consider:

- Line 109: s/“Javascript”/“JavaScript” for consistency with the rest of the docs.

After changes, please run `yarn prettier --write docs/faq.mdx` to normalize MDX formatting.

<details>
<summary>🤖 Prompt for AI Agents</summary>

In docs/faq.mdx around lines 104 to 135, the Callout markup is closed twice (a
stray inline inside the paragraph and another on the following line)
which breaks MDX parsing; remove the erroneous inline closing tag so there is a
single proper closing after the paragraph, fix the capitalization
“Javascript” → “JavaScript” on line ~109, and then run yarn prettier --write
docs/faq.mdx to normalize formatting.


</details>

<!-- fingerprinting:phantom:poseidon:olive -->

<!-- This is an auto-generated comment by CodeRabbit -->

@valentinpalkovic valentinpalkovic force-pushed the valentin/provide-faq-section-for-extensionless-imports branch from 654b679 to a7c6398 Compare November 27, 2025 09:29
@yannbf yannbf merged commit c39b35d into next Nov 28, 2025
14 checks passed
@yannbf yannbf deleted the valentin/provide-faq-section-for-extensionless-imports branch November 28, 2025 11:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:docs Run the CI jobs for documentation checks only. documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants