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]

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: South-Paw/react-vector-maps@ad04a18

[github-actions]

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

[ndelangen]

I'm planning to fix this one for 6.x:
#14425

But then we'll have to really figure out what we want to do for 7.0
There's a ton of issues relating to babel:
https://github.com/storybookjs/storybook/issues?q=is%3Aissue+is%3Aopen+babel+sort%3Acomments-desc

A lot of them is because in the past (and still to some degree) storybook mixes the babel config for the preview and manager.
I think we could simplify the preview's babel config to essentially no config at all, and have babel figure it out.

@shilman Perhaps we need some "babel config in 7.0" milestone, and discuss options?

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.33 containing PR #15928 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[florianmartens]

@shilman for users not familiar with the source code, could you give a little more info about ignoring a root .babelrc. What would we need to do to (as the name of the issue) suggests "disable loading custom .babelrc". I was not able to figure this out from the PR alone.

[shilman]

@florianmartens did you already read the migration instructions?

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7

[TomFreudenberg]

Hi, I have just overload the loading function from storybook to prevent the default babel configuration from storybook and ignoring any local custom .babelrc files.

place this in front of main.js

const l = require('@storybook/core-common/dist/cjs/utils/load-custom-babel-config');
// drop current implementation
delete l['loadCustomBabelConfig'];
// set new just return default config
l.loadCustomBabelConfig = async function (configDir, getDefaultConfig) {
  return getDefaultConfig();
};

then you can adjust plugins and preset in exports like:

  babel: async (options) => {
    options.presets.push("next/babel");
    options.plugins.push("module/plugin");

    return options;
  },