Webpack output is empty object : <p>I want to build a react component library as a node module to then import it into different projects. But if I try to import a component it just returns an empty object.</p>

<p>button.jsx:</p>

<pre><code>import React, {Component} from 'react'

export class Button extends Component {

   render() {
       return &lt;button className='btn'&gt;Hello Button comp&lt;/button&gt;
   }
}

export default Button
</code></pre>

<p>index.js</p>

<pre><code>var Button = require('./button/button').default;

module.exports  = {
   Button: Button
}
</code></pre>

<p>webpack.config.js</p>

<pre><code>const Path = require('path');

module.exports = {
   resolve: {
      extensions: ['.js', '.jsx']
   },
   entry: {
      app: './src/components/index.js'
   },
   output: {
      path: __dirname,
      filename: 'bundle.js'
   },
   module: {
    rules: [
        {
            test: /\.jsx$/,
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'react'
                ]
            },
            exclude: /node_modules/,
            include: [
                Path.resolve(__dirname, 'src')
            ]
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'react'
                ]
            },
            exclude: /node_modules/,
            include: [
                Path.resolve(__dirname, 'src')
            ]
        }
    ]
  }
}
</code></pre>

<p>Main property in package.json is bundle.js</p>

<p>I figured out that when I import Button in a project it is just an empty object. It seems to me as if webpack doesn't bundle the index file properly. Any ideas what could be wrong here?</p>
