I am with a Next.ts and React project with a storybook (V for the component visualization topic.

When I have everything installed with pnpm install and my nodes_module appears, I want to start the storybook, but for some unknown reason I get that the @storybook/react-docgen-typescript-plugin folder is not found in the nodes module

It is as if it did not exist and in the pnpm-lock I have it set so that it is installed automatically with the pnpm install, but it does not work

I have been looking for information but I have not found much information, only the option of:

typescript: { reactDocgen: false
},

in the main.tsx of the storybook but of course the components that I am creating cannot be seen at all well. I have also tried to install it manually but of course it gives me quite a few errors.

For example, my colleague has the same files as me but he is not having any problems with the storybook/react-docgen-typescript-plugin

Any solution? I leave you here the main.tsx of the storybook and the version that appears in the pnpm-lock

Main.tsx

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/stories.tsx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
    '@storybook/addon-styling-webpack',
    '@storybook/addon-themes',
  ],
  staticDirs: ['../public'],
  framework: {
    name: '@storybook/nextjs',
    options: {
      builder: {
        /**
         * Experimental SWC support
         * See: https://storybook.js.org/recipes/next#experimental-swc-support
         */
        useSWC: true,
      },
    },
  },
  docs: {
    autodocs: 'tag',
  },
  // eslint-disable-next-line @typescript-eslint/require-await
  async webpackFinal(webpackConfig) {
    const imageRule = webpackConfig.module?.rules?.find((rule) => {
      const test = (rule as { test: RegExp }).test;
      if (!test) return false;
      return test.test('.svg');
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    }) as { [key: string]: any };

    imageRule['exclude'] = /.svg$/;

    webpackConfig.module?.rules?.unshift({
      test: /.svg$/,
      loader: '@svgr/webpack',
      options: {
        dimensions: false,
        accessibilityRole: 'image',
        svgProps: { role: 'img' },
        svgoConfig: {
          plugins: [
            {
              name: 'addAttributesToSVGElement',
              params: {
                attributes: [{ 'aria-hidden': 'true' }, { focusable: 'false' }],
              },
            },
          ],
        },
      },
    });
    return webpackConfig;
  },
};

export default config;

version of storybook/react-docgen-typescript-plugin that appears in the pnpm-lock:

/@storybook/[email protected](@babel/[email protected])(@swc/[email protected])([email protected])([email protected])([email protected])([email protected]):
    resolution: {integrity: sha512-gn/LvIbll9loOkzwbFlxzOZGmJ6t1vF2/gfi+p/N/AifDYe8+LVM1QV4KRVKt6UEJwsQd79lKf7vPH92AQaKKQ==}
    engines: {node: '>=16.0.0'}
    peerDependencies:
      '@babel/core': ^7.22.0
      react: ^16.8.0 || ^17.0.0 || ^18.0.0
      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
      typescript: '*'
    peerDependenciesMeta:
      '@babel/core':
        optional: true
      typescript:
        optional: true
    dependencies:
      '@babel/core': 7.24.0
      '@babel/preset-flow': 7.24.0(@babel/[email protected])
      '@babel/preset-react': 7.23.3(@babel/[email protected])
      '@pmmmwh/react-refresh-webpack-plugin': 0.5.11([email protected])([email protected])
      '@storybook/core-webpack': 7.6.17
      '@storybook/docs-tools': 7.6.17
      '@storybook/node-logger': 7.6.17
      '@storybook/react': 7.6.17([email protected])([email protected])([email protected])
      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0([email protected])([email protected])
      '@types/node': 18.19.22
      '@types/semver': 7.5.8
      babel-plugin-add-react-displayname: 0.0.5
      fs-extra: 11.2.0
      magic-string: 0.30.8
      react: 18.0.0
      react-docgen: 7.0.3
      react-dom: 18.0.0([email protected])
      react-refresh: 0.14.0
      semver: 7.6.0
      typescript: 5.0.2
      webpack: 5.90.3(@swc/[email protected])([email protected])
    transitivePeerDependencies:
      - '@swc/core'
      - '@types/webpack'
      - encoding
      - esbuild
      - sockjs-client
      - supports-color
      - type-fest
      - uglify-js
      - webpack-cli
      - webpack-dev-server
      - webpack-hot-middleware
      - webpack-plugin-serve
    dev: true

The storybook versions I have:

 "@storybook/addon-a11y": "7.6.17",
    "@storybook/addon-essentials": "7.6.17",
    "@storybook/addon-interactions": "7.6.17",
    "@storybook/addon-links": "7.6.17",
    "@storybook/addon-onboarding": "1.0.11",
    "@storybook/addon-styling-webpack": "0.0.6",
    "@storybook/addon-themes": "7.6.17",
    "@storybook/blocks": "7.6.17",
    "@storybook/nextjs": "7.6.17",
    "@storybook/react": "7.6.17",
    "@storybook/test": "7.6.17",

This is the error I get when I start the storybook:

=> Failed to build the preview
Error: Cannot find package '.node_modules.pnpm@[email protected]_@[email protected]_@[email protected][email protected]_rea_ze7gqqwf44m36h4h5cl2ottghynode_modules@storybookreact-docgen-typescript-pluginpackage.json' imported from .node_modules.pnpm@[email protected]_@[email protected]_@[email protected][email protected]_rea_ze7gqqwf44m36h4h5cl2ottghynode_modules@storybookpreset-react-webpackdistframework-preset-react-docs.js
Did you mean to import "@storybook/react-docgen-typescript-plugin/dist/index.js"?

installed it manually with the nom add @pnpm add @storybook/react-docgen-typescript-plugin following the errors, giving me exactly this error:

=> Failed to build the preview
Error: Cannot find package '.node_modules.pnpm@[email protected]_@[email protected]_@[email protected][email protected]_rea_ze7gqqwf44m36h4h5cl2ottghynode_modules@storybookreact-docgen-typescript-pluginpackage.json' imported from .node_modules.pnpm@[email protected]_@[email protected]_@[email protected][email protected]_rea_ze7gqqwf44m36h4h5cl2ottghynode_modules@storybookpreset-react-webpackdistframework-preset-react-docs.js
Did you mean to import "@storybook/react-docgen-typescript-plugin/dist/index.js"?
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    at packageResolve (node:internal/modules/esm/resolve:841:14)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleLoader.import (node:internal/modules/esm/loader:322:34)
    at defaultImportModuleDynamically (node:internal/modules/esm/utils:197:36)
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:219:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Thank you so much!