I've confirmed it 100% although I cannot diff the node_modules to determine how. But here's the issue.
Versions:
"react": "^16.6.3",
"react-dom": "^16.6.3",
"mobx": "^5.6.0",
"mobx-react": "^5.4.2"
"devDependencies": {
"@storybook/addon-actions": "^4.0.9",
"@storybook/addon-knobs": "^4.0.9",
"@storybook/addon-links": "^4.0.9",
"@storybook/addon-notes": "^4.0.8",
"@storybook/react": "^4.0.9"
}
When I run npm run start
before installing storybook, my application runs which has a hefty amount of necessary @observable usage. None of the observables are undefined at this point, which is great and expected.
After I run npm i --save-dev @storybook/react @storybook/addon-notes @storybook/addon-links @storybook/addon-actions @storybook/addon-knobs
and then run npm run start
again, I get a full on Failure to compile error. In my AppStore.js (which I cannot disclose) as the source of undefined variables I use the @observable decorator in. The failure message shows all of those and declared @observable in two other components using @observable as undefined.
I don't understand how adding storybook would break MobX or MobX-react at runtime. If anything, I would think that it would be npm run storybook
that would cause errors. I thought maybe it's because of webpack.config.js in .storybook directory, but I can't be sure.
Also, for anyone who would think the problem is babel plugins, it is not. I am correctly using this in the correct order:
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},
Lastly, when I run npm uninstall --save-dev @storybook/react @storybook/addon-notes @storybook/addon-links @storybook/addon-actions @storybook/addon-knobs
running npm run start
works fine!
I'll try to answer my own question here. It's difficult to determine what in node_modules from storybook is affecting runtime for Mobx in webpack config.
Please help or make any suggestion!