@@ -54,7 +54,3 @@ Header.propTypes = {
onLogout: PropTypes.func.isRequired,
onCreateAccount: PropTypes.func.isRequired,
};
-
-Header.defaultProps = {
- user: null,
-};
diff --git a/code/yarn.lock b/code/yarn.lock
index 23d2c3fc2f3f..13e798756fd5 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -7125,7 +7125,7 @@ __metadata:
cross-env: "npm:^7.0.3"
danger: "npm:^12.3.3"
es-toolkit: "npm:^1.22.0"
- esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || 0.24.0"
+ esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0"
esbuild-loader: "npm:^4.2.0"
esbuild-plugin-alias: "npm:^0.2.1"
eslint: "npm:8.57.1"
@@ -14518,7 +14518,7 @@ __metadata:
languageName: node
linkType: hard
-"esbuild@npm:0.24.0":
+"esbuild@npm:^0.24.0":
version: 0.24.0
resolution: "esbuild@npm:0.24.0"
dependencies:
diff --git a/docs/_snippets/main-config-features-development-mode-for-build.md b/docs/_snippets/main-config-features-development-mode-for-build.md
new file mode 100644
index 000000000000..2650c75c39ab
--- /dev/null
+++ b/docs/_snippets/main-config-features-development-mode-for-build.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="common" language="js"
+export default {
+ // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+ framework: '@storybook/your-framework',
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ features: {
+ developmentModeForBuild: true,
+ },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+ framework: '@storybook/your-framework',
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ features: {
+ developmentModeForBuild: true,
+ },
+};
+
+export default config;
+```
diff --git a/docs/api/main-config/main-config-features.mdx b/docs/api/main-config/main-config-features.mdx
index 47dd9c107d49..30ad5fda9081 100644
--- a/docs/api/main-config/main-config-features.mdx
+++ b/docs/api/main-config/main-config-features.mdx
@@ -15,6 +15,7 @@ Type:
backgroundsStoryGlobals?: boolean;
legacyDecoratorFileOrder?: boolean;
viewportStoryGlobals?: boolean;
+ developmentModeForBuild?: boolean;
}
```
@@ -69,3 +70,15 @@ Configures the [Viewports addon](../../essentials/viewport.mdx) to opt-in to the
{/* prettier-ignore-end */}
+
+## `developmentModeForBuild`
+
+Type: `boolean`
+
+Set `NODE_ENV` to `'development'` in built Storybooks for better testing and debugging capabilities.
+
+{/* prettier-ignore-start */}
+
+
+
+{/* prettier-ignore-end */}
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 33865fddf4f9..b620efbf34e0 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.5.0-beta.4","info":{"plain":"- Addon Themes: Deprecate useThemeParameters - [#30111](https://github.com/storybookjs/storybook/pull/30111), thanks @yannbf!\n- Build: Downgrade to esbuild 0.24.0 - [#30116](https://github.com/storybookjs/storybook/pull/30116), thanks @yannbf!\n- CLI: Re-Add Nuxt support - [#28607](https://github.com/storybookjs/storybook/pull/28607), thanks @valentinpalkovic!\n- Core: Prevent infinite rerendering caused by comparison by reference - [#30081](https://github.com/storybookjs/storybook/pull/30081), thanks @ghengeveld!"}}
+{"version":"8.5.0-beta.5","info":{"plain":"- Addon Test: Only reset story count on file change when watch mode is enabled - [#30121](https://github.com/storybookjs/storybook/pull/30121), thanks @ghengeveld!\n- Build: Revert Downgrade to esbuild 0.24.0 - [#30120](https://github.com/storybookjs/storybook/pull/30120), thanks @yannbf!\n- Core: Fix `ERR_PACKAGE_PATH_NOT_EXPORTED` in `@storybook/node-logger` - [#30093](https://github.com/storybookjs/storybook/pull/30093), thanks @JReinhold!\n- React: Use Act wrapper in Storybook for component rendering - [#30037](https://github.com/storybookjs/storybook/pull/30037), thanks @valentinpalkovic!\n- Vite: Add extra entries to `optimizeDeps` - [#30117](https://github.com/storybookjs/storybook/pull/30117), thanks @ndelangen!"}}
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index 8fdbe571d9bc..48ce67a1b4a7 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -237,6 +237,24 @@ If you enabled the experimental test addon (i.e.,`@storybook/experimental-addon-
+
+
+### The addon panel does not show expected violations
+
+Modern React components often use asynchronous techniques like [Suspense](https://react.dev/reference/react/Suspense) or [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) to handle complex data fetching and rendering. These components don’t immediately render their final UI state. Storybook doesn’t inherently know when an async component has fully rendered. As a result, the a11y checks sometimes run too early, before the component finishes rendering, leading to false negatives (no reported violations even if they exist).
+
+To address this issue, we have introduced a feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `'development'` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds. One of those development optimizations is React’s [`act` utility](https://react.dev/reference/react/act), which helps ensure that all updates related to a test are processed and applied before making assertions, like a11y checks.
+
+To enable this feature flag, add the following configuration to your `.storybook/main.js|ts` file:
+
+{/* prettier-ignore-start */}
+
+
+
+{/* prettier-ignore-end */}
+
+
+
**Learn about other UI tests**
* [Component tests](./component-testing.mdx) for user behavior simulation
diff --git a/scripts/package.json b/scripts/package.json
index bbc21e051529..b02d6abc9bba 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -54,7 +54,7 @@
]
},
"resolutions": {
- "esbuild": "0.24.0",
+ "esbuild": "^0.24.0",
"serialize-javascript": "^3.1.0",
"type-fest": "~2.19"
},
@@ -108,7 +108,7 @@
"ejs": "^3.1.10",
"ejs-lint": "^2.0.0",
"es-toolkit": "^1.22.0",
- "esbuild": "0.24.0",
+ "esbuild": "^0.24.0",
"esbuild-plugin-alias": "^0.2.1",
"eslint": "^8.57.0",
"eslint-config-airbnb-typescript": "^18.0.0",
diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts
index d3a671034d17..c9431c22047d 100755
--- a/scripts/prepare/bundle.ts
+++ b/scripts/prepare/bundle.ts
@@ -117,6 +117,11 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
clean: false,
...(dtsBuild === 'esm' ? dtsConfig : {}),
platform: platform || 'browser',
+ define: {
+ // tsup replaces 'process.env.NODE_ENV' during build time. We don't want to do this. Instead, the builders (vite/webpack) should replace it
+ // Then, the variable can be set accordingly in dev/build mode
+ 'process.env.NODE_ENV': 'process.env.NODE_ENV',
+ },
esbuildPlugins:
platform === 'node'
? []
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 1f8a3b9cfbe5..e7bac1502539 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -1450,7 +1450,7 @@ __metadata:
ejs: "npm:^3.1.10"
ejs-lint: "npm:^2.0.0"
es-toolkit: "npm:^1.22.0"
- esbuild: "npm:0.24.0"
+ esbuild: "npm:^0.24.0"
esbuild-plugin-alias: "npm:^0.2.1"
eslint: "npm:^8.57.0"
eslint-config-airbnb-typescript: "npm:^18.0.0"
@@ -5143,7 +5143,7 @@ __metadata:
languageName: node
linkType: hard
-"esbuild@npm:0.24.0":
+"esbuild@npm:^0.24.0":
version: 0.24.0
resolution: "esbuild@npm:0.24.0"
dependencies: