storybook: Root babel.config.js not loaded

I created an empty .babelrc in the storybook config directory and it respects my root babel.config.js

Nope, babelModeV7: true didn’t make a difference

I created an empty .babelrc in the storybook config directory and it respects my root babel.config.js

Hi there, I can also recreate this issue in Storybook v6. Albeit, I solely use babel.config.js files. Likewise, my solution is to create an empty /.storybook/babel.config.js file. Afterwards, running start-storybook will respect /babel.config.js

Would love if we can get this issue patched. It would be great to not have to create an empty /.storybook/babel.config.js to get the /babel.config.js respected as desired

edit: As per this migration note from sb5, this seems intentional. Could we get this project level config back 😸

my specs: os x yarn 2.2.2 (berry) node@v12.16.3 “@storybook/addon-actions”: “^6.0.12”, “@storybook/addon-knobs”: “^6.0.12”, “@storybook/addons”: “^6.0.12”, “@storybook/react”: “^6.0.12”,

@shilman I just tried 5.1.0-rc.0 with a root babel.config.js. I get this:

❯ build-storybook
info @storybook/react v5.1.0-rc.0
info 
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
ERR! => Error parsing babel config file: JSON5: invalid character 'c' at 1:1
(node:8092) UnhandledPromiseRejectionWarning: SyntaxError: JSON5: invalid character 'c' at 1:1

A c is indeed the first character of the config.

const presetEnvOptions = {
  useBuiltIns: "usage",
  // To see which polyfills are used in which files:
  // debug: true,
};

const common = {
  presets: [["next/babel", { "preset-env": presetEnvOptions }]],
  plugins: ["lodash"],
};

module.exports = {
  env: {
    development: common,
    production: common,
    // Jest:
    test: {
      presets: [["next/babel", { "preset-env": { modules: "commonjs" } }]],
    },
  },
};

The problem comes from this line:

https://github.com/storybooks/storybook/commit/a08f44e4813ce19f9ff2670d9c1ccb312e94cb22#diff-cbcd9978dcfe6d6dafed0b1a16ee99f1R23

It checks if the entire file starts with module.exports. But the file might start with a comment, whitespace or some other code.

Workaround:

module.exports; // workaround

const presetEnvOptions = {
  useBuiltIns: "usage",
  // To see which polyfills are used in which files:
  // debug: true,
};

const common = {
  presets: [["next/babel", { "preset-env": presetEnvOptions }]],
  plugins: ["lodash"],
};

module.exports = {
  env: {
    development: common,
    production: common,
    // Jest:
    test: {
      presets: [["next/babel", { "preset-env": { modules: "commonjs" } }]],
    },
  },
};

Getting the same problem on 5.2.5. Storybook either won’t load my .babelrc in the project root, or it doesn’t like the ‘env’ options in it (e.g. production or development settings). When I duplicate the .babelrc file to my .storybook folder and remove the env stuff it works. I don’t want 2 babelrc files though!

I use extends. I think it is a good workaround now.

{
    "extends": "/path/to/your/project/babel.config.js"
}

But I still wish this bug will be fixed.

@shilman This worked as expected for me (with the option enabled and my storybook babel config removed, storybook is now using my root babel config).

My current solution is by adding rootMode options inside babel-loader webpack configuration. And it is working properly without need to create sub-package .babelrc file. 🙇‍♂️

StoryBook version: 5.3.6 Reference: https://babeljs.io/docs/en/config-files#webpack

// packages/ui/.storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  webpackFinal: async config => {
    const newConfig = {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.tsx?$/,
            use: [
              {
                loader: require.resolve('babel-loader'),
                options: {
                  rootMode: 'upward'
                }
              },
              require.resolve('react-docgen-typescript-loader')
            ],
            include: path.resolve(__dirname, '../src')
          }
        ]
      },
      resolve: {
        ...config.resolve,
        extensions: [...(config.resolve.extensions || []), '.ts', '.tsx']
      }
    };

    return newConfig;
  }
};

For me .babelrc.js was not working when I was trying to apply it for a yarn workspace subpackage. It was not even working when I tried babe.config.js. All babel config files (babelrc or babel.config.js) were being compiled when I tried to do console.log from those files, but none of them were making any effect.

I had to finally put it inside .storybook/webpack.config.js as mentioned here

Isn’t .babelrc always JSON5, and babel.config.js always JS? If so, could loadFromPath take another parameter?

That’s correct according to babel docs: https://babeljs.io/docs/en/config-files#config-format

However, don’t forget about .babelrc.js files – those are valid too.