Storybook: Incompatibility with "babel-core": "^7.0.0-beta.2"

[dannyrdalton]

Hello!

The issue I am running across pertains to a mismatch between the babel-core version my project is using, and the babel-preset-react version @storybook/react is using.

As the issue title says, the babel-core dependency in my project is ^7.0.0-beta.2.

The project is using @storybook/react version ^3.2.12.

After running with yarn run storybook, and pulling up Storybook in my browser, I'm seeing the following:

ERROR in ./.storybook/config.js
Module build failed: Error: [BABEL]... /node_modules/@storybook/react/node_modules/babel-preset-react/lib/index.js.env is not supported in a preset

I understand that this is due to a mismatch between the version of babel-core in my project (^7.0.0-beta.2), and the version of babel-preset-react (^6.24.1) in the @storybook/react project.

Is there a version of Storybook I can use to resolve this issue, or any custom configuration I can provide to ensure that Storybook runs with using "babel-preset-react": "^7.0.0-beta.2"?

Thanks!

[achenwei-chwy]

have the same issue here using storybook

[rsolomon]

I'm also interested in using storybook with Babel 7. It's currently in beta, but should have a stable release soon, at which point I am sure a lot of other tools will turn down support for Babel 6.

[MrSaints]

To get around this, I decided to override the default Webpack config rules using the method described here: https://storybook.js.org/configurations/custom-webpack-config/. I can run storybook with Babel 7 now.

Example:

const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js");
const myConfig = require("../webpack.config.js");

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env);
    config.module.rules = myConfig.module.rules;
    return config;
};

[rsolomon]

@MrSaints the issue I'm having is that, even when including @babel/register in the custom webpack config, it ignores the .babelrc file so none of the presets or plugins are used. I'm not sure what else I can do to have it parse it. It's the same .babelrc I use for the main project (just in a different location), and this location is where it was working with babel6.

[MrSaints]

@rsolomon I could possibly help if you share your Webpack / Babel configuration. It is definitely picking up on my .babelrc.

[rsolomon]

{
  "presets": [
    ["@babel/preset-env", {
      "shippedProposals": true,
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"],
        "node": "current"
      }
    }],
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-syntax-export-default-from",
    "@babel/plugin-syntax-export-namespace-from",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import",
    "idx",
    "@babel/plugin-transform-strict-mode",
    "react-hot-loader/babel",
    "@babel/plugin-proposal-class-properties",
    "transform-flow-strip-types"
  ]
}

[rsolomon]

Note that exact config is picked up fine by my main app. Even changing the above to invalid config options (ex: env -> env123) does not throw errors, so it really seems like it's not even trying to parse it.

[MrSaints]

@rsolomon What's your directory structure like? And can you include your Webpack config? Did you also specify a custom Webpack config for Storybook?

[rsolomon]

The config that Storybook is using looks like this:

require('@babel/register');
const devconfig = require('path-to-app-config');

module.exports = {
  resolve: devconfig.resolve,
  module: devconfig.module,
};

The problem is that @babel/register is not doing what it's supposed to with ES6 imports, leading to this error from the imported config:

other-config.js:1
(function (exports, require, module, __filename, __dirname) { import path from 'path';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)

I had the same setup with babel 6, except using the older babel-register module.

[Hypnosphi]

Should be fixed with #2494