Storybook: Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Created on 24 Mar 2020  ·  52Comments  ·  Source: storybookjs/storybook

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:

  1. I updated all my storybook packages.
  2. I executed npm run storybook:serve
  3. I go to browser, open console
  4. 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!

vue has workaround question / support
Source
picture sbenitezma
👍30

Most helpful comment

For me it's when I add @storybook/addon-viewport

picture dylanjmcdonald on 24 Mar 2020
👍24 ❤14

All 52 comments

I have same problem (.

MOTORIST picture MOTORIST on 24 Mar 2020
👍10

For me it's when I add @storybook/addon-viewport

dylanjmcdonald picture dylanjmcdonald on 24 Mar 2020
👍24 ❤14

Are you all using @storybook/vue?

@sbenitezma does the problem go away when you uninstall @storybook/addon-viewport per @dylanjmcdonald 's suggestion?

Does anybody have a repro repo they can share?

shilman picture shilman on 25 Mar 2020
👍1

@shilman I'm using the Create React App approach via @storybook/preset-create-react-app

dylanjmcdonald picture dylanjmcdonald on 25 Mar 2020
👍2

@shilman Here's an example repo that reproduces the issue with @storybook/addon-viewport added.

dylanjmcdonald picture dylanjmcdonald on 25 Mar 2020

Thanks @dylanjmcdonald ! Strangely I cannot reproduce on my machine. What I tried:

npm install 
npm run storybook

Does that fail on your machine?

shilman picture shilman on 25 Mar 2020

@shilman It will build and run just fine, but there will be an error in the browser console with the following message:

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
dylanjmcdonald picture dylanjmcdonald on 25 Mar 2020

@dylanjmcdonald thanks for clarifying. confirmed that the error occurs with @storybook/addon-viewport and disappears when I remove the addon.

@ndelangen any idea why this might be? i looked at the addon's dependencies and also its code and AFAICT there's nothing suspicious in there. i must be missing something.

shilman picture shilman on 25 Mar 2020

Tried to remove @storybook/addon-viewport and tested in browser, the results are the same as @dylanjmcdonald is saying 😮

sbenitezma picture sbenitezma on 25 Mar 2020

@sbenitezma can you try removing all the addons for debugging purposes and see if the error goes away, then add them back one by one until the error comes returns?

shilman picture shilman on 25 Mar 2020

@shilman just removing the @storybook/addon-viewport the error goes away, so I guess the problem is with that addon... do you want me also to test with the rest of addons?

sbenitezma picture sbenitezma on 25 Mar 2020
👍1

I have exactly the same problem with create-react-app right now.
The error goes away after removing the @storybook/addon-viewport.

dlemek picture dlemek on 25 Mar 2020

@shilman @sbenitezma Want to throw this out there, but it might not lead to anything or pertain to this issue at all - but react-scripts was just updated recently with some babel version updates because there was some odd errors being thrown from some outdated dependencies. Maybe someone who understands babel a bit more could check into this. Here is the issue I was following regarding this: https://github.com/facebook/create-react-app/issues/8680

dylanjmcdonald picture dylanjmcdonald on 25 Mar 2020

Also downgrading react & react-dom from ^16.13.1 to ^16.13.0 solves the problem

dlemek picture dlemek on 25 Mar 2020

The 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 picture shilman on 26 Mar 2020
👍1

Seems like the message is coming from this pull request in React 16.13.1. https://github.com/facebook/react/pull/18330/files

Line 2959 of packages/react-reconciler/src/ReactFiberWorkLoop.js

        case ClassComponent: {
           if (!didWarnAboutUpdateInRender) {
             console.error(
               'Cannot update during an existing state transition (such as ' +
                 'within `render`). Render methods should be a pure ' +
                 'function of props and state.',
             );
erikt9 picture erikt9 on 26 Mar 2020

It looks like there's a problem with react 16.13.1, you can add 

"resolutions": {
    "react": "16.13.0",
    "react-dom": "16.13.0"
}

in your package.json as a temporary workaround

amendoa picture amendoa on 26 Mar 2020
👍8 ❤1

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:serve

ERROR in ./node_modules/@egoist/vue-to-react/dist/index.esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@egoist/vue-to-react/dist'
 @ ./node_modules/@egoist/vue-to-react/dist/index.esm.js 1:0-26 14:13-18 15:4-9 28:11-16 28:44-49
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@emotion/core/dist/core.browser.esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@emotion/core/dist'
 @ ./node_modules/@emotion/core/dist/core.browser.esm.js 2:0-76 10:26-39 17:19-32 22:11-24 28:9-19 82:12-25 92:11-24 110:11-24 156:9-22 175:11-24 177:13-26 185:9-22 257:2-11 332:9-22
 @ ./node_modules/@storybook/theming/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsContainer.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@emotion/styled-base/dist'
 @ ./node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js 2:0-38 85:13-26 134:18-31
 @ ./node_modules/@emotion/styled/dist/styled.browser.esm.js
 @ ./node_modules/@storybook/theming/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsContainer.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@mdx-js/react/dist/esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@mdx-js/react/dist'
 @ ./node_modules/@mdx-js/react/dist/esm.js 1:0-42 110:17-22 114:11-16 120:26-31 131:9-14 141:11-16 141:31-36 144:23-33 156:11-16 163:9-14 192:11-16 195:9-14
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsContainer.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Wrapper.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Wrapper.js 8:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Title.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Title.js 14:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Subtitle.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Subtitle.js 10:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/DocsContainer.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsContainer.js 24:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Subheading.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Subheading.js 12:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Story.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Story.js 18:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Stories.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Stories.js 16:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Source.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Source.js 42:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Props.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Props.js 50:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Primary.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Primary.js 12:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Preview.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Preview.js 24:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Meta.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Meta.js 20:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Heading.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Heading.js 12:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Anchor.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Anchor.js 8:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/Description.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Description.js 14:37-53
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/DocsContext.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsContext.js 8:13-29
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/DocsPage.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsPage.js 8:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/mdx.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/mdx.js 28:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/blocks/DocsStory.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/blocks'
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsStory.js 10:36-52
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/addon-docs/dist/frameworks/vue'
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js 3:36-52
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/core/dist/client/preview/start.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/core/dist/client/preview'
 @ ./node_modules/@storybook/core/dist/client/preview/start.js 59:36-52
 @ ./node_modules/@storybook/core/dist/client/preview/index.js
 @ ./node_modules/@storybook/core/dist/client/index.js
 @ ./node_modules/@storybook/core/client.js
 @ ./node_modules/@storybook/vue/dist/client/preview/index.js
 @ ./node_modules/@storybook/vue/dist/client/index.js
 @ ./config/storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/core/dist/client/preview/NoDocs.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/core/dist/client/preview'
 @ ./node_modules/@storybook/core/dist/client/preview/NoDocs.js 8:36-52
 @ ./node_modules/@storybook/core/dist/client/preview/start.js
 @ ./node_modules/@storybook/core/dist/client/preview/index.js
 @ ./node_modules/@storybook/core/dist/client/index.js
 @ ./node_modules/@storybook/core/client.js
 @ ./node_modules/@storybook/vue/dist/client/preview/index.js
 @ ./node_modules/@storybook/vue/dist/client/index.js
 @ ./config/storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/create-react-context/lib/index.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/create-react-context/lib'
 @ ./node_modules/create-react-context/lib/index.js 5:13-29
 @ ./node_modules/react-popper/lib/esm/Manager.js
 @ ./node_modules/react-popper/lib/esm/index.js
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/create-react-context/lib/implementation.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/create-react-context/lib'
 @ ./node_modules/create-react-context/lib/implementation.js 5:13-29
 @ ./node_modules/create-react-context/lib/index.js
 @ ./node_modules/react-popper/lib/esm/Manager.js
 @ ./node_modules/react-popper/lib/esm/index.js
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/emotion-theming/dist/emotion-theming.browser.esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/emotion-theming/dist'
 @ ./node_modules/emotion-theming/dist/emotion-theming.browser.esm.js 2:0-66 37:9-22 42:11-24 53:11-24 54:13-26 62:18-28 68:9-23
 @ ./node_modules/@storybook/theming/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/DocsContainer.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/markdown-to-jsx/dist/esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/markdown-to-jsx/dist'
 @ ./node_modules/markdown-to-jsx/dist/esm.js 1:526-551 1:10840-10845 1:11152-11157 1:20035-20040
 @ ./node_modules/@storybook/components/dist/blocks/Description.js
 @ ./node_modules/@storybook/components/dist/blocks/index.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-element-to-jsx-string/dist/cjs/index.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-element-to-jsx-string/dist/cjs'
 @ ./node_modules/react-element-to-jsx-string/dist/cjs/index.js 7:12-28
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/react/lib/defaultValues/createFromRawDefaultProp.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/react/lib/defaultValues/index.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/react/propTypes/handleProp.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/react/extractProps.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/Props.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-popper-tooltip/dist/esm'
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js 4:0-41 8:21-26 210:11-16 227:2-11 384:17-22 417:13-18 432:11-16 432:46-51 457:2-11
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-popper/lib/esm/Reference.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-popper/lib/esm'
 @ ./node_modules/react-popper/lib/esm/Reference.js 5:0-31 46:2-17 49:9-28 50:11-30
 @ ./node_modules/react-popper/lib/esm/index.js
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-popper/lib/esm/Popper.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-popper/lib/esm'
 @ ./node_modules/react-popper/lib/esm/Popper.js 7:0-31 183:2-17 198:9-28 199:11-30
 @ ./node_modules/react-popper/lib/esm/index.js
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-popper/lib/esm/Manager.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-popper/lib/esm'
 @ ./node_modules/react-popper/lib/esm/Manager.js 4:0-31 43:11-30 45:7-26 51:2-17
 @ ./node_modules/react-popper/lib/esm/index.js
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-syntax-highlighter/dist/esm/async-syntax-highlighter.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-syntax-highlighter/dist/esm'
 @ ./node_modules/react-syntax-highlighter/dist/esm/async-syntax-highlighter.js 10:0-26 79:15-20 146:4-9
 @ ./node_modules/react-syntax-highlighter/dist/esm/light-async.js
 @ ./node_modules/react-syntax-highlighter/dist/esm/index.js
 @ ./node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-syntax-highlighter/dist/esm/create-element.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-syntax-highlighter/dist/esm'
 @ ./node_modules/react-syntax-highlighter/dist/esm/create-element.js 3:0-26 56:11-16
 @ ./node_modules/react-syntax-highlighter/dist/esm/highlight.js
 @ ./node_modules/react-syntax-highlighter/dist/esm/default-highlight.js
 @ ./node_modules/react-syntax-highlighter/dist/esm/index.js
 @ ./node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-syntax-highlighter/dist/esm/highlight.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-syntax-highlighter/dist/esm'
 @ ./node_modules/react-syntax-highlighter/dist/esm/highlight.js 2:0-26 16:11-16 35:9-14 249:40-45 266:13-18 266:64-69 292:11-16 292:62-67
 @ ./node_modules/react-syntax-highlighter/dist/esm/default-highlight.js
 @ ./node_modules/react-syntax-highlighter/dist/esm/index.js
 @ ./node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.browser.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-textarea-autosize/dist'
 @ ./node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.browser.js 5:0-49 271:11-24 316:2-11
 @ ./node_modules/@storybook/components/dist/form/input/input.js
 @ ./node_modules/@storybook/components/dist/form/index.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/simplebar-react/dist/simplebar-react.esm.js
Module not found: Error: Can't resolve 'react' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/simplebar-react/dist'
 @ ./node_modules/simplebar-react/dist/simplebar-react.esm.js 10:0-26 73:9-14 75:15-20 77:5-10 79:5-10 81:7-12 83:5-10 85:5-10 87:6-11 89:19-24 91:7-12 93:5-10 95:7-12 97:5-10
 @ ./node_modules/@storybook/components/dist/ScrollArea/ScrollArea.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/core/dist/client/preview/start.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/@storybook/core/dist/client/preview'
 @ ./node_modules/@storybook/core/dist/client/preview/start.js 61:39-59
 @ ./node_modules/@storybook/core/dist/client/preview/index.js
 @ ./node_modules/@storybook/core/dist/client/index.js
 @ ./node_modules/@storybook/core/client.js
 @ ./node_modules/@storybook/vue/dist/client/preview/index.js
 @ ./node_modules/@storybook/vue/dist/client/index.js
 @ ./config/storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/sbenitez/Projects/sonosuite-storybook/node_modules/react-popper-tooltip/dist/esm'
 @ ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js 5:0-41 440:40-52
 @ ./node_modules/@storybook/components/dist/tooltip/WithTooltip.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js ./config/storybook/preview.js ./config/storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
sbenitezma picture sbenitezma on 26 Mar 2020
😕1

Also downgrading react & react-dom from ^16.13.1 to ^16.13.0 solves the problem

I'm still getting the error when using:

    "react": "16.13.0",
    "react-dom": "16.13.0",
TommySorensen picture TommySorensen on 27 Mar 2020
😕3 👍3

@TommySorensen Maybe a stupid question, but did you delete your node_modules folder and package-lock.json file before installing 16.13.0?

dylanjmcdonald picture dylanjmcdonald on 27 Mar 2020

@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 yarn users the workaround mentioned by @amendoa works.

For npmusers you have to install it seperatly in your dev dependencies because npm doesn't support resolutions

"devDependencies": {
    ...
    "react": "16.13.0",
    "react-dom": "16.13.0",
    ...
  },

and don't forget to delete package.lock & node_modules as mentioned by @dylanjmcdonald

@shilman i can confirm that the storybook addon viewport is causing this error. i am not using CRA.

CodeDredd picture CodeDredd on 2 Apr 2020
👍12 🎉3 🚀2

Has anyone been able to locate the specific lines of code in addons/viewports that causes the warning?

ndelangen picture ndelangen on 3 Apr 2020

I tested with @CodeDredd notes and no warnings now, so it works, ty 😄
from me no idea where are the lines that causes the warning, maybe someone can give more light about that 🙏

sbenitezma picture sbenitezma on 3 Apr 2020

I have same too
~@storybook/addon-viewport~

k0603156 picture k0603156 on 11 Apr 2020

@ndelangen I think this happens when the addon uses this API:

import { useAddonState } from "@storybook/api";

When I swap useAddonState for React.useState in my addon, the warning is gone.

tajo picture tajo on 15 Apr 2020

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.

caspardue picture caspardue on 16 Apr 2020
👍2

Just wanted to note this is an issue on my Gatsby setup as well, not just Vue. Also temporarily fixed by disabling the plugin.

bsgreenb picture bsgreenb on 24 Apr 2020

I checked. This bug is fixed on the 6.0.0-alpha

ndelangen picture ndelangen on 24 Apr 2020
👍2 🚀1

I just want to add that this potentially completely screws up the canvas height. I had to clear all site data in the chrome devtools to fix this. Took me way too long to figure out how to fix this.

GrtDev picture GrtDev on 28 Apr 2020

I also had this error in the console. Removing the @storybook/addon-viewport addon was successful in removing the error.

Neilpoulin picture Neilpoulin on 30 Apr 2020

still error exists when upgrading @storybook/addon-viewport to alpha or beta versions. The only way fixed it for me was to downgrade react and react-dom

"react": "16.13.0",
"react-dom": "16.13.0"
TroodoNmike picture TroodoNmike on 5 May 2020

@yannbf perhaps this would be something you'd be keen to look at?

I checked 11 days ago whether this existed on next, but @TroodoNmike seems to be able to reproduce it on the latest beta...

ndelangen picture ndelangen on 5 May 2020

So using Gatsby, I actually found that @storybook/preset-create-react-app was able to solve this issue for our case. If you're using React this seems like the surefire way. For those using Vue, maybe it's just an issue of setting up a preset to avoid this?

bsgreenb picture bsgreenb on 5 May 2020

This probably isn't helpful information at this point, but seeing it on our project as well. It's @storybook/html base, but we do have react and react-dom installed as peer dependencies supporting a couple of React components from a separate repo. It started after adding @storybook/addon-viewports (along with backgrounds and a11y) and went away only by setting my React versions to 16.3.0 (as noted above).

maslade picture maslade on 8 May 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 30 May 2020

still happening even with v6.

RominHalltari picture RominHalltari on 3 Jun 2020

@shilman I hit this issue today on a project at work, simply removing @storybook/addon-viewport does 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.

mrmckeb picture mrmckeb on 5 Jun 2020
❤5

I'm having this issue as well. Not using CRA, developing a component library in Typescript. Here's my package.json:

{
  "name": "omui",
  "description": "The OpenMined UI component system for usage in all our web applications",
  "author": "Patrick Cason <[email protected]>",
  "license": "Apache-2.0",
  "version": "0.1.0",
  "keywords": [
    "design system",
    "framer",
    "omui",
    "openmined",
    "ui"
  ],
  "main": "build/index.js",
  "module": "build/index.esm.js",
  "scripts": {
    "storybook": "start-storybook",
    "build": "parcel build src/index.ts",
    "analyze": "yarn build && source-map-explorer build/index.esm.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "dependencies": {
    "@chakra-ui/core": "^0.8.0",
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "emotion-theming": "^10.0.27"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-storysource": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@storybook/react": "^5.3.19",
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "babel-loader": "^8.1.0",
    "husky": "^4.2.5",
    "parcel": "^2.0.0-alpha.3.2",
    "prettier": "^2.0.5",
    "pretty-quick": "^2.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "source-map-explorer": "^2.4.2",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}
cereallarceny picture cereallarceny on 11 Jun 2020
👍2

For what its worth, I'm having this issue in Angular.

blowsie picture blowsie on 17 Jun 2020

This issue still exists in React.

iPzard picture iPzard on 18 Jun 2020
👍2

This issue is there even with vue.js and storybook version 5.3.19

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
udaygowda picture udaygowda on 19 Jun 2020
👍2

Same issue with a small, non-CRA react app and latest Storybook (5.3.19). Removing @storybook/addon-viewport fixes the issue.

RyannosaurusRex picture RyannosaurusRex on 25 Jun 2020

Storybook 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!

ndelangen picture ndelangen on 3 Jul 2020
🎉6

@ndelangen thanks for sharing! Will be following progress on 6.0.0.

iPzard picture iPzard on 4 Jul 2020

I have the same issue with a vue app

irongollem picture irongollem on 8 Jul 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 29 Jul 2020

The issue persists. Will test when version 6 is released in the near future.

iPzard picture iPzard on 29 Jul 2020

Did it persist to the 6.0.0 release?

ndelangen picture ndelangen on 17 Aug 2020

6.x solved it for me. Running 6.x with viewport addon without these problems.

emiloberg picture emiloberg on 17 Aug 2020
🎉1

Hallelujah! Closing this .. and hoping it stays closed 🙏

shilman picture shilman on 17 Aug 2020

@shilman so this won't be fixed in 5.3?

manuelmeister picture manuelmeister on 1 Oct 2020

@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:

npx sb upgrade

Full migration guide

shilman picture shilman on 1 Oct 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

shilman picture shilman  ·  3Comments
levithomason picture levithomason  ·  3Comments
ZigGreen picture ZigGreen  ·  3Comments
tomitrescak picture tomitrescak  ·  3Comments
tirli picture tirli  ·  3Comments