<h2 dir="auto">Describe the bug</h2>
<p dir="auto">If I use react hooks inside a page or component<br>
<code class="notranslate">import Comp from '../../comp</code><br>
in nextjs everything work fine, if I use react hooks inside a component in an external library<br>
<code class="notranslate">import { Comp } from 'my-components</code><br>
I get this error:<br>
<code class="notranslate">Hooks can only be called inside the body of a function component</code></p>
<p dir="auto">this is my nextjs.config:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// next.config.js
const path = require('path');
const withTM = require('next-transpile-modules');

module.exports = withTM({
  useFileSystemPublicRoutes: false,
  transpileModules: ['ui-components'],
  webpack: (config, options) =&gt; {
    config.resolve.alias = {
      ...config.resolve.alias,
      'styled-components': path.resolve(__dirname, '.', 'node_modules', 'styled-components'),
      'react-dom': path.resolve(__dirname, '.', 'node_modules', 'react-dom'),
      'react': path.resolve(__dirname, '.', 'node_modules', 'react'),
    };
    return config;
  },
});
"><pre class="notranslate"><code class="notranslate">// next.config.js
const path = require('path');
const withTM = require('next-transpile-modules');

module.exports = withTM({
  useFileSystemPublicRoutes: false,
  transpileModules: ['ui-components'],
  webpack: (config, options) =&gt; {
    config.resolve.alias = {
      ...config.resolve.alias,
      'styled-components': path.resolve(__dirname, '.', 'node_modules', 'styled-components'),
      'react-dom': path.resolve(__dirname, '.', 'node_modules', 'react-dom'),
      'react': path.resolve(__dirname, '.', 'node_modules', 'react'),
    };
    return config;
  },
});

</code></pre></div>
<p dir="auto">thie is the babelrc in my app:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;next/babel&quot;
  ],
  &quot;plugins&quot;: [
    [
      &quot;styled-components&quot;,
      {
        &quot;ssr&quot;: true,
        &quot;displayName&quot;: true
      }
    ]
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ]
  ]
}
</code></pre></div>
<p dir="auto">this is the babelrc of my library:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;@babel/preset-env&quot;,
    &quot;@babel/preset-react&quot;
  ],
  &quot;plugins&quot;: [
    [
      &quot;babel-plugin-styled-components&quot;,
      {
        &quot;ssr&quot;: true,
        &quot;displayName&quot;: true
      }
    ],
    &quot;@babel/proposal-object-rest-spread&quot;
  ],
  &quot;env&quot;: {
    &quot;module&quot;: {
      &quot;presets&quot;: [
        [
          &quot;@babel/preset-env&quot;,
          {
            &quot;modules&quot;: false
          }
        ],
        &quot;@babel/preset-react&quot;
      ]
    }
  }
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ],
    "@babel/proposal-object-rest-spread"
  ],
  "env": {
    "module": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false
          }
        ],
        "@babel/preset-react"
      ]
    }
  }
}
</code></pre></div>
<p dir="auto">and this is how I build the library:<br>
<code class="notranslate">babel src --out-dir lib --extensions '.js,.jsx' --source-maps inline  --watch</code></p>
<p dir="auto">in my library I also have peerdep in my package.json</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;peerDependency&quot;: {
    &quot;styled-components&quot;: &quot;4.4.1&quot;,
    &quot;react-dom&quot;: &quot;16.8.3&quot;,
    &quot;react&quot;: &quot;16.8.3&quot;
  }"><pre class="notranslate"><code class="notranslate">  "peerDependency": {
    "styled-components": "4.4.1",
    "react-dom": "16.8.3",
    "react": "16.8.3"
  }
</code></pre></div>
<p dir="auto">Also, if I comment the imported component and I reload I don't see any error, if I remove the comment the page is reloaded with hot reload and I can see the component without error and it works fine....if I reload the page I get the error again</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS,</li>
<li>Version of Next.js: 9.1.3</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">Would it be possible to have an example that uses uses Rematch (2500+ stars) as the state management / store?</p>
<p dir="auto">Just a random request haha</p>
<p dir="auto"><a href="https://github.com/rematch/rematch/blob/master/docs/purpose.md">https://github.com/rematch/rematch/blob/master/docs/purpose.md</a></p>