Docs: Add FAQ section for extensionless imports

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', () => {

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);

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.<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>
+
 ## 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.