Storybook: Required Babel 7 error, even with babel 7 installed

Created on 13 Jul 2018 · 13Comments · Source: storybookjs/storybook

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",

inactive

Source

c10b10

👍3

Most helpful comment

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.

bmcallis on 14 Jul 2018

👍2

All 13 comments

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.

bmcallis on 14 Jul 2018

👍2

Is this pushed rule be part of a new version?

c10b10 on 17 Jul 2018

It looks like it. Based on this PR, storybook 4 will use babel 7 by default #3746

bmcallis on 17 Jul 2018

🎉1

This works for me on a Mac but not on Windows 😅

"react-scripts": "^2.0.0-next.3e165448",
"@babel/core": "7.0.0-beta.42",
"@storybook/react": "^3.4.8",
"babel-core": "^6.26.3"

with .babelrc in .storybook folder

{
  "presets": ["env", "stage-0", "react"]
}

Looks like npm test needs babel 7 and npm run storybook needs babel 6

alixeb on 2 Aug 2018

"babel-core": "^6.26.3"

Please try installing [email protected] instead

Hypnosphi on 2 Aug 2018

👍1

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);

alixeb on 3 Aug 2018

😄1

@alixeb do you also use this webpack config? https://github.com/storybooks/storybook/issues/3883#issuecomment-405028154

Hypnosphi on 3 Aug 2018

@Hypnosphi I don't define a webpack config as I am using "react-scripts": "^2.0.0-next.3e165448" which abstract this for me.

alixeb on 7 Aug 2018

You might need it in .storybook directory. It won't affect your main app

Hypnosphi on 7 Aug 2018

@Hypnosphi Do you also need to maintain the stage presets as I've removed them and I'm using the individual proposals instead. .storybook/wepback.config.js:

module.exports = (baseConfig, env, defaultConfig) => {
    // this is how storybook shows to do it in their docs so it has to be reassigned
    // add support for `.js`, `.mjs`, `.jsx`
    defaultConfig.module.rules[0].test = /\.m?jsx?$/
    defaultConfig.resolve.extensions = ['.js', '.jsx', '.mjs']

    // use babel-preset-react-native instead of storybook config
    // defaultConfig.module.rules[0].query.presets = [require.resolve('babel-preset-react-native')]
    // remove extra plugins since they don't work with babel 7, otherwise it will error
    defaultConfig.module.rules[0].query.plugins = []

    return defaultConfig
}

Dev dependencies installed, note the library is built using rollup so there is no webpack config for the main app. Still running into the issues listed above.

    "devDependencies": {
        "@babel/core": "7.0.0-rc.1",
        "@babel/plugin-external-helpers": "7.0.0-rc.1",
        "@babel/plugin-proposal-class-properties": "7.0.0-rc.1",
        "@babel/plugin-proposal-decorators": "7.0.0-rc.1",
        "@babel/plugin-proposal-export-namespace-from": "7.0.0-rc.1",
        "@babel/plugin-proposal-function-sent": "7.0.0-rc.1",
        "@babel/plugin-proposal-json-strings": "7.0.0-rc.1",
        "@babel/plugin-proposal-numeric-separator": "7.0.0-rc.1",
        "@babel/plugin-proposal-throw-expressions": "7.0.0-rc.1",
        "@babel/plugin-syntax-dynamic-import": "7.0.0-rc.1",
        "@babel/plugin-syntax-import-meta": "7.0.0-rc.1",
        "@babel/preset-env": "7.0.0-rc.1",
        "@babel/preset-react": "7.0.0-rc.1",
        "@sambego/storybook-state": "1.0.7",
        "@storybook/addon-centered": "3.4.8",
        "@storybook/addon-info": "3.4.8",
        "@storybook/addon-options": "3.4.8",
        "@storybook/addon-viewport": "3.4.8",
        "@storybook/react": "3.4.8",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "8.2.6",
        "babel-jest": "^23.4.0",
        "babel-plugin-transform-react-remove-prop-types": "0.4.14",
        "concurrently": "3.6.0",
        "cross-env": "5.2.0",
        "enzyme": "3.3.0",
        "enzyme-adapter-react-16": "1.1.1",
        "eslint": "4.19.1",
        "eslint-config-airbnb": "16.1.0",
        "eslint-plugin-import": "2.13.0",
        "eslint-plugin-jest": "21.18.0",
        "eslint-plugin-jsx-a11y": "6.1.1",
        "eslint-plugin-react": "7.10.0",
        "jest": "23.4.1",
        "moment": "2.22.2",
        "now": "11.3.1",
        "np": "3.0.4",
        "opn-cli": "3.1.0",
        "prettier-eslint": "8.8.2",
        "prop-types": "15.6.2",
        "react-tap-event-plugin": "3.0.3",
        "react-test-renderer": "16.4.1",
        "reflexbox": "3.0.1",
        "rollup": "0.60.1",
        "rollup-plugin-babel": "^4.0.0-beta.2",
        "rollup-plugin-commonjs": "9.1.3",
        "rollup-plugin-eslint": "4.0.0",
        "rollup-plugin-node-resolve": "3.3.0",
        "rollup-plugin-terser": "1.0.1",
        "shortid": "2.2.12"
    },

artivilla on 20 Aug 2018

@artivilla you probably need to install babel-loader@8 and replace the default js loader with it

Hypnosphi on 24 Aug 2018

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

stale[bot] on 14 Sep 2018

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 14 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings