Add babelrc for storybook

[joshwcomeau]

When running React Storybook locally, I was getting the following error:

ERROR in ./.storybook/config.js
Module build failed: Error: Couldn't find preset "./.babelrc.js" relative to directory "/Users/joshu/work/flip-move/.storybook"

This is easy enough to understand; our .babelrc file now looks like this:

{
   "presets": ["./.babelrc.js"]
}

It appears that for some reason, Storybook config is trying to load this relative to the storybook dir, and failing to find it there.

I tried creating a new .babelrc file inside .storybook, and simply pointing it to ../.babelrc.js, but then it fails with a similar error, trying to open it from a subdirectory:

ERROR in ./stories/helpers/FlipMoveListItem.js
Module build failed: Error: Couldn't find preset "../.babelrc.js" relative to directory "/Users/joshu/work/flip-move/stories/helpers"

I tried making the path an absolute path with /.babelrc.js, no luck.

So yeah, my final solution is just to resurrect the former .babelrc, just for storybook. This is obviously kind of a gross solution!

Because it's a dev-only concern and I wanna get the major version shipped, I may just merge this and deal with it in a subsequent PR, but @Andarist or @Hypnosphi or anyone else, if you have any clues as to how to get Storybook to read .babelrc from the same relative root every time, I'd love to kill this and have both files point to the same .babelrc.js.

[Hypnosphi]

Related storybook issue: https://github.com/storybooks/storybook/issues/2610

[Hypnosphi]

There an issue for supporting .babelrc.js as well: https://github.com/storybooks/storybook/issues/2582

[Hypnosphi]

BTW you can try to leave an empty object in .storybook/.babelrc, this way the default config should apply. This should work unless we use flow or decorators in stories

[Andarist]

That's weird, in general it's babel which loads this and this works fine, I've used this pattern with combination with numerous tools. I guess storybook is trying to be clever and re-implements babel config loading on its own (and fails while doing so).

I guess this is no biggie and I'd just use this PR's solution - if it works there is no point in searching for a better solution right now. This should get fixed in storybook anyway.

babel@7 will come with 'native' .babelrc.js support, but this "hack" of proxying to it from .babelrc should just work - it's should be possible to load any plugin/preset like that from relative paths.

[Hypnosphi]

storybook is trying to be clever and re-implements babel config loading on its own (and fails while doing so).

Unfortunately that's true

[Hypnosphi]

I look at current storybook sources, and seems like it can work if we use extends instead of presets:

{
   "extends": "./.babelrc.js"
}

[joshwcomeau]

I look at current storybook sources, and seems like it can work if we use extends instead of presets

Woohoo! I had to extend the .babelrc rather than the .babelrc.js, but it works!

(also I tried just keeping it an empty object, but then it can't parse JSX since then it loads no babel presets, rather than just using Storybook defaults).

Thanks y'all, you're both awesome.