4

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!

Franklinc
  • 423
  • 1
  • 3
  • 11

0 Answers0