title: Importing a component library using react in Storybook
body: <p>I have two projects: one is a component library called simply '@loonslanding/components'. The other is a storybook project. Inside of the components library, I have the following in <code>src/index.js</code>:</p>
  <pre><code>import React, { Component } from 'react';
  
  class Button extends Component {
    render () {
      return (
        &lt;button&gt;{this.props.label}&lt;/button&gt;
      );
    }
  }
  
  export default Button;
  </code></pre>
  <p>I build this using webpack and babel with the following <code>webpack.config.js</code>:</p>
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
      filename: 'index.bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',
          ],
        }
      ]
    }
  };
  
  </code></pre>
  <p>I then link my js module using <code>yarn link</code> in the components directory and run <code>yarn link @loonslanding/components</code> in my storybook directory. I have a single story in storybook, called <code>button.stories.js</code>:</p>
  <pre><code>import Button from &quot;@loonslanding/components&quot;;
  
  import { action } from '@storybook/addon-actions';
  
  import React from 'react';
  
  export default {
    component: Button,
    title: `Atoms/Button`
  };
  
  export const Standard = () =&gt; &lt;Button onClick={action('clicked')} label={&quot;Standard Button&quot;}&gt;&lt;/Button&gt;;
  </code></pre>
  <p>When I run <code>yarn storybook</code>, I get the following error message:</p>
  <pre><code>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  
  Check the render method of `storyFn`.
  </code></pre>
  <p>This seems like a pretty common error, and I've researched it over the past few hours, but I don't think I've actually mixed up named and default exports/imports. When I attempt to import the components project into a different project (e.g. a react application other than Storybook), it gives me a similar exception. This leads me to believe that something is wonky with how Babel is transpiling the components module. Thoughts on what I might be doing incorrectly?</p>