@@ -54,7 +54,3 @@ Header.propTypes = {
onLogout: PropTypes.func.isRequired,
onCreateAccount: PropTypes.func.isRequired,
};
-
-Header.defaultProps = {
- user: null,
-};
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..49e69c107fe9 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":"- 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!"}}
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/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'
? []