title: Importing functional react component from npm modules returns invalid hook call
body: <p>I have a repository created to share react components between different clients.</p>
  
  <p>A shared component looks like this:</p>
  
  <pre><code>import React from "react";
  import { useTranslation } from "react-i18next";
  import IconProjects from "../Icons/Icon_Projects";
  
  interface Props {
    links: {
      [key: string]: Link;
    };
  }
  
  interface Link {
    name: string;
    url: string;
    icon: string;
  }
  
  export function Header(props: Props) {
    const { t } = useTranslation();
    const { links } = props;
    const showIcon = (icon: string) =&gt; {
      switch (icon) {
        case "products":
          return &lt;IconCoffeePackage className="header__icon" /&gt;;
        default:
          break;
      }
    };
    return (
      &lt;header className="header"&gt;
        &lt;h1&gt;Header&lt;/h1&gt;
        &lt;ul&gt;
          {links
            ? Object.entries(links).map(([key, link]) =&gt; (
                &lt;li key={key}&gt;
                  &lt;a href={link.url}&gt;
                    {showIcon(link.icon)} {t(link.name)}
                  &lt;/a&gt;
                &lt;/li&gt;
              ))
            : ""}
        &lt;/ul&gt;
      &lt;/header&gt;
    );
  }
  </code></pre>
  
  <p>This is my folder structure for the shared repo:</p>
  
  <pre><code>- dist
  -- components
  --- Header
  ---- Header.js
  -- index.d.ts
  -- index.js
  -- node_modules
  - src
  -- components
  --- Header
  ---- Header.tsx
  -- index.ts
  node_modules
  tsconfig.json
  </code></pre>
  
  <p>My index.ts is like this:</p>
  
  <pre><code>export { Header } from "./components/Header/Header";
  </code></pre>
  
  <p>With tsconfig I create a <code>dist</code> folder:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "strictPropertyInitialization": false,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "preserve",
      "typeRoots": [
        "./node_modules/@types/",
        "./types"
      ]
    },
    "include": [
      "src"
    ]
  }
  </code></pre>
  
  <p>When I import now the Header component from my shared repo like this</p>
  
  <pre><code>import { Header } from 'shared-components';
  </code></pre>
  
  <p>I get the following error in my client:</p>
  
  <blockquote>
    <p>react.development.js:1431 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  </blockquote>
  
  <p>But this does not happen when I copy the Header component into the client directly.</p>
  
  <p>Can somebody give me a tip?</p>