title: Storybook - Cannot Mock a Nested React-Router-Dom Link without throwing endless NPM errors
body: <p>I am trying to implement StorybookJS into a SSR React app. Basic components work fine (button, headers etc). But anything that <em>nests</em> using dependencies like <code>react-router-dom</code> breaks.</p>
  <p>Example:
  We have a custom built <code>&lt;Link /&gt;</code> component that manages external links with a ternary. The external links flip to <code>&lt;a href=</code> while internals use react-router-dom's <code>&lt;Link&gt;</code> imported as <code>&lt;ReactLink /&gt;</code>. That code is like this:</p>
  <pre><code>// src/client/components/link/Link.js 
  
  import { Link as ReactLink } from &quot;react-router-dom&quot;;
  import { isLinkExternal } from &quot;services/utils&quot;;
  
  export const Link = ({ href, children = null, ...props }) =&gt; {
  
    return isLinkExternal(href) ? (
      &lt;a href={href} {...props}&gt;
        {children}
      &lt;/a&gt;
    ) : (
      &lt;ReactLink to={href} {...props}&gt;
        {children}
      &lt;/ReactLink&gt;
    );
  };
  
  </code></pre>
  <p>The StorybookJS file for it looks like this:-</p>
  <pre><code>// link.stories.js
  
  import React from &quot;react&quot;;
  import { Link } from &quot;./Link&quot;; // importing my component
  
  export default {
    title: &quot;My Components/Link&quot;,
    component: Link, // assigning my component
  };
  
  export const MyStoryBookLink = () =&gt; &lt;Link href=&quot;/foo&quot;&gt;I am a link&lt;/Link&gt;;
  </code></pre>
  <p>Now, when i run Storybook it throws a load of errors, here are the recurring/main ones:-</p>
  <pre><code>ERROR in ./node_modules/redis-parser/lib/hiredis.js
  Module not found: Error: Can't resolve 'hiredis' in '/Users/me/Documents/my-proj/node_modules/redis-parser/lib'
  ...
  ...
  @ ./.storybook/generated-stories-entry.js
  </code></pre>
  <p>I haven't touched anything redis / hiredis related and there is no such file as <code>generated-stories-entry.js</code>. The app works perfectly in Dev and Production so this is exclusively a Storybook env issue.</p>
  <p>Next error down:</p>
  <pre><code>ERROR in ./node_modules/cache-manager-ioredis/node_modules/ioredis/lib/connectors/connector.js
  Module not found: Error: Can't resolve 'net' in '/Users/me/Documents/myProject/node_modules/cache-manager-ioredis/node_modules/ioredis/lib/connectors'
  </code></pre>
  <p>Again, Though we <em>are</em> using <code>cache-manager-ioredis</code>, no idea why this is suddenly missing a module if it works fine on the app itself and all i'm trying to do is render a .</p>
  <p>Next one:</p>
  <pre><code>Module not found: Error: Can't resolve 'tls' in cache-manager-ioredis
  </code></pre>
  <p>Same thing again^^</p>
  <p>Then i get a load of these:</p>
  <pre><code>     /Users/me/Documents/myProj/__mocks__/hiredis doesn't exist
              .mjs
                /Users/me/Documents/myProj/__mocks__/hiredis.mjs doesn't exist
              .js
                /Users/me/Documents/myProj/__mocks__/hiredis.js doesn't exist
              .jsx
                /Users/me/Documents/myProj/__mocks__/hiredis.jsx doesn't exist
              .ts
                /Users/me/Documents/myProj/__mocks__/hiredis.ts doesn't exist
              .tsx
                /Users/me/Documents/myProj/__mocks__/hiredis.tsx doesn't exist
              .json
                /Users/me/Documents/myProj/__mocks__/hiredis.json doesn't exist
              .cjs
                /Users/me/Documents/myProj/__mocks__/hiredis.cjs doesn't exist
  </code></pre>
  <p>Suggests it's looking for mocks to cover these sub sub sub dependencies, wherever they're needed.</p>
  <p>I get the same for <code>net</code> and <code>tls</code>.</p>
  <p>Finally, I get some:</p>
  <pre><code>Field 'browser' doesn't contain a valid alias configuration
  </code></pre>
  <p>I'm thinking somewhere in the depths of using <code>react-router-dom/Link</code> it is trying to find these, and they would only be there if webpack dev server / hot reloading made them accessible, OR if they were transpiled to be accessible from the production bundle.</p>
  <p>But how do I mock these out? And is there an easy way to do it rather than manually mocking every sub dependency?</p>
  <p>I have tried:</p>
  <ol>
  <li><p>adding <code>__mocks__/react-router-dom.js</code> with an <code>export const Link = ({props}) =&gt; &lt;div&gt;{children}&lt;/div&gt;</code> but it doesnt seem to kick in.</p>
  </li>
  <li><p>adding <code>alias</code> logic to <code>.storybook/main.js</code>:</p>
  </li>
  </ol>
  <pre><code>webpackFinal: (config) =&gt; {
      config.resolve.alias['react-router-dom'] = require.resolve('../__mocks__/react-router-dom.js');
      return config;
    },
  </code></pre>
  <p>Again, nothing seems to change.</p>
  <ol start="3">
  <li><p>using the <code>storybook-react-router</code> pkg but this seems quite old now, it configs to an old <code>config.js</code> file rather than <code>main.js</code> and uses the older <code>storiesOf</code> syntax. Also couldn't get to do anything.</p>
  </li>
  <li><p>manually installed <code>tls</code>, <code>hiredis</code> etc as <code>--save-dev</code> dependencies. But this seems hack. Why are these modules missing?</p>
  </li>
  </ol>
  <p>I cannot believe Storybook is this hard to use, more likely I'm overlooking something. I just want to mock something as common and basic as a  from RRD.</p>
  <p>What am I doing wrong? What am I missing?</p>