diff --git a/code/core/src/bin/loader.test.ts b/code/core/src/bin/loader.test.ts index e282569aae0a..7ca11a7731e6 100644 --- a/code/core/src/bin/loader.test.ts +++ b/code/core/src/bin/loader.test.ts @@ -34,11 +34,6 @@ describe('loader', () => { expect(deprecate).toHaveBeenCalledWith( expect.stringContaining('One or more extensionless imports detected: "./utils"') ); - expect(deprecate).toHaveBeenCalledWith( - expect.stringContaining( - 'For maximum compatibility, you should add an explicit file extension' - ) - ); }); it('should resolve extensionless import to .js extension when file exists', () => { diff --git a/code/core/src/bin/loader.ts b/code/core/src/bin/loader.ts index 37ae944fb492..7c98ffb4df72 100644 --- a/code/core/src/bin/loader.ts +++ b/code/core/src/bin/loader.ts @@ -37,8 +37,11 @@ export function resolveWithExtension(importPath: string, currentFilePath: string return importPath; } - deprecate(dedent`One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}". - For maximum compatibility, you should add an explicit file extension to this import. Storybook will attempt to resolve it automatically, but this may change in the future. If adding the extension results in an error from TypeScript, we recommend setting moduleResolution to "bundler" in tsconfig.json or alternatively look into the allowImportingTsExtensions option.`); + 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 + `); // Resolve the import path relative to the current file const currentDir = path.dirname(currentFilePath); diff --git a/docs/faq.mdx b/docs/faq.mdx index 929c521d170f..ffd0f9f478cd 100644 --- a/docs/faq.mdx +++ b/docs/faq.mdx @@ -101,6 +101,39 @@ To fix this, you can wrap the package name inside your Storybook configuration f {/* prettier-ignore-end */} +## Extensionless imports in Storybook main config + +When upgrading or running Storybook, you may see warnings about extensionless relative imports in `.storybook/main.` (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." +// 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": "", + "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. + + ## How do I setup the new React Context Root API with Storybook? If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used.