Merge pull request #20801 from storybookjs/docs/default-exports-in-main

Docs: Update main.js format in docs/tutorials/recipes

code/addons/a11y/README.md

@@ -17,7 +17,7 @@ $ yarn add @storybook/addon-a11y --dev
 Add this line to your `main.js` file (create this file inside your Storybook config directory if needed).
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-a11y'],
 };
 ```

code/addons/actions/README.md

@@ -17,7 +17,7 @@ npm i -D @storybook/addon-actions
 Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-actions'],
 };
 ```

code/addons/backgrounds/README.md

@@ -19,7 +19,7 @@ npm i -D @storybook/addon-backgrounds
 Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-backgrounds'],
 };
 ```

code/addons/controls/README.md

@@ -17,7 +17,7 @@ npm i -D @storybook/addon-controls
 Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-controls'],
 };
 ```

code/addons/docs/README.md

@@ -99,9 +99,9 @@ yarn add -D react
 Then add the following to your `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   stories: [
-    '../src/**/*.mdx)', // 👈 Add this, to match your project's structure
+    '../src/**/*.mdx', // 👈 Add this, to match your project's structure
     '../src/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
@@ -138,7 +138,7 @@ Add the following to your Jest configuration:
 The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
 
 ```js
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-docs',

code/addons/docs/angular/README.md

@@ -31,7 +31,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` exports:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -135,9 +135,9 @@ yarn add -D react
 
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
-```ts
-module.exports = {
-  stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'],
+```js
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 };
 ```
 

code/addons/docs/common/README.md

@@ -21,7 +21,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -43,7 +43,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```

code/addons/docs/ember/README.md

@@ -24,7 +24,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -87,7 +87,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```

code/addons/docs/react/README.md

@@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` list of `addons`:
 
 ```js
-module.exports = {
+export default {
   // other settings
   addons: ['@storybook/addon-docs'];
 }
@@ -70,7 +70,7 @@ storiesOf('InfoButton', module)
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```
@@ -115,7 +115,7 @@ If you're using TypeScript, there are two different options for generating props
 You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
 
 ```js
-module.exports = {
+export default {
   typescript: {
     // also valid 'react-docgen-typescript' | false
     reactDocgen: 'react-docgen',

code/addons/docs/vue/README.md

@@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -39,9 +39,9 @@ module.exports = {
 The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-docs',
@@ -102,7 +102,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```

code/addons/docs/vue3/README.md

@@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
 Then add the following to your `.storybook/main.js` addons:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-docs'],
 };
 ```
@@ -39,9 +39,9 @@ module.exports = {
 The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-docs',
@@ -102,7 +102,7 @@ yarn add -D react
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js
-module.exports = {
+export default {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
 };
 ```

code/addons/essentials/README.md

@@ -28,7 +28,7 @@ npm install --save-dev @storybook/addon-essentials
 And then add the following line to your `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-essentials'],
 };
 ```
@@ -44,7 +44,7 @@ If you want to reconfigure an addon, simply install that addon per that addon's
 You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   addons: [{
     name: '@storybook/addon-essentials',
     options: {

code/addons/highlight/README.md

@@ -17,7 +17,7 @@ npm i -D @storybook/addon-highlight
 Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-highlight'],
 };
 ```

code/addons/interactions/README.md

@@ -15,7 +15,7 @@ yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-lib
 within `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-interactions'],
 };
 ```
@@ -28,7 +28,7 @@ Step debugging features are experimental and disabled by default. To enable them
 
 ```js
 // main.js
-module.exports = {
+export default {
   features: {
     interactionsDebugger: true,
   },

code/addons/jest/README.md

@@ -23,7 +23,7 @@ Or if you're using yarn as a package manager:
 Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-jest'],
 };
 ```

code/addons/links/README.md

@@ -15,7 +15,7 @@ yarn add -D @storybook/addon-links
 within `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-links'],
 };
 ```

code/addons/measure/README.md

@@ -21,7 +21,7 @@ npm i -D @storybook/addon-measure
 Add `"@storybook/addon-measure"` to the addons array in your `.storybook/main.js`:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-measure'],
 };
 ```

code/addons/outline/README.md

@@ -15,7 +15,7 @@ npm i -D @storybook/addon-outline
 Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-outline'],
 };
 ```

code/addons/storyshots-core/README.md

@@ -723,7 +723,7 @@ If you use [Component Story Format](https://storybook.js.org/docs/react/api/csf)
 
 ```js
 // jest.config.js
-module.exports = {
+export default {
   transform: {
     '^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
     '^.+\\.jsx?$': 'babel-jest',

code/addons/storysource/README.md

@@ -26,7 +26,7 @@ You can add configuration for this addon by using a preset or by using the addon
 Add the following to your `.storybook/main.js` exports:
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-storysource'],
 };
 ```
@@ -34,7 +34,7 @@ module.exports = {
 You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:
 
 ```js
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-storysource',
@@ -67,7 +67,7 @@ Storybook 6.0 introduced an unintentional change to `source-loader`, in which on
 If you're using `addon-docs`:
 
 ```js
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-docs',
@@ -84,7 +84,7 @@ module.exports = {
 If not:
 
 ```js
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-storysource',

code/addons/toolbars/README.md

@@ -21,7 +21,7 @@ npm i -D @storybook/addon-toolbars
 Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-toolbars'],
 };
 ```

code/addons/viewport/README.md

@@ -17,7 +17,7 @@ npm i -D @storybook/addon-viewport
 Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
-module.exports = {
+export default {
   addons: ['@storybook/addon-viewport'],
 };
 ```

code/frameworks/ember/README.md

@@ -39,11 +39,14 @@ This example also assume that you already have the package in your `package.json
 In your `.storybook/main.js` you can add the following lines:
 
 ```javascript
-const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin');
+import namedBlockPolyfill from 'ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin';
 
-module.exports = {
-  emberOptions: {
-    polyfills: [namedBlockPolyfill],
+export default {
+  framework: {
+    name: '@storybook/ember',
+    options: {
+      polyfills: [namedBlockPolyfill],
+    }
   },
   [...]
 };

code/frameworks/nextjs/README.md

@@ -116,7 +116,7 @@ Update your `main.js` to change the framework property:
 
 ```js
 // .storybook/main.js
-module.exports = {
+export default {
   // ...
   framework: {
     // name: '@storybook/react-webpack5', // Remove this
@@ -130,7 +130,7 @@ If you were using Storybook plugins to integrate with Next.js, those are no long
 
 ```js
 // .storybook/main.js
-module.exports = {
+export default {
   // ...
   addons: [
     // ...
@@ -151,9 +151,9 @@ For example:
 
 ```js
 // .storybook/main.js
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+export default {
   // ...
   framework: {
     name: '@storybook/nextjs',
@@ -244,7 +244,7 @@ You have to tell Storybook where the `fonts` directory is located. The `from` va
 
 ```js
 // .storybook/main.js
-module.exports = {
+export default {
   ...
   "staticDirs": [
     {
@@ -618,9 +618,9 @@ This will automatically include any of your [custom sass configurations](https:/
 
 ```js
 // next.config.js
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+export default {
   // Any options here are included in Sass compilation for your stories
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
@@ -784,7 +784,7 @@ Below is an example of how to add svgr support to Storybook with this framework.
 
 ```js
 // .storybook/main.js
-module.exports = {
+export default {
   // ...
   webpackFinal: async (config) => {
     // This modifies the existing image rule to exclude .svg files

code/frameworks/preact-vite/README.md

@@ -37,7 +37,7 @@ Update your `main.js` to change the framework property:
 
 ```js
 // .storybook/main.js
-module.exports = {
+export default {
   // ...
   framework: {
     name: '@storybook/preact-vite', // <- Change this

code/frameworks/server-webpack5/README.md

@@ -55,7 +55,7 @@ To write a story, use whatever API is natural for your server-side rendering fra
 In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g.
 
 ```js
-module.exports = {
+export default {
   stories: ['../stories/**/*.stories.json'],
 };
 ```

code/frameworks/sveltekit/README.md

@@ -23,20 +23,20 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
 All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
 However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:
 
-| **Module**                                                                         | **Status**                                                                                        | **Note**                                                                                                                |
-| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported                                                                                      | `version` is always empty in Storybook.                                                                                 |
-| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Planned for 7.1                                                                                | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `applyAction` depends on the client singleton having been initialized in SvelteKit's `singletons.js`. |
+| **Module**                                                                         | **Status**                                                                                        | **Note**                                                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported                                                                                      | `version` is always empty in Storybook.                                                                                                                                                                                            |
+| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Planned for 7.1                                                                                | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `applyAction` depends on the client singleton having been initialized in SvelteKit's `singletons.js`.     |
 | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `$app/navigation` depends on the client singleton having been initialized in SvelteKit's `singletons.js`. |
-| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ⏳ Planned for 7.1.                                                                               | These are global variables set in SvelteKit's `runtime/shared.js`                                                                                                                         |
-| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported                                                                                      | Mocks planned for 7.1, so you can set different store values per story.                                                 |
-| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                    |
-| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported                                                                            | Only supported in development mode.                                                                                     |
-| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                    |
-| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | ✅ Supported                                                                                      |                                                                                                                         |
-| [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | ✅ Supported                                                                                      |                                                                                                                         |
-| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker)           | ⛔ Not supported                                                                                  | They are only meant to be used in service workers                                                                       |
-| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit)              | ✅ Supported                                                                                      |                                                                                                                         |
+| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ⏳ Planned for 7.1.                                                                               | These are global variables set in SvelteKit's `runtime/shared.js`                                                                                                                                                                  |
+| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported                                                                                      | Mocks planned for 7.1, so you can set different store values per story.                                                                                                                                                            |
+| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                                                                                                                               |
+| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported                                                                            | Only supported in development mode.                                                                                                                                                                                                |
+| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                                                                                                                               |
+| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | ✅ Supported                                                                                      |                                                                                                                                                                                                                                    |
+| [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | ✅ Supported                                                                                      |                                                                                                                                                                                                                                    |
+| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker)           | ⛔ Not supported                                                                                  | They are only meant to be used in service workers                                                                                                                                                                                  |
+| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit)              | ✅ Supported                                                                                      |                                                                                                                                                                                                                                    |
 
 This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
 
@@ -69,7 +69,7 @@ npx storybook@next upgrade --prerelease
 
 When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below.
 
-Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.cjs` the automigration will have removed it, as it is no longer supported.
+Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported.
 
 #### Manual migration
 
@@ -79,17 +79,17 @@ Install the framework:
 yarn add -D @storybook/sveltekit@next
 ```
 
-Update your `main.cjs` to change the framework property:
+Update your `main.js` to change the framework property:
 
 ```js
-// .storybook/main.cjs
-module.exports = {
+// .storybook/main.js
+export default {
   ...
   framework: '@storybook/sveltekit',
 };
 ```
 
-Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.cjs` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below.
+Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below.
 
 Remove any redundant dependencies, if you have them:
 
@@ -110,7 +110,7 @@ yarn remove @storybook/builder-vite
 > ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared
 > ```
 
-You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.cjs`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
+You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
 
 ### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview
 

code/frameworks/web-components-webpack5/README.md

@@ -37,7 +37,7 @@ For example if you have a library called `my-library` which is in ES2017 then yo
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   webpackFinal: async (config) => {
     // find web-components rule for extra transpilation
     const webComponentsRule = config.module.rules.find(

code/lib/builder-vite/README.md

@@ -134,16 +134,6 @@ const config: StorybookConfig = {
 export default config;
 ```
 
-Or alternatively, you can use named exports:
-
-```typescript
-import type { ViteFinal } from '@storybook/builder-vite';
-
-export const viteFinal: ViteFinal = async (config, options) => {
-  // modify and return config
-};
-```
-
 See [Customize Vite config](#customize-vite-config) for details about using `viteFinal`.
 
 ### React Docgen
@@ -151,7 +141,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit
 Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue, and React, and there are two docgen options when using react, `react-docgen` and `react-docgen-typescript`. You can learn more about the pros/cons of each in [this gist](https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0). By default, if we find a `typescript` dependency in your `package.json` file, we will assume you're using typescript and will choose `react-docgen-typescript`. You can change this by setting the `typescript.reactDocgen` option in your `.storybook/main.js` file:
 
 ```javascript
-module.exports = {
+export default {
   typescript: {
     reactDocgen: 'react-docgen`
   }

code/lib/builder-webpack5/README.md

@@ -3,9 +3,9 @@
 Builder implemented with `webpack5` and `webpack5`-compatible loaders/plugins/config, used by `@storybook/core-server` to build the preview iframe.
 
 ```js
-module.exports = {
+export default {
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-webpack5',
   },
 };
 ```

docs/faq.md

@@ -39,7 +39,7 @@ Here are some answers to frequently asked questions. If you have a question, you
 In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`:
 
 ```javascript
-module.exports = {
+export default {
   stories: [
     /* ... */
   ],
@@ -60,7 +60,7 @@ module.exports = {
 In case you postinstall ngcc, you can disable it:
 
 ```javascript
-module.exports = {
+export default {
   stories: [
     /* ... */
   ],
@@ -102,7 +102,7 @@ Next automatically defines `React` for all of your files via a babel plugin. In
 You can generally reuse webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example:
 
 ```js
-module.exports = {
+export default {
   webpackFinal: async (baseConfig) => {
     const nextConfig = require('/path/to/next.config.js');
 
@@ -126,7 +126,7 @@ FAST_REFRESH=true
 - Or you can set the following properties in your `.storybook/main.js` files:
 
 ```js
-module.exports = {
+export default {
   framework: {
     name: '@storybook/react-webpack5',
     options: {
@@ -147,7 +147,7 @@ If your installed React Version equals or is higher than 18.0.0, the new React R
 You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file:
 
 ```js
-module.exports = {
+export default {
   framework: {
     name: '@storybook/react-webpack5',
     options: {
@@ -178,7 +178,7 @@ If you're adding Storybook's dependencies manually, make sure you include the [`
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: ['@storybook/addon-controls'],
 };
 ```

docs/snippets/common/component-story-configuration-custom.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // ./storybook/main.js
 
-module.exports = {
+export default {
   stories: [{ directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }],
 };
 ```

docs/snippets/common/my-addon-babel-configuration.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // /my-addon/.babelrc.js
 
-module.exports = {
+export default {
   presets: ['@babel/preset-env', '@babel/preset-react'],
 };
 ```

docs/snippets/common/my-addon-preset-implementation.js.mdx

@@ -5,5 +5,5 @@ function managerEntries(entry = []) {
   return [...entry, require.resolve('./register')]; //👈 Addon implementation
 }
 
-module.exports = { managerEntries };
+export default { managerEntries };
 ```

docs/snippets/common/my-addon-storybook-registration.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // /my-addon/.storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-a11y-register.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-addon-interaction-registration.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories:[],
   addons:[
     // Other Storybook addons

docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx

@@ -9,7 +9,7 @@ const config = (entry = [], options) => {
   return [...entry, require.resolve('my-other-addon/addDecorator')];
 };
 
-module.exports = {
+export default {
   managerEntries,
   config,
 };

docs/snippets/common/storybook-auto-docs-full-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.stories.@(js|ts)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [
     //👇 Your documentation written in MDX along with your stories goes here
     '../src/**/*.mdx',

docs/snippets/common/storybook-coverage-addon-config-options.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-coverage-addon-registration.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-coverage-report-vue.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .nyc.config.js
 
-module.exports = {
+export default {
   // Other configuration options
   extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue'],
 };

docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-framework-config-options.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.stories.@(js|ts)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-interactions-addon-registration.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-main-add-sass-config.js.mdx

@@ -1,10 +1,10 @@
 ```js
 // .storybook/main.js
 
-const path = require('path');
+import * as path from 'path';
 
 // Export a function. Accept the base config as the only param.
-module.exports = {
+export default {
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.

docs/snippets/common/storybook-main-add-ts-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [],
   typescript: {

docs/snippets/common/storybook-main-advanced-config-example.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   managerWebpack: async (config, options) => {
     // update config here
     return config;

docs/snippets/common/storybook-main-auto-title-custom.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [{ directory: '../src', titlePrefix: 'Custom' }],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-main-babel-mode-v7.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [],
   features: {

docs/snippets/common/storybook-main-config-remark-options.js.mdx

@@ -1,9 +1,9 @@
 ```js
 // .storybook/main.js
 
-const remarkGfm = require('remark-gfm');
+import remarkGfm from 'remark-gfm';
 
-module.exports = {
+export default {
   stories: ['../src/**/*.stories.@(js|ts)'],
   addons: [
     // Other addons go here

docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // ./storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-main-csf-indexer.js.mdx

@@ -1,10 +1,10 @@
 ```js
 // .storybook/main.js
 
-const { readFileSync }  = require('fs');
-const { loadCsf } = require('@storybook/csf-tools');
+import { readFileSync } from 'fs';
+import { loadCsf } from '@storybook/csf-tools';
 
-module.exports = {
+export default {
   storyIndexers = (indexers) => {
     const indexer = async (fileName, opts) => {
       const code = readFileSync(fileName, { encoding: 'utf-8' });

docs/snippets/common/storybook-main-custom-babel-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [],
   babel: async (options) => ({

docs/snippets/common/storybook-main-default-essentials-register.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: ['@storybook/addon-essentials'],
 };
 ```

docs/snippets/common/storybook-main-default-setup.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
   addons: [

docs/snippets/common/storybook-main-disable-addon.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/addon-essentials',

docs/snippets/common/storybook-main-disable-refs.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   // Your Storybook configuration
   refs: {
     'package-name': { disable: true },

docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js|ts
 
-module.exports = {
+export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-main-enable-mdx2.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js|ts
 
-module.exports = {
+export default {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   features: {

docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js|ts
 
-module.exports = {
+export default {
   stories: [
     //👇 Changes the load order of our stories. First loads the Changelog page
     '../src/Changelog.mdx',

docs/snippets/common/storybook-main-env-field-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-main-extend-ts-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [],
   typescript: {

docs/snippets/common/storybook-main-figma-addon-register.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js|ts
 
-module.exports = {
+export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     // Other Storybook addons

docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-main-import-preset-config.js.mdx

@@ -1,9 +1,9 @@
 ```js
 // .storybook/main.js
 
-const path = require('path');
+import * as path from 'path';
 
-module.exports = {
+export default {
   addons: [path.resolve('./.storybook/my-preset')],
 };
 ```

docs/snippets/common/storybook-main-js-md-files.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../my-project/src/components/*.@(js|md)'],
 };
 ```

docs/snippets/common/storybook-main-md-html-indexer.js.mdx

@@ -25,7 +25,7 @@ const indexer = async (fileName, opts) => {
   return loadCsf(code, { ...opts, fileName }).parse();
 };
 
-module.exports = {
+export default {
   storyIndexers: (indexers) => {
     return [
       {

docs/snippets/common/storybook-main-preset-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: ['@storybook/preset-scss'],
 };
 ```

docs/snippets/common/storybook-main-preview-head.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   previewHead: (head) => (`
     ${head}
     <style>

docs/snippets/common/storybook-main-ref-local.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   // Your Storybook configuration
   refs: {
     react: {

docs/snippets/common/storybook-main-ref-per-environment.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   // Your existing Storybook configuration
 
   // 👇 Retrieve the current environment from the configType argument

docs/snippets/common/storybook-main-ref-remote.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   // Your Storybook configuration
   refs: {
     'design-system': {

docs/snippets/common/storybook-main-register-addon.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: ['path/to/manager.js'],
 };
 ```

docs/snippets/common/storybook-main-register-essentials-addon.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-actions'],
 };

docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: [
     '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
   ],

docs/snippets/common/storybook-main-register-storysource-example.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: ['@storybook/addon-storysource'],
 };
 ```

docs/snippets/common/storybook-main-simplified-config.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   webpackFinal: async (config) => {
     config.plugins.push(...);
     return config;

docs/snippets/common/storybook-main-ts-module-resolution.js.mdx

@@ -1,9 +1,9 @@
 ```js
 // .storybook/main.js
 
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
-module.exports = {
+export default {
   webpackFinal: async (config) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),

docs/snippets/common/storybook-main-use-manager-entries.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   managerEntries: ['some-storybook-addon/entry-point.js'],
 };
 ```

docs/snippets/common/storybook-main-using-existing-config.js.mdx

@@ -2,9 +2,9 @@
 // .storybook/main.js
 
 // your app's webpack.config.js
-const custom = require('../webpack.config.js');
+import custom from '../webpack.config.js';
 
-module.exports = {
+export default {
   webpackFinal: async (config) => {
     return { ...config, module: { ...config.module, rules: custom.module.rules } };
   },

docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   core: {
     builder: {
       name: 'webpack5',

docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   core: {
     builder: {
       name: 'webpack5',

docs/snippets/common/storybook-main-webpack5.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   core: {
     builder: '@storybook/builder-webpack5',
   },

docs/snippets/common/storybook-main-with-mock-decorator.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   // Your Storybook configuration
 
   webpackFinal: async (config) => {

docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: [],
   staticDirs: ['../public', '../static'],

docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
 };
 ```

docs/snippets/common/storybook-main-with-single-static-dir.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-on-demand-story-loading.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [],
   addons: ['@storybook/addon-essentials'],
   features: {

docs/snippets/common/storybook-preset-configuration.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   addons: [
     {
       name: '@storybook/preset-scss',

docs/snippets/common/storybook-preset-full-config-object.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/my-preset.js
 
-module.exports = {
+export default {
   managerWebpack: async (config, options) => {
     // Update config here
     return config;

docs/snippets/common/storybook-storyloading-custom-logic.js.mdx

@@ -5,7 +5,7 @@ function findStories() {
   // your custom logic returns a list of files
 }
 
-module.exports = {
+export default {
   stories: async (list) => [...list, ...findStories()],
   addons: ['@storybook/addon-essentials'],
 };

docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [
     {
       // 👇 The directory field sets the directory your stories

docs/snippets/common/storybook-storyloading-with-directory.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   // 👇 Storybook will load all existing stories within the MyStories folder
   stories: ['../packages/MyStories'],
   addons: ['@storybook/addon-essentials'],

docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

docs/snippets/common/storybook-vite-builder-aliasing.js.mdx

@@ -1,9 +1,9 @@
 ```js
-// .storybook/main.js|cjs|ts
+// .storybook/main.js|ts
 
-const { mergeConfig } = require('vite');
+import { mergeConfig } from 'vite';
 
-module.exports = {
+export default {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   core: {

docs/snippets/common/storybook-vite-builder-config-env.js.mdx

@@ -1,9 +1,9 @@
 ```js
 // .storybook/main.js|ts
 
-const { mergeConfig } = require('vite');
+import { mergeConfig } from 'vite';
 
-module.exports = {
+export default {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   core: {