title: Yarn link React component library to app results in "Invalid Hook call" error (multiple React instances)
body: <p>I have a React app spun up with create-react-app and a React component library. I'm attempting to link the component library to the app to test the components locally. When I attempt to use a component from the library I get the error:</p>
  <pre><code>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:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  </code></pre>
  <p>I've scoured the internet (mostly <a href="https://github.com/facebook/react/issues/13991" rel="nofollow noreferrer">this issue</a>) for a solution to this and found several suggestions regarding linking the app's React dependency and using that linked React in the component library. This appeared to work for several people so I accomplished this by doing the following:</p>
  <p>In the app:</p>
  <pre><code>cd node_modules/react
  yarn link
  </code></pre>
  <p>In the library:</p>
  <pre><code>yarn link react
  yarn link
  </code></pre>
  <p>Back in the app:</p>
  <pre><code>yarn link {library_name}
  yarn start
  </code></pre>
  <p>However this results in the exact same error. I've repeated the above steps for <code>react-dom</code> as well as <code>react-bootstrap</code> since those are the other overlapping react modules between the two but still got the same results.</p>
  <p>I've also tried linking this way from the component library: <code>npm link {PATH_TO_APP}/node_modules/react</code> to the same results.</p>
  <p>I cannot use the webpack <code>alias</code> configuration due to using <code>create-react-app</code>.</p>
  <p>Here's some additional info:</p>
  <p>App dependencies:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@types/lodash&quot;: &quot;^4.14.178&quot;,
      &quot;@types/react&quot;: &quot;^17.0.37&quot;,
      &quot;@types/react-beautiful-dnd&quot;: &quot;^13.1.2&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.6&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.3.2&quot;,
      &quot;bootstrap&quot;: &quot;5.1.3&quot;,
      &quot;classnames&quot;: &quot;^2.3.1&quot;,
      &quot;lodash&quot;: &quot;^4.17.21&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-beautiful-dnd&quot;: &quot;^13.1.0&quot;,
      &quot;react-bootstrap&quot;: &quot;2.1.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-helmet-async&quot;: &quot;^1.2.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.0.1&quot;,
      &quot;react-scripts&quot;: &quot;^5.0.0&quot;,
      &quot;sass&quot;: &quot;^1.49.0&quot;,
      &quot;typescript&quot;: &quot;^4.5.5&quot;
  },
  &quot;devDependencies&quot;: {
      &quot;husky&quot;: &quot;^7.0.4&quot;,
      &quot;lint-staged&quot;: &quot;^12.3.1&quot;
  },
  </code></pre>
  <p>Library dependencies:</p>
  <pre><code>&quot;peerDependencies&quot;: {
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-bootstrap&quot;: &quot;2.1.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;
  },
  &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.16.0&quot;,
      &quot;@storybook/addon-actions&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/addon-docs&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/addon-essentials&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/addon-links&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/builder-webpack5&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/components&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/core-events&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/manager-webpack5&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/react&quot;: &quot;^6.4.7&quot;,
      &quot;@storybook/theming&quot;: &quot;^6.4.7&quot;,
      &quot;@svgr/cli&quot;: &quot;^6.0.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.3&quot;,
      &quot;husky&quot;: &quot;&gt;=6&quot;,
      &quot;lint-staged&quot;: &quot;&gt;=10&quot;,
      &quot;npm-run-all&quot;: &quot;^4.1.5&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-bootstrap&quot;: &quot;2.1.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.6&quot;,
      &quot;typescript&quot;: &quot;^4.4.4&quot;,
      &quot;webpack&quot;: &quot;^5.60.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.1&quot;
  },
  &quot;dependencies&quot;: {}
  </code></pre>
  <p>Here's the result of <code>npm ls -g --depth=0 --link=true</code>:</p>
  <pre><code>{PATH_TO_NODE}/v16.13.2/lib
  ├── react-bootstrap@2.1.0 -&gt; {PATH_TO_APP}/node_modules/react-bootstrap
  ├── react-dom@17.0.2 -&gt; {PATH_TO_APP}/node_modules/react-dom
  └── react@17.0.2 -&gt; {PATH_TO_APP}/node_modules/react
  </code></pre>
  <p>And here's the result of <code>npm ls react</code> from within the component library.</p>
  <pre><code>➜  {COMPONENT_LIBRARY} git:(first-design-system-component) ✗ npm ls react 
  {COMPONENT_LIBRARY}@1.0.5 {PATH_TOCOMPONENT_LIBRARY}
  ├─┬ @react-aria/ssr@3.1.0 extraneous
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @restart/hooks@0.4.5 extraneous
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @restart/ui@0.2.6 extraneous
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/addon-actions@6.4.7
  │ ├─┬ @storybook/addons@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/api@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ react-inspector@5.1.1
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/addon-docs@6.4.7
  │ ├─┬ @mdx-js/react@1.6.22
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/builder-webpack4@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/core@6.4.7
  │ │ ├─┬ @storybook/core-client@6.4.7
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ ├─┬ @storybook/core-server@6.4.7
  │ │ │ ├─┬ @storybook/manager-webpack4@6.4.7
  │ │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/preview-web@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/source-loader@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/store@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ react-element-to-jsx-string@14.3.4
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/addon-essentials@6.4.7
  │ ├─┬ @storybook/addon-backgrounds@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/addon-controls@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/addon-measure@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/addon-outline@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/addon-toolbars@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/addon-viewport@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/addon-links@6.4.7
  │ ├─┬ @storybook/router@6.4.7
  │ │ ├─┬ react-router-dom@6.0.2
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ ├─┬ react-router@6.0.2
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/builder-webpack5@6.4.7
  │ ├─┬ @storybook/client-api@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/core-common@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/components@6.4.7
  │ ├─┬ markdown-to-jsx@7.1.3
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ react-colorful@5.5.0
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ react-popper-tooltip@3.1.1
  │ │ ├─┬ react-popper@2.2.5
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ react-syntax-highlighter@13.5.3
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ react-textarea-autosize@8.3.3
  │ │ ├── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ ├─┬ use-composed-ref@1.1.0
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ └─┬ use-latest@1.2.0
  │ │   ├── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │   └─┬ use-isomorphic-layout-effect@1.1.1
  │ │     └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/manager-webpack5@6.4.7
  │ ├─┬ @storybook/core-client@6.4.7
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @storybook/ui@6.4.7
  │ │ ├─┬ downshift@6.1.7
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ ├─┬ react-draggable@4.4.4
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ ├─┬ react-helmet-async@1.1.2
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/react@6.4.7
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ @storybook/theming@6.4.7
  │ ├─┬ @emotion/core@10.1.1
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ @emotion/styled@10.0.27
  │ │ ├─┬ @emotion/styled-base@10.0.31
  │ │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ ├─┬ emotion-theming@10.0.27
  │ │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ prop-types-extra@1.1.1 extraneous
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├─┬ react-bootstrap@2.1.0 -&gt; {PATH_TO_APP}/node_modules/react-bootstrap
  │ ├─┬ @restart/hooks@0.4.5
  │ │ └── react@17.0.2
  │ ├─┬ @restart/ui@0.2.6
  │ │ ├─┬ @react-aria/ssr@3.1.0
  │ │ │ └── react@17.0.2 deduped
  │ │ └── react@17.0.2 deduped
  │ ├─┬ prop-types-extra@1.1.1
  │ │ └── react@17.0.2 deduped
  │ ├─┬ react-transition-group@4.4.2
  │ │ └── react@17.0.2 deduped
  │ └─┬ uncontrollable@7.2.1
  │   └── react@17.0.2 deduped
  ├─┬ react-transition-group@4.4.2 extraneous
  │ └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  ├── react@17.0.2 -&gt; {PATH_TO_APP}/node_modules/react
  └─┬ uncontrollable@7.2.1 extraneous
    └── react@17.0.2 deduped -&gt; {PATH_TO_APP}/node_modules/react
  </code></pre>