Required Babel 7 error, even with babel 7 installed

If you are reporting a bug or requesting support, start here:

Support request summary

I’ve installed storybook with getstorybook in my create-react-app app, and when I run yarn run storybook, I get the following error:

Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Sure enough, If I inspect the trace, there’s a call to babel-core instead of @babel/core.

at throwVersionError (/path/to/app/node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
    at Object.assertVersion (/path/to/app/node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
    at _default (/path/to/app/node_modules/@babel/preset-env/lib/index.js:150:7)
    at /path/to/app/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /path/to/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:317:46
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/path/to/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/path/to/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/path/to/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/path/to/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/path/to/app/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/path/to/app/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/path/to/app/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/path/to/app/node_modules/babel-loader/lib/index.js:50:20)
    at /path/to/app/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/path/to/app/node_modules/babel-loader/lib/fs-cache.js:31:2

I’ve deleted node_modules, yarn.lock, reinstalled multiple times, same issue. I’ve even tried downgrading babel to 6.x, but I don’t know how to make storybook use babel 6.x.

How can I fix this?

Please specify which version of Storybook and optionally any affected addons that you’re running

   "@babel/core": "^7.0.0-beta.53",
    "@babel/plugin-proposal-function-bind": "^7.0.0-beta.53",
    "@babel/preset-env": "^7.0.0-beta.53",
    "@babel/preset-stage-2": "^7.0.0-beta.53",
    "@babel/runtime": "^7.0.0-beta.53",
    "@storybook/addon-actions": "^3.4.8",
    "@storybook/addon-links": "^3.4.8",
    "@storybook/addons": "^3.4.8",
    "@storybook/react": "^3.4.8",

[bmcallis]

The issue here is that the webpack sonfig that storybook uses is using the babel-loader for version 6. But it’s still using your babelrc which has plugins for babel 7. To work around the issue I pushed a rule onto their config specifying the babel-loader that I’m actually using, which is babel 7.

const { resolve } = require('path');
const babelrc = require('../.babelrc');

module.exports = storybookBaseConfig => {
  storybookBaseConfig.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      use: [
        {
          loader: resolve(__dirname, '../', 'node_modules', 'babel-loader'),
          options: {
            cacheDirectory: true,
            ...babelrc,
          },
        },
      ],
      exclude: /node_modules/,
    }
  );

  return storybookBaseConfig;
};

Webpack will then use the babel 7 loader first, but it’ll still run the code through the babel 6 loader as well.

[alixeb]

with "babel-core": "^7.0.0-bridge.0"

ERROR in ./.storybook/config.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/xxx/node_modules/babel-preset-stage-0/lib/index.js
    at createDescriptor (/Users/xxx/node_modules/@babel/core/lib/config/config-descriptors.js:179:11)

// storybook/config.js

import { configure } from '@storybook/react'

const req = require.context('../src/components', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);