React: Add strictMode option

app/react/src/client/preview/render.tsx

@@ -4,15 +4,17 @@ import ReactDOM from 'react-dom';
 
 import { RenderContext } from './types';
 
+// will be provided by the webpack define plugin
+declare const FRAMEWORK_OPTIONS: {
+  fastRefresh?: boolean;
+  strictMode?: boolean;
+};
+
 const rootEl = document ? document.getElementById('root') : null;
 
 const render = (node: ReactElement, el: Element) =>
   new Promise((resolve) => {
-    ReactDOM.render(
-      process.env.STORYBOOK_EXAMPLE_APP ? <StrictMode>{node}</StrictMode> : node,
-      el,
-      resolve
-    );
+    ReactDOM.render(node, el, resolve);
   });
 
 class ErrorBoundary extends Component<{
@@ -47,6 +49,9 @@ class ErrorBoundary extends Component<{
   }
 }
 
+const isStrict = process.env.STORYBOOK_EXAMPLE_APP || FRAMEWORK_OPTIONS?.strictMode;
+const Wrapper = isStrict ? React.StrictMode : React.Fragment;
+
 export default async function renderMain({
   storyFn,
   showMain,
@@ -57,9 +62,11 @@ export default async function renderMain({
   const StoryFn = storyFn as FunctionComponent;
 
   const element = (
-    <ErrorBoundary showMain={showMain} showException={showException}>
-      <StoryFn />
-    </ErrorBoundary>
+    <Wrapper>
+      <ErrorBoundary showMain={showMain} showException={showException}>
+        <StoryFn />
+      </ErrorBoundary>
+    </Wrapper>
   );
 
   // We need to unmount the existing set of components in the DOM node.

app/react/types/index.ts

@@ -6,5 +6,6 @@ import { StorybookConfig as BaseConfig } from '@storybook/core/types';
 export interface StorybookConfig extends BaseConfig {
   reactOptions?: {
     fastRefresh?: boolean;
+    strictMode?: boolean;
   };
 }

examples/official-storybook/.env

@@ -1,2 +1 @@
 DOTENV_DISPLAY_WARNING=none
-STORYBOOK_EXAMPLE_APP=true

examples/official-storybook/main.ts

@@ -10,6 +10,7 @@ module.exports = {
   ],
   reactOptions: {
     fastRefresh: true,
+    strictMode: true,
   },
   addons: [
     {

lib/core/src/server/preview/iframe-webpack.config.js

@@ -70,6 +70,7 @@ export default async ({
 }) => {
   const dlls = await presets.apply('webpackDlls', []);
   const logLevel = await presets.apply('logLevel', undefined);
+  const frameworkOptions = await presets.apply(`${framework}Options`, {}, {});
   const { raw, stringified } = loadEnv({ production: true });
   const babelLoader = createBabelLoader(babelOptions, framework);
   const isProd = configType === 'PRODUCTION';
@@ -157,6 +158,7 @@ export default async ({
       new DefinePlugin({
         'process.env': stringified,
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        FRAMEWORK_OPTIONS: frameworkOptions,
       }),
       isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths),
       isProd ? null : new HotModuleReplacementPlugin(),