storybook: Error: Plugin/Preset files are not allowed to export objects, only functions

Bug or support request summary

I tried latest Storybook @ 4.0.0-alpha.12 with latest React Scripts (Create React App) @ 2.0.0-next.3e165448 and got the following error:

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/xxx/web/node_modules/babel-preset-stage-0/lib/index.js

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/xxx/web/node_modules/babel-preset-stage-0/lib/index.js

The reason I use 2.0.0 of React Scripts is support of mono repository and Lerna.

Content of .storybook/config.js:

import {addDecorator, configure} from '@storybook/react';
import {decorator} from "../src/stories/Wrapper";

addDecorator(decorator);

configure(() => {
    var req = require.context('../src', true, /\.story\.js$/);
    req.keys().sort((a, b) => a.localeCompare(b)).map(req);
}, module);

Content of .storybook/addons.js:

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';

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

@storybook/react 4.0.0-alpha.12
@storybook/addon-something 4.0.0-alpha.12
react-scripts 2.0.0-next.3e165448
webpack @ 4.15.1

I guess it’s because 2.0.0 version is using Babel 7: https://github.com/storybooks/storybook/issues/3335

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 16 (4 by maintainers)

Most upvoted comments

create .babelrc inside storybook directory and paste the following in it. { "presets": ["module:metro-react-native-babel-preset"], } hope this helps…

+30

sidhusubhash on Feb 15, 2019

With current alpha (4.0.0-alpha.20), Babel 7 should work OK without hacks with webpack config

+17

Hypnosphi on Sep 1, 2018

@Hypnosphi I have still this kind of problem on 4.1.2

ghost on Feb 6, 2019

best solution is found is to add

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
 }

in package.json

ghobashy on Jul 2, 2019

@Hypnosphi I ran into the same issue on 4.1.2 with react native 0.58.4

I created a demo repo (new react native project from scratch): https://github.com/stigi/storybook-issue-3843/tree/master

cc @dusan-dragon

stigi on Feb 11, 2019

This is what I had to do to get it working correctly. Hope this helps

// ./storybook/webpack.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
}

package.json

"@babel/core": "^7.0.0-beta.55",
"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-knobs": "^3.4.8",
"@storybook/addon-links": "^3.4.8",
"@storybook/addon-options": "^3.4.8",
"@storybook/addons": "^3.4.8",
"@storybook/react-native": "^3.4.8",
"babel-core": "7.0.0-bridge.0",
"babel-preset-react-native": "5.0.2",

react-native run-ios && storybook start --port 9001 --skip-packager

tjbenton on Jul 31, 2018

The final look of webpack.config.js is:

const path = require('path');
const reactScriptsWebpackConfig = require('react-scripts/config/webpack.config.dev');

module.exports = (baseConfig, configType, defaultConfig) => {

    defaultConfig.module.rules.shift();

    defaultConfig.module.rules.unshift(reactScriptsWebpackConfig.module.rules[2].oneOf[1]);

    defaultConfig.module.rules.push({
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
    });

    return defaultConfig;

};

This makes sure I use same Babel config as CRA, with all the monorepo packages.

kirill-konshin on Jul 9, 2018

npm install babel-core should fix it for now, until #3746 is merged

Hypnosphi on Jul 5, 2018