"Download React DevTools" message, when not using React?
fenomas opened this issue · 15 comments
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"
}
this is because storybook itself is a React app
I take it there's no way to suppress the message?
Seems like we could actually do this https://stackoverflow.com/questions/42196819/disable-hide-download-the-react-devtools/42196820#42196820
@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.
Awesome! I'll take a look into adding this to storybook
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",
@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.
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
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!
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!
@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!
@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:
That way your conditional would be really simple.
Similar here, I'm in a Vue only project.
What is the current solution for this?
I'd really love to get rid of advertisement in my console.
Did you ever find a workaround?
I don't think so. the project is now defunct.