Storybook: Disable loading custom .babelrc

[sergeysova]

I use babel@7. But storybook use babel@6.

ERROR in ./.storybook/config.js
Module build failed: TypeError: Cannot read property 'loose' of undefined

If I rename .babelrc all works correctly.

But babel-loader@8 wants .babelrc file when load module through alias and I can't rename config file.

Can I disable loading custom .babelrc?

[sergeysova]

If I create .storybook/.babelrc with content {}, storybook can't parse react.

But I don't want override storybook's config. I want only disable loading config from root.

[Hypnosphi]

You may want to replace our instance of babel-loader with your own:

// .strorybook/webpack.config.js

module.exports = baseConfig => {
  baseConfig.module.rules = [{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader' // this will use your `babel-loader@8`
  }];
  return baseConfig;
};

[stale[bot]]

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 60 days. Thanks!

[Robula]

This would be a nice feature. I require a .babelrc in the root to configure babel-jest in my Lerna monorepo to transpile ESM in node_modules (I'm using TypeScript throughout) and Storybook tries to use this.

{
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

[noinkling]

I'm trying to get started with Storybook in a monorepo and this is an issue for me too. As long as a root .babelrc exists, it seems impossible to use the default included Babel config. There really needs to be an option to choose between default or lookup.

As a bonus, you could then rely on babel-loader's default lookup behaviour (in Babel 6: use the closest config relative to the module) instead of looking only and specifically in the root dir. package.json configurations would also work then.

.storybook/.babelrc can be retained as an override mechanism.

[Hypnosphi]

@4.0.0-alpha.18 release of Storybook uses Babel 7 by default.

@noinkling #4077 should fix the issue: after releasing it, our default config will be merged with the one from your babelrc.js.

I'm also going to add a way to disable loading app's babel config without replicating Storybook default by providing a .storybook/babel.config.js file with following content:

module.exports = defaultConfig => defaultConfig

It will work with Babel 7 only

UPD: #4084

[igor-dv]

@Hypnosphi, can we consider this as done? Overriding babel configuration is already could be achieved with presets (although there is no documentation yet)

[Hypnosphi]

Let's close it once we document it

[StephanBijzitter]

Any chance the documentation could be added? I'm also running into this and even after reading the merged pull requests for presets I'm not quite sure what I'm expected to do.

Edit: Figured I'd browse the existing documentation. Might've been good to start with, but we all know how programmers think.

https://storybook.js.org/configurations/custom-babel-config/
An empty .babelrc inside .storybook worked for me.

[South-Paw]

I've added a .storybook/babel.config.js file with module.exports = defaultConfig => defaultConfig; but this doesn't seem to make a difference? Looks like storybook is still using my projects root .babelrc file.

How do I go about solving this...?

See: https://github.com/South-Paw/react-vector-maps/tree/dev

[Hypnosphi]

@South-Paw it was only an idea, the corresponding PR wasn't merged

I hope that @igor-dv can tell you how to do it with presets

[South-Paw]

I ended up fixing it by creating a separate .babelrc for storybook with what the defaults looked like from logging out the webpack config - this seems to have solved it.

Commit: https://github.com/South-Paw/react-vector-maps/commit/ad04a18aba13b80347535ffb2597f6dc2e2d96f6

[github-actions[bot]]

Automention: Hey @ndelangen @shilman, you've been tagged! Can you give a hand here?