.babelrc extends issue

[stefvhuynh]

If I have a .babelrc file in the root of my project with an extends clause, the path doesn't resolve relative to the .babelrc file. Instead, it seems like it's relative to the .storybook/config.js file.

For example, consider a directory structure like this:

.storybook/
  config.js
node_modules/
  another_module/
    .babelrc
.babelrc

And say my .babelrc at the root level has this code:

{ "extends": "./node_modules/another_module/.babelrc" }

This does not work. But if I change the code to (go up a directory first):

{ "extends": "../node_modules/another_module/.babelrc" }

it does work.

I'm not entirely sure what the issue is, but it seems like it would be more intuitive to be able to use paths relative to the root when using the root .babelrc file.

Of course a solution could be to copy the contents of my root .babelrc to .storybook/ and make paths relative to that directory (thanks to #149), but then I would need to maintain two .babelrc files.

[sethkinast]

I'll have to look into how extends works (I wasn't aware it existed) but I should be able to fix this up.

[stefvhuynh]

Ok, great!

As an update, when I put a .babelrc file in .storybook/ and use extends from there, I can get past the initial issue that I reported above. However, when my components start requiring each other, I run into the same issue but from my components' directory.

[Sawtaytoes]

In ESLint's config, there's an extends prop as well, but it takes an array of either absolute paths or packages in node_modules/.

Other than an option under Babel CLI's config (https://babeljs.io/docs/usage/api/#options), I can't find anything in the docs relating to this configuration under .babelrc in the docs (https://babeljs.io/docs/usage/babelrc/).

To clarify my own issue, I'd like some way of sharing a .babelrc among various projects.

[JabbyPanda]

https://babeljs.io/docs/en/config-files/#project-wide-configuration