storybook: Storybook 4 error: cannot assign to read only property 'exports' of object '#'

Bug or support request summary

Storybook 4, Webpack 4, Babel 7 throws this error after running yarn storybook:

image

It looks like Storybook/Webpack is parsing content from the react directory in the node_modules directory of my shared-components package.

Steps to reproduce

Run yarn storybook in project directory and then visit http://localhost:6006/.

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

Affected platforms

Code Snippets

.storybook/webpack.config.js

module.exports = {
  plugins: [
  ],
  module: {
    rules: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpe?g|gif)$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
};

babel.config.js

module.exports = function (api) {
  const presets = ["@babel/preset-flow", "@babel/preset-react"];
  const plugins = ["@babel/plugin-transform-strict-mode", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-function-bind", "@babel/plugin-proposal-object-rest-spread"];

  api.cache(true);

  return {
    presets,
    plugins
  };
}

index.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from '../shared-components/button/src/components/Button';

storiesOf('Button', module)
  .add('Primary, link, target blank', () => (
    <Button actionType='link' action='https://google.com' target='_blank' style='primary' name='Hello world' />
  ))
  .add('Primary, Callback', () => (
    <Button actionType='callback' action={action('button-click')} style='primary' name='Hello world' />
  ))
  .add('Secondary, link', () => (
    <Button actionType='link' action='https://google.com' style='secondary' name='Hello world' />
  ))
  .add('Action, link', () => (
    <Button actionType='link' action='https://google.com' style='action' name='Hello world' />
  ));

Button.js

import React from 'react'; // eslint-disable-line no-unused-vars

import '../styles/button.css';

const Button = (props) => {
  if (props.actionType !== 'link' && props.actionType !== 'callback') {
    return 'Unrecognized action type';
  }

  return (
    props.actionType === 'link' ?
        <a href={props.action} target={props.target} className={`df-button ${props.style}`}>
          {props.name}
        </a> :

        <button onClick={props.action} className={`df-button ${props.style}`} >
          {props.name}
        </button>
  );
};

export default Button;

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 2
  • Comments: 18 (9 by maintainers)

Most upvoted comments

I had to go through all rules and exclude node_modules. Guess it depends on which node modules you have installed in your packages.

       // Exclude node_modules, otherwise storybook will throw runtime errors
        var nodeModules = /.*\/packages\/.*\/node_modules/;
        console.log('Excluding files:', nodeModules);

        config.module.rules.forEach(rule => {
          if (rule.exclude) {
            rule.exclude.push(nodeModules);
          } else {
            rule.exclude = [nodeModules];
          }
        });

        return config;
+3
fyyyyy on Apr 30, 2020

Would you be able to verify this is fixed in v6 beta?

+1
ndelangen on Jun 8, 2020

The babel-loader rule is for compiling JSX into Javascript.

Storybook already contains this rule. Try to use “full control mode” to modify webpack to something like this:

//.storybook/webpack.config.js
module.exports = (config) => {
  const jsRule = config.module.rules.find(/* find existing js rule */);
  jsRule.exclude = /node_modules/
}
+1
igor-dv on Sep 10, 2018
Read more comments on GitHub
← storybook: Storybook 3.2 is failing to build static export
storybook: Storybook 4 migration addon-knobs is not working →