Using Storybook with MobX and CRA

[SaadRegal]

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 ?

[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.

[zhigang1992]

sry, how to do that?

Setting scriptsPackageName to react-app-rewired doesn't seems to work.

@shilman

[roman-balzer]

Adding scriptsPackageName: 'react-app-rewired' leads to following Error
ERR! Error: Cannot find module '/mnt/c/dev/mh/projects/egshop-app/node_modules/react-app-rewired/bin/index.js/config/webpack.config'

Using path.resolve does not work scriptsPackageName: path.resolve("../node_modules/react-app-rewired"),
will print WARN A scriptsPackageName was provided, but couldn't be resolved.

[shilman]

cc @mrmckeb

[mrmckeb]

@SaadRegal, this is not officially supported by CRA, and we do a best-effort to support customisations like the one you're using. I think we'll be able to find a fix in this case ;)

The scriptsPackageName is for forks of react-scripts. Unfortunately, react-app-rewired is not compatible with this approach.

Are you able to supply a reproducible demo for me to take a look at?

Also, have you tried adding a .babelrc to your Storybook directory with the config you need?

[mrmckeb]

Also, as we don't support react-app-rewired or customize-cra (and others) directly, files like config-overrides.js won't work.

If you need something more than Babel plugins (again, .babelrc should work fine), you can intercept the Webpack config yourself. You can find out more about this feature here:
https://storybook.js.org/docs/configurations/custom-webpack-config/

The CRA team recommend creating a fork of CRA for the best experience with (amazing) tools like Storybook. That's what most of the team members do (including myself).

[shilman]

@mrmckeb That doesn't answer the question about what might have broken:

I think getting a CRA fork working and the mobx/decorator thing are actually two separate issues.

[SaadRegal]

@SaadRegal, this is not officially supported by CRA, and we do a best-effort to support customisations like the one you're using. I think we'll be able to find a fix in this case ;)

The scriptsPackageName is for forks of react-scripts. Unfortunately, react-app-rewired is not compatible with this approach.

Are you able to supply a reproducible demo for me to take a look at?

Also, have you tried adding a .babelrc to your Storybook directory with the config you need?

@mrmckeb
i tried adding babel.rc under .storybook/ didn't work, Here's a demo of the error :

https://gitlab.com/saadregal/mobx-sb-error-demo

[mrmckeb]

I'm working on this and will test against your repo ASAP :)

[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 :)

[SaadRegal]

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 :)

Yes, adding that to .storybook/main.js solved it. Thanks !

[val-o]

Having the same issue with unejected CRA,
SyntaxError: /Users/valikhan.akhmedov/Documents...: Decorators are not enabled. If you are using ["@babel/plugin-proposal-decorators", { "legacy": true }], make sure it comes *before* "@babel/plugin-proposal-class-properties" and enable loose mode, like so:

Just updated to storybok 5.3.8 and using "@storybook/preset-create-react-app", but this issue still appears...

[val-o]

What has worked for me, is removing new separate "preset-create-react-app" and rely on old built-in one, althought I am getting deprication warnings it compiles everything without decorator errors

[shilman]

cc @mrmckeb

[mrmckeb]

@AkhmedovValikhan are you able to provide any more information (or repro repo)? Do you have a babel config anywhere in that project?

[richardwardza]

I had the same that I managed to solve with #6069 (comment)