-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: React.StrictMode is not working #22472
Comments
having same issue |
can confirm I am having this same issue with react-vite as well on v7 |
Can confirm |
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?)
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. |
@CodeSmith32 may I ask about your local patch?
I can imagine that you needed to make a custom build of storybook with patched |
As a workaround for now, you can add a global decorator that adds
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 think this is fixed in the latest 8.0 prereleases #19785 . Might not help you much now though. |
For some reason in my codebase this approach with decorators didn't work, but if I wrap an individual story code in |
@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. |
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? |
@valentinpalkovic why close the issue? The bug is very much present in the current release/ |
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. |
- Upgrade Storybook to latest version (7.6.15) - Enable React StrictMode in Storybook - Replace deprecated @storybook/addon-styling with @storybook/addon-themes I was trying to upgrade react-query to v5 (SWC-6545) and found that our Challenge Portal components relied on features that were removed from react-query (e.g. onSuccess/onSettled callbacks for useQuery). The features were removed because they were often used improperly, leading to bugs. The Challenge Portal components indeed used these callbacks improperly, so I was working to fix them and additionally remove unnecessary `useEffect` hooks. To attempt to identify new issues with the effect hooks, I enabled StrictMode. However, StrictMode did not work properly in Storybook, with a fix in v7.6.13 (storybookjs/storybook#22472), so this upgrade is necessary to enable StrictMode.
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. |
@ronny1020 The strictMode option should work as expected and is documented here: https://storybook.js.org/docs/configure/frameworks |
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:
npm init -y
npx storybook@latest init
webpack_react
project typemissing-babelrc
migrationframework.options.strictMode
inmain.js
totrue
npm run storybook
System
Additional context
No response
The text was updated successfully, but these errors were encountered: