Storybook: "Download React DevTools" message, when not using React?

[andyhall]

Hi,

I'm using storybook for Vue, just starting out with a minimal project, and I get the following message bolded in the browser console on every page refresh:

Download the React DevTools for a better development experience: https://fb.me/react-devtools
react-dom.development.js:19707

Nothing related to React is in the project, just @storybook/vue and various Vue packages. Is this message a bug, or is there a convenient way to hide it? Thanks!

---

System:

• MacOS / macbook / Chrome 69

Dependencies for the reproducing project:

  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@storybook/addon-knobs": "^4.0.9",
    "@storybook/vue": "^4.0.7",
    "babel-loader": "^8.0.4",
    "babel-preset-vue": "^2.0.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17"
  }

[stof]

this is because storybook itself is a React app

[andyhall]

I take it there's no way to suppress the message?

[hipstersmoothie]

Seems like we could actually do this https://stackoverflow.com/questions/42196819/disable-hide-download-the-react-devtools/42196820#42196820

[andyhall]

@hipstersmoothie Thanks, this is working for me! No idea if it would make sense for storybook to do it automatically, but adding

    plugins: [
        new webpack.DefinePlugin({
            '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
        }),
    ],

to my .storybook/webpack.config.js suppressed the message.

[hipstersmoothie]

Awesome! I'll take a look into adding this to storybook

[andyhall]

Hi, after updating to storybook@latest, the above no longer suppresses the message for me.

    "@storybook/addon-knobs": "^4.1.2",
    "@storybook/vue": "^4.1.3",

[igor-dv]

@ndelangen, @shilman, I assume this is a side effect of the preview/manager split, right?
I think we just need to suppress this from the manager by default.

[ndelangen]

i think __REACT_DEVTOOLS_GLOBAL_HOOK__ is also used by the devTools to make the devTools work across frame boundaries...

So we need to conditionally add it.

Right now it's added in: lib/core/src/server/templates/base-manager-head.html

[stale[bot]]

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]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[niedzielski]

@ndelangen, sorry to resurface an old issue. I am also seeing this in a Vue-only project. What should the conditional be? Maybe:

const isDisabled =
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.isDisabled;
if (!isDisabled && window.top !== window) {
  try {
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  } catch (e) {
    // eslint-disable-next-line no-console
    console.warn('unable to connect to top frame for connecting dev tools');
  }
}

This messaging is misleading for people of all backgrounds but especially those who may be new to development so I would like to fix it. Thank you for your help!

[ndelangen]

@niedzielski the correct story contains a parameter called framework But I assume that's not going to be available in time.

I propose we add __STORYBOOK_FRAMEWORK as a global here:
https://github.com/storybookjs/storybook/blob/0e21344abe80610c11ecd0aa5f6ddd26b5415a01/lib/core/src/server/manager/manager-webpack.config.js#L87

That way your conditional would be really simple.