Storybook - 无法在不抛出无尽的 NPM 错误的情况下模拟嵌套的 React-Router-Dom 链接

Question

I am trying to implement StorybookJS into a SSR React app. Basic components work fine (button, headers etc). But anything that nests using dependencies like react-router-dom breaks.

Example: We have a custom built <Link /> component that manages external links with a ternary. The external links flip to <a href= while internals use react-router-dom's <Link> imported as <ReactLink /> . That code is like this:

// src/client/components/link/Link.js 

import { Link as ReactLink } from "react-router-dom";
import { isLinkExternal } from "services/utils";

export const Link = ({ href, children = null, ...props }) => {

  return isLinkExternal(href) ? (
    <a href={href} {...props}>
      {children}
    </a>
  ) : (
    <ReactLink to={href} {...props}>
      {children}
    </ReactLink>
  );
};

The StorybookJS file for it looks like this:-

// link.stories.js

import React from "react";
import { Link } from "./Link"; // importing my component

export default {
  title: "My Components/Link",
  component: Link, // assigning my component
};

export const MyStoryBookLink = () => <Link href="/foo">I am a link</Link>;

Now, when i run Storybook it throws a load of errors, here are the recurring/main ones:-

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

I haven't touched anything redis / hiredis related and there is no such file as generated-stories-entry.js . The app works perfectly in Dev and Production so this is exclusively a Storybook env issue.

Next error down:

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'

Again, Though we are using cache-manager-ioredis , 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.

Next one:

Module not found: Error: Can't resolve 'tls' in cache-manager-ioredis

Same thing again^^

Then i get a load of these:

     /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

Suggests it's looking for mocks to cover these sub sub sub dependencies, wherever they're needed.

I get the same for net and tls .

Finally, I get some:

Field 'browser' doesn't contain a valid alias configuration

I'm thinking somewhere in the depths of using react-router-dom/Link 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.

But how do I mock these out? And is there an easy way to do it rather than manually mocking every sub dependency?

I have tried:

1. adding __mocks__/react-router-dom.js with an export const Link = ({props}) => <div>{children}</div> but it doesnt seem to kick in.

2. adding alias logic to .storybook/main.js :

webpackFinal: (config) => {
    config.resolve.alias['react-router-dom'] = require.resolve('../__mocks__/react-router-dom.js');
    return config;
  },

Again, nothing seems to change.

3. using the storybook-react-router pkg but this seems quite old now, it configs to an old config.js file rather than main.js and uses the older storiesOf syntax. Also couldn't get to do anything.

4. manually installed tls , hiredis etc as --save-dev dependencies. But this seems hack. Why are these modules missing?

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.

What am I doing wrong? What am I missing?

Answer 1

I think I found the reason. It is because of node.js packages. To make it work, there are 2 solutions.

1. avoid importing node.js packages (usually related to SSR) for storybook related code. I use NX to structure my code, so I can easily move those part to its own library and only reference it from the top. (No storybook for the top App either in this solution)

2. skip those packages in the config.

something like

config.resolve.fallback = { http: false, net: false, tls: false, fs: false, dns: false, path: false };