[Bug]: React.StrictMode is not working

[zisest]

Describe the bug

strictMode: true option is ignored when using @storybook/react-webpack5 in v. 7.0.*

To Reproduce

The bug is reproducible in 'React v18 Webpack (TypeScript)' on StackBlitz.

Or locally:

1. npm init -y
2. npx storybook@latest init
3. Choose webpack_react project type
4. Yes to missing-babelrc migration
5. Set framework.options.strictMode in main.js to true
6. npm run storybook

System

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 16.19.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 3.4.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.35)
  npmPackages:
    @storybook/addon-essentials: ^7.0.9 => 7.0.9
    @storybook/addon-interactions: ^7.0.9 => 7.0.9
    @storybook/addon-links: ^7.0.9 => 7.0.9
    @storybook/blocks: ^7.0.9 => 7.0.9
    @storybook/react: ^7.0.9 => 7.0.9
    @storybook/react-webpack5: ^7.0.9 => 7.0.9
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[sphinx96]

having same issue

[austinh]

can confirm I am having this same issue with react-vite as well on v7

[trondkla]

Can confirm

[CodeSmith32]

A month later, and this is still a (frustrating) issue in 7.5.3.

My stack: storybook-typescript-react-vite

There's also no option for enabling it? (Or disabling it if it were supposed to work?)

• I found this closed issue but reactOptions is neither a key of StorybookConfig according to TS, nor does forcing it work; so clearly it's not implemented.
• I also tried directly wrapping my contents with <React.StrictMode> which failed as well because of an issue in react-element-to-jsx-string which I reported separately

Fortunately for me, I was able to manually patch this second bug on my local end, so I can at least test my components in strict mode with SB by manually wrapping all of them.

[ITsvetkoFF]

@CodeSmith32 may I ask about your local patch?

Fortunately for me, I was able to manually patch this second bug on my local end

I can imagine that you needed to make a custom build of storybook with patched react-element-to-jsx-string... Is there a simpler way? :)

[JReinhold]

As a workaround for now, you can add a global decorator that adds StrictMode:

1. rename preview.ts to preview.tsx (if not already done)
2. Add a decorator:

import { StrictMode } from 'react';

const preview: Preview = {
  ...
  decorators: [
    (Story) => (
      <StrictMode>
        <Story />
      </StrictMode>
    ),
  ],
};

This is a fork of @zisest's original StackBlitz demonstrating that it works, because it logs "button rendered" twice, which is the behavior we expect from Strict mode:

https://stackblitz.com/edit/github-jzuuqp-rgyrit?file=.storybook%2Fpreview.tsx

I also tried directly wrapping my contents with <React.StrictMode> which failed as well because of an issue in react-element-to-jsx-string which algolia/react-element-to-jsx-string#827

I think this is fixed in the latest 8.0 prereleases #19785 . Might not help you much now though.

[ITsvetkoFF]

For some reason in my codebase this approach with decorators didn't work, but if I wrap an individual story code in StrictMode - it is applied, for now this is enough :)

[CodeSmith32]

I can imagine that you needed to make a custom build of storybook with patched react-element-to-jsx-string... Is there a simpler way? :)

@ITsvetkoFF, I just manually went into my /node_modules directory, found the offending module and script (took a minute to figure out which file was being used since the build generates both esm and cjs), and updated it there. Obviously an npm re-install would ruin it, but I thought it'd be fixed sooner (the module doesn't appear to be maintained anymore though - 2 years since the last real commit).

(specifically for me I inserted the code at /node_modules/react-element-to-jsx-string/dist/esm/index.js:497 using react-element-to-jsx-string v15.0.0)

I'm pretty sure you can also disable JSX preview (that's really all it's used for) but it's been awhile, and I can't recall where that is.

[patchaiy]

As a workaround for now, you can add a global decorator that adds StrictMode:

1. rename preview.ts to preview.tsx (if not already done)
2. Add a decorator:

import { StrictMode } from 'react';

const preview: Preview = {
  ...
  decorators: [
    (Story) => (
      <StrictMode>
        <Story />
      </StrictMode>
    ),
  ],
};

This is a fork of @zisest's original StackBlitz demonstrating that it works, because it logs "button rendered" twice, which is the behavior we expect from Strict mode:

https://stackblitz.com/edit/github-jzuuqp-rgyrit?file=.storybook%2Fpreview.tsx

I also tried directly wrapping my contents with <React.StrictMode> which failed as well because of an issue in react-element-to-jsx-string which algolia/react-element-to-jsx-string#827

I think this is fixed in the latest 8.0 prereleases #19785 . Might not help you much now though.

Hi @JReinhold I Tried with the above steps i could see mine is working correctly could you please help to move further

[JReinhold]

Hi @JReinhold I Tried with the above steps i could see mine is working correctly could you please help to move further

I'm not sure what you're asking, did my workaround work for you or not? What would you like to move further?

[prochafilho]

@valentinpalkovic why close the issue? The bug is very much present in the current release/

[valentinpalkovic]

The fix will be available for 8.0.0-alpha.17 and for 7.6.13 as soon as these versions are released.

At Storybook we are closing issues when the PR gets merged which fixes the issue.

[ronny1020]

HI, what is the solution now? Should I use the walkaround or add the framework.options.strictMode? Is there a document about this setting? Thanks.

[valentinpalkovic]

@ronny1020 The strictMode option should work as expected and is documented here: https://storybook.js.org/docs/configure/frameworks