title: Can't import React component on server-side Next.js
body: <p>I'm trying to import a very simple component from a library into a Next.js app.</p>
  
  <p>I have stripped down my library to the bare minimum. It contains the following <code>src/components/index.js</code>:</p>
  
  <pre><code>import React from 'react'
  const Container = ({ children }) =&gt; &lt;div&gt;{children}&lt;/div&gt;
  export { Container }
  </code></pre>
  
  <p>In my Next.js app, I created a <code>pages/index.js</code> that contains the following:</p>
  
  <pre><code>import React from 'react'
  import { Container } from 'mylib'
  
  class HomePage extends React.Component {
    render() {
      return &lt;Container&gt;Hello&lt;/Container&gt;
    }
  }
  
  export default HomePage
  </code></pre>
  
  <p><code>mylib</code> is a local npm package which I have installed in my Next.js app using <code>npm i ../mylib</code>. It has a standard webpack config:</p>
  
  <pre class="lang-js prettyprint-override"><code>const path = require('path')
  
  module.exports = {
    entry: {
      components: './src/components/index.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
      libraryTarget: 'commonjs2'
    },
    mode: "production",
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          }
        }
      ],
    },
  };
  </code></pre>
  
  <p>and then the package.json points to <code>dist/components.js</code> as the main file.</p>
  
  <p>The following does work:</p>
  
  <ol>
  <li>In my Next.js app, replace <code>return &lt;Container&gt;Hello&lt;/Container&gt;</code> with <code>return &lt;div&gt;Hello&lt;/div&gt;</code> (while keeping the <code>import { Container }</code> in place)</li>
  <li>Refresh the page in the server (I'm running Next's dev server)</li>
  <li>Restore the use of <code>&lt;Container&gt;</code> (the opposite of step 1)</li>
  <li>Save the file --> hot-reload in the browser with the <code>Container</code> properly displayed (I added a className to be sure)</li>
  </ol>
  
  <p>At this point, if I refresh the browser, I get the following error:</p>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</p>
  </blockquote>
  
  <p>which suggests I made a bad import/export, but I don't know where. And the error only occurs on the server-side.</p>
  
  <p>What did I do wrong?</p>