Using Storybook with MobX and CRA

I’m having trouble running Storybook with MobX, i’m using create-react-app with react-app-rewired.

Here’s my babel configuration in package.json

    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],

Storybook config .storybook/config.js

import { configure } from '@storybook/react';

configure(require.context('../src', true, /\.stories\.js$/), module);

react-app-rewire configuration config-overrides.js

const {
    override,
    disableEsLint,
    addDecoratorsLegacy,
    fixBabelImports,
} = require("customize-cra");
module.exports = override(
    disableEsLint(),
    addDecoratorsLegacy(),
    fixBabelImports("react-app-rewire-mobx", {
        libraryDirectory: "",
        camel2DashComponentName: false
    }),
);

I get the following error when i run yarn run storybook :

…src\store\KeyframesStore.js: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (6:5):

The app works fine with current config, is there any missing configuration for storybook ?

[mrmckeb]

Hi @SaadRegal, I can confirm this work fine with @storybook/preset-create-react-app.

All I did was add a main.js with:

module.exports = {
  addons: ["@storybook/preset-create-react-app"]
};

I then saw another error, which was related to an import of a non-existent file (a jpg). I removed that, and everything worked as expected.

Let me know how you go with this 😃

[shilman]

You need to use the standalone preset @storybook/preset-create-react-app (if you’re not already) and configure it to use react-app-rewired.