Storybook: 5.0.0 uses root babel.config even if custom config is provided

Created on 7 Mar 2019  路  3Comments  路  Source: storybookjs/storybook

Describe the bug
If a project uses a babel.config.js file, there is no way to provide a custom babel config to storybook.

To Reproduce
Steps to reproduce the behavior:

  1. Create a babel.config.js file in the root directory
  2. Create a .babelrc file with overriding behavior in .storybook
  3. Start storybook
  4. See at the configuration specified in the root babel.config.js is used.

Expected behavior
Storybook prioritizes configuration files in .storybook

Code snippets
./babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [['@babel/plugin-transform-runtime']],
  env: {
    test: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
    },
  },
};

./.storybook/.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

System:

  • OS: MacOS
  • Framework: react
  • Version: 5.0.0

Additional context
I am working within a monorepo. The build process worked with the config file pasted above in version 4.x and without a custom babel config for Storybook. Perhaps the rootMode babel option was changed in version 5?

babel / webpack inactive question / support

Most helpful comment

babel.config.js is always considered to be _the_ authoritative babel config by default.

You need to tell babel that it's OK to trust your local babelrc by adding it to babelrcRoots: https://babeljs.io/docs/en/options#babelrcroots

For example, babelrcRoots: ['.', '.storybook'].

If that still doesn't work, then you should either merge both configs (by using, say, https://babeljs.io/docs/en/options#overrides) or rename your babel.config.js to .babelrc.js to make it non-authoritative.

All 3 comments

babel.config.js is always considered to be _the_ authoritative babel config by default.

You need to tell babel that it's OK to trust your local babelrc by adding it to babelrcRoots: https://babeljs.io/docs/en/options#babelrcroots

For example, babelrcRoots: ['.', '.storybook'].

If that still doesn't work, then you should either merge both configs (by using, say, https://babeljs.io/docs/en/options#overrides) or rename your babel.config.js to .babelrc.js to make it non-authoritative.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

miljan-aleksic picture miljan-aleksic  路  3Comments

alexanbj picture alexanbj  路  3Comments

levithomason picture levithomason  路  3Comments

dnlsandiego picture dnlsandiego  路  3Comments

sakulstra picture sakulstra  路  3Comments