storybook: Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
Describe the bug Hello, I have a vue-cli project with storybook for vue. Yesterday I found so many vulnerabilities provoked by this issue: [ https://github.com/facebook/create-react-app/issues/8672 ]. Once I updated and fixed all my vulnerabilities, I compiled my project, run storybook and suddenly I see the following warning in console:
VM296 vendors~main.c7010600da27b0659aea.bundle.js:161197 Warning: Cannot update during an existing state transition (such as within
render). Render methods should be a pure function of props and state. in Unknown (created by Context.Consumer) in WithTheme(Component) in WithTheme(Component) (created by Preview) in div (created by Context.Consumer) in Side (created by FlexBar) in div (created by Context.Consumer) in Styled(div) (created by FlexBar) in div (created by SimpleBar) in div (created by SimpleBar) in div (created by SimpleBar) in div (created by SimpleBar) in div (created by SimpleBar) in div (created by SimpleBar) in SimpleBar in Unknown (created by Context.Consumer) in Styled(Component) (created by ScrollArea) in ScrollArea in Unknown (created by Context.Consumer) in Bar (created by FlexBar) in div (created by FlexBar) in FlexBar in Unknown (created by Context.Consumer) in Styled(Component) (created by Preview) in Provider (created by Preview) in Preview (created by Context.Consumer) in ManagerConsumer in Unknown (created by Layout) in div (created by Context.Consumer) in Styled(div) (created by Preview) in Preview (created by Layout) in div (created by Context.Consumer) in Styled(div) (created by Main) in div (created by Context.Consumer) in Styled(div) (created by Main) in Main (created by Layout) in Layout (created by Context.Consumer) in WithTheme(Layout) in Unknown in Unknown in div (created by Context.Consumer) in Styled(div) in Unknown in Unknown (created by SizeMeRenderer(Component)) in SizeMeReferenceWrapper (created by SizeMeRenderer(Component)) in SizeMeRenderer(Component) (created by SizeMe(Component)) in SizeMe(Component) (created by Manager) in ThemeProvider (created by Manager) in Manager (created by Context.Consumer) in Location (created by QueryLocation) in QueryLocation (created by Root) in LocationProvider (created by Root) in HelmetProvider (created by Root) in Root
I removed all my stories and all my components (having an empty-components storybook) but problem persists 😢
To Reproduce Steps to reproduce the behavior:
- I updated all my storybook packages.
- I executed npm run storybook:serve
- I go to browser, open console
- Error displays
Screenshots https://prnt.sc/rlw2dl
Code snippets
- Package.json:
{
"name": "test-storybook",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
"storybook:build": "vue-cli-service storybook:build -c config/storybook",
"storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
},
"dependencies": {
"@babel/polyfill": "^7.8.7",
"@storybook/addon-a11y": "^5.3.17",
"core-js": "^3.4.4",
"jest": "^25.1.0",
"jest-vue-preprocessor": "^1.7.1",
"register-service-worker": "^1.7.1",
"vue": "^2.6.10",
"vue-i18n": "^8.15.6",
"vue-router": "^3.1.6",
"vuetify": "^2.2.18",
"vuex": "^3.1.3"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
"@mdi/font": "^4.9.95",
"@storybook/addon-actions": "^5.3.17",
"@storybook/addon-docs": "^5.3.17",
"@storybook/addon-knobs": "^5.3.17",
"@storybook/addon-links": "^5.3.17",
"@storybook/addon-notes": "^5.3.17",
"@storybook/addon-viewport": "^5.3.17",
"@storybook/vue": "^5.3.17",
"@vue/cli-plugin-babel": "^4.2.3",
"@vue/cli-plugin-eslint": "^4.2.3",
"@vue/cli-plugin-pwa": "^4.2.3",
"@vue/cli-plugin-router": "^4.2.3",
"@vue/cli-plugin-unit-jest": "^4.2.3",
"@vue/cli-plugin-vuex": "^4.2.3",
"@vue/cli-service": "^4.2.3",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.1.0",
"css-loader": "^3.4.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"storybook-addon-vue-info": "^1.4.2",
"style-loader": "^1.1.3",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-i18n": "^0.6.1",
"vue-cli-plugin-storybook": "^1.2.1",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
}
}
- vue.config.js
module.exports = {
'transpileDependencies': [
'vuetify'
],
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
}
}
System:
- The results of
npx -p @storybook/cli@next sb info:
Environment Info:
System:
OS: macOS 10.15.1
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.19.0 - /usr/local/bin/yarn
npm: 6.10.2 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 80.0.3987.149
Firefox: 69.0.3
Safari: 13.0.3
npmPackages:
@storybook/addon-a11y: ^5.3.17 => 5.3.17
@storybook/addon-actions: ^5.3.17 => 5.3.17
@storybook/addon-docs: ^5.3.17 => 5.3.17
@storybook/addon-knobs: ^5.3.17 => 5.3.17
@storybook/addon-links: ^5.3.17 => 5.3.17
@storybook/addon-notes: ^5.3.17 => 5.3.17
@storybook/addon-viewport: ^5.3.17 => 5.3.17
@storybook/vue: ^5.3.17 => 5.3.17
Thanks!
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 31
- Comments: 52 (15 by maintainers)
Commits related to this issue
- @storybook/addon-viewport でエラーが出ていたので一旦コメントアウト おそらくコレと同じ症状 Ref: https://github.com/storybookjs/storybook/issues/10204 — committed to karappo/vue-components by naokazuterada 4 years ago
- removed storybook viewport addon, has issues https://github.com/storybookjs/storybook/issues/10204 — committed to swoppy/summit-media by deleted user 4 years ago
- Add emotion - Add eslint plugin emotion, stylelint - Remove storybook addon viewport - Issue in https://github.com/storybookjs/storybook/issues/10204 — committed to tunapanini/tupa-potter-page by tunapanini 4 years ago
For me it’s when I add @storybook/addon-viewport
@TommySorensen @sbenitezma I also have a vue project where this warrning occurs. The workaround is working. You just need to know one thing which i also didn’t know.
For
yarnusers the workaround mentioned by @amendoa works.For
npmusers you have to install it seperatly in your dev dependencies because npm doesn’t supportresolutionsand don’t forget to delete
package.lock&node_modulesas mentioned by @dylanjmcdonald@shilman i can confirm that the storybook addon viewport is causing this error. i am not using CRA.
I have same problem (.
It looks like there’s a problem with react
16.13.1, you can addin your
package.jsonas a temporary workaroundStorybook 6.0.0 will got into Release Candidate real soon. The beta is out for you to try right now, it has this issue resolved.
A patch PR on master is still welcome though!
I’m still getting the error when using:
@shilman I hit this issue today on a project at work, simply removing
@storybook/addon-viewportdoes solve it.~In this project, we use
babel-preset-react-app, and when I removed the default Storybook presets/plugins, it fixed everything. I think one of the plugins is likely causing this…~I lied, that was a debug error… it’s still there. I’ll see if I can find the cause.
I checked. This bug is fixed on the 6.0.0-alpha
6.x solved it for me. Running 6.x with viewport addon without these problems.
This issue is there even with vue.js and storybook version 5.3.19
This issue still exists in React.
I’m having this issue as well. Not using CRA, developing a component library in Typescript. Here’s my
package.json:Seems to be happening because of this statement: https://github.com/storybookjs/storybook/blob/efe333d55a708c0e83f63a4ce97f7bfaf5aebfcf/lib/api/src/index.tsx#L331
I guess wrapping the block in a useEffect hook could solve the issue.
@shilman I’m using the Create React App approach via
@storybook/preset-create-react-app@manuelmeister Nope. 6.0 is the latest stable version and we only have time to back-port critical security fixes.
Here’s how to upgrade to 6.0:
Full migration guide
That fix is not working for me @amendoa, my project is made in vue not react. That workaround is giving me lots of errors when I execute
npm run storybook:serveThe plot thickens! Tho I don’t think it’s a CRA issue because AFAIK @sbenitezma 's not using CRA. Sounds like a React problem or a (possibly long-standing) Storybook problem that’s being exposed by recent versions of React. cc @mrmckeb
@shilman just removing the
@storybook/addon-viewportthe error goes away, so I guess the problem is with that addon… do you want me also to test with the rest of addons?Are you all using
@storybook/vue?@sbenitezma does the problem go away when you uninstall
@storybook/addon-viewportper @dylanjmcdonald 's suggestion?Does anybody have a repro repo they can share?