React: Fix fast refresh

app/react/src/server/framework-preset-react.ts

@@ -1,10 +1,27 @@
 import { TransformOptions } from '@babel/core';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import type { Configuration } from 'webpack';
+
 import { logger } from '@storybook/node-logger';
-import type { StorybookOptions } from './types';
+import type { StorybookOptions } from '@storybook/core/types';
+
+export async function babel(config: TransformOptions, options: StorybookOptions) {
+  const isDevelopment = options.configType === 'DEVELOPMENT';
+  const reactOptions = await options.presets.apply('reactOptions', {}, options);
+  const fastRefreshEnabled =
+    isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+
+  if (!fastRefreshEnabled) {
+    return config;
+  }
+
+  return {
+    ...config,
+    plugins: [require.resolve('react-refresh/babel'), ...(config.plugins || [])],
+  };
+}
 
-export function babelDefault(config: TransformOptions) {
+export async function babelDefault(config: TransformOptions) {
   return {
     ...config,
     presets: [
@@ -16,35 +33,19 @@ export function babelDefault(config: TransformOptions) {
   };
 }
 
-export function webpackFinal(config: Configuration, { reactOptions }: StorybookOptions) {
-  const isDevelopment = config.mode === 'development';
+export async function webpackFinal(config: Configuration, options: StorybookOptions) {
+  const isDevelopment = options.configType === 'DEVELOPMENT';
+  const reactOptions = await options.presets.apply('reactOptions', {}, options);
   const fastRefreshEnabled =
-    isDevelopment && (reactOptions?.fastRefresh || process.env.FAST_REFRESH === 'true');
-  if (fastRefreshEnabled) {
-    logger.info('=> Using React fast refresh feature.');
+    isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+
+  if (!fastRefreshEnabled) {
+    return config;
   }
+
+  logger.info('=> Using React fast refresh feature.');
   return {
     ...config,
-    module: {
-      ...config.module,
-      rules: [
-        ...config.module.rules,
-        fastRefreshEnabled && {
-          test: /\.[jt]sx?$/,
-          exclude: /node_modules/,
-          use: [
-            {
-              loader: require.resolve('babel-loader'),
-              options: {
-                plugins: [require.resolve('react-refresh/babel')],
-              },
-            },
-          ],
-        },
-      ].filter(Boolean),
-    },
-    plugins: [...config.plugins, fastRefreshEnabled && new ReactRefreshWebpackPlugin()].filter(
-      Boolean
-    ),
+    plugins: [...(config.plugins || []), new ReactRefreshWebpackPlugin()],
   };
 }

examples/cra-kitchen-sink/.storybook/main.js

@@ -3,6 +3,9 @@ const path = require('path');
 module.exports = {
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
   logLevel: 'debug',
+  reactOptions: {
+    fastRefresh: true,
+  },
   addons: [
     '@storybook/preset-create-react-app',
     {

examples/official-storybook/stories/addon-docs/react-refresh-example.js → examples/cra-kitchen-sink/src/components/FastRefreshExample.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-export const Refresh = () => {
+export const FastRefreshExample = () => {
   const [value, setValue] = React.useState('abc');
   return (
     <>
       <input value={value} onChange={(event) => setValue(event.target.value)} />
-      <p>Change the input value then this text in the component.</p>
+      <p>Change the input value then this text in the component file.</p>
       <p>The state of the input should be kept.</p>
     </>
   );

examples/cra-kitchen-sink/src/stories/fast-refresh.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FastRefreshExample } from '../components/FastRefreshExample';
+
+export default {
+  title: 'React Fast Refresh',
+  component: FastRefreshExample,
+};
+
+export const Default = () => <FastRefreshExample />;

lib/core/types/index.ts

@@ -40,6 +40,7 @@ export interface StorybookOptions {
   configType: 'DEVELOPMENT' | 'PRODUCTION';
   presetsList: Preset[];
   typescriptOptions: TypescriptOptions;
+  [key: string]: any;
 }
 
 /**

scripts/run-e2e-config.ts

@@ -137,7 +137,11 @@ export const react_typescript: Parameters = {
 export const cra: Parameters = {
   name: 'cra',
   version: 'latest',
-  generator: 'npx create-react-app@{{version}} {{name}}-{{version}}',
+  generator: [
+    'npx create-react-app@{{version}} {{name}}-{{version}}',
+    'cd {{name}}-{{version}}',
+    'echo "FAST_REFRESH=true" > .env',
+  ].join(' && '),
 };
 
 export const cra_typescript: Parameters = {