Repository: storybookjs/storybook
File: code/renderers/react/src/componentManifest/reactDocgen.ts (TypeScript)

Code before:
          logger.debug(e);
          return [];
        }
      });
  },
  { name: 'getExportPaths' }
);

const gatherDocgensForPath = cached(
  (
    path: string,
    depth: number
  ): {
    docgens: DocObj[];
    errors: { path: string; code: string; name: string; message: string }[];
  } => {
    if (path.includes('node_modules')) {
      return {
        docgens: [],
        errors: [
          {
            path,
            code: '/* File in node_modules */',
            name: 'Component file in node_modules',
            message: dedent`
              Component files in node_modules are not supported. Configure TypeScript path aliases to map your package name to the source file instead.

              Example (tsconfig.json):
              {
                "compilerOptions": {
                  "baseUrl": ".",
                  "paths": {
                    "@design-system/button": ["src/components/Button.tsx"],
                    "@design-system/*": ["src/components/*"]
                  }
                }
              }

              Then import using:
              import { Button } from '@design-system/button'

              Storybook resolves tsconfig paths automatically.
            `,
          },
        ],
      };
    }

    let code;
    try {
      code = cachedReadFileSync(path, 'utf-8') as string;

Review comment (suggestion):
it might not be obvious to users in monorepos why `node_modules` is even a part of this. If you just have your Storybook project and the DS project, and you just import with the DS package name, you might actually not realize that it goes through `node_modules`.

can we add an extra hint here? something like _"When importing components via the package name in a monorepo, that will usually only import the distributed files via `node_modules`, which won't contain the necessary comments or types."_

Code after:
          logger.debug(e);
          return [];
        }
      });
  },
  { name: 'getExportPaths' }
);

const gatherDocgensForPath = cached(
  (
    path: string,
    depth: number
  ): {
    docgens: DocObj[];
    errors: { path: string; code: string; name: string; message: string }[];
  } => {
    if (path.includes('node_modules')) {
      return {
        docgens: [],
        errors: [
          {
            path,
            code: '/* File in node_modules */',
            name: 'Component file in node_modules',
            message: dedent`
              Component files in node_modules are not supported.
              The distributed files in node_modules usually don't contain the necessary comments or types needed to analyze component information.
              Configure TypeScript path aliases to map your package name to the source file instead.

              Example (tsconfig.json):
              {
                "compilerOptions": {
                  "baseUrl": ".",
                  "paths": {
                    "@design-system/button": ["src/components/Button.tsx"],
                    "@design-system/*": ["src/components/*"]
                  }
                }
              }

              Then import using:
              import { Button } from '@design-system/button'

              Storybook resolves tsconfig paths automatically.
            `,
          },
        ],
      };
    }

    let code;