Root .babelrc not being read

Describe the bug Storybook does not seem to respect my .babelrc file at the root of my project. When I copy/paste the .babelrc into my .storybook folder, it works as expected.

To Reproduce Steps to reproduce the behavior:

1. Create .babelrc file in project root
2. Run npm run storybook
3. See output
4. Copy root level .babelrc into .storybook directory
5. Run npm run storybook
6. See that output differs from step 3

Expected behavior I expect storybook to honor my .babelrc file at the project root level.

Screenshots Notice the pink background when .babelrc is in .storybook:

Notice no pink background and CSS error when .babelrc is not present:

Code snippets contents of .babelrc:

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {"runtime": "automatic", "importSource": "@emotion/react"}
        ]
    ],
    "plugins": [
        "@emotion",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
    ]
}

contents of main.js from .storybook:

const path = require('path');
module.exports = {
    "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    console.log(config.module.rules[0].use[0])
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

System Environment Info:

System: OS: macOS 10.15.7 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Binaries: Node: 15.5.0 - ~/.nvm/versions/node/v15.5.0/bin/node npm: 7.3.0 - ~/.nvm/versions/node/v15.5.0/bin/npm Browsers: Firefox: 84.0.1 Safari: 14.0.2 npmPackages: @storybook/addon-actions: ^6.2.0-alpha.10 => 6.2.0-alpha.10 @storybook/addon-essentials: ^6.2.0-alpha.10 => 6.2.0-alpha.10 @storybook/addon-links: ^6.2.0-alpha.10 => 6.2.0-alpha.10 @storybook/react: ^6.2.0-alpha.10 => 6.2.0-alpha.10

Additional context Add any other context about the problem here.

[heyheyhello]

I’m trying to do the opposite and cannot for the life of me get Storybook to only use ./storybook/.babelrc.json and ignore the root config. I’ve tried specifying my options directly in main.js with babel: () => ({ ... }) and have used babelrc: false and multiple attempts of babelrcRoots to no avail. It’s stange how difficult it is to tell Babel to use an alternative config… I think I’ll settle for a shell script that deletes/renames the root config to something else. Yikes.

When the situation is better understood it’d be lovely to see https://storybook.js.org/docs/react/configure/babel/ updated with examples

[armandabric]

I’m facing the same problem. My root babel.config.js is ignored by storybook.

As workaround I have merge my babel configuration with the storybook one:

  babel: async (options) => {
    const babelConfig = require("./../babel.config.js");

    return { ...options, ...babelConfig };
  },

I’m using storybook v6.3.1.