No sé cómo funciona para usted en su aplicación habitual (como cuál es su configuración), pero si pondrá su cwd (asumiendo -> cwd/src/components/.... ) en resolve.modules en el webpack.config extendido, probablemente debería resolver su problema (aunque lo he comprobado con una aplicación Angular, pero realmente no importa)

Mi archivo .storybook/webpack.config.js se describe a continuación.
¿Hay algún problema aquí?

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env);

    config.module.rules.push({
        test: /\.(ts|tsx)?$/,
        exclude: /node_modules/,
        include: [/stories/, /src/],
        loader: 'ts-loader'
    });
    config.resolve.extensions.push('.ts', '.tsx');

    return config;
};

Intente agregar algo como esto:

const path = require('path');

// blah blah code

module.exports = (baseConfig, env) => {

  // blah blah code

  config.resolve.modules = [
    ...(config.resolve.modules || []),
    path.resolve('./'),
  ];
}

¡Funcionó correctamente!
¡¡¡¡¡¡¡No puedo agradecerte lo suficiente!!!!!!!

@ igor-dv Estoy teniendo un problema similar y he probado su sugerencia (arriba), así como el NormalModuleReplacementPlugin que modifica la ruta resource.request. Ninguno ha funcionado

¿Tiene alguna otra sugerencia?

¿Puede compartir sus ejemplos de código / webpack.config.js?

.storybook / webpack.config.js

const path = require ('ruta'); `
// const webpack = require ('webpack');
const genDefaultConfig = require ('@ storybook / react / dist / server / config / defaults / webpack.config.js');

module.exports = (baseConfig, env) => {
const config = genDefaultConfig (baseConfig, env);
config.module = {
reglas: [
{
prueba: /.tsx$/,
cargadores: ["ts-loader"],
incluir: path.resolve (__ dirname, '../app/xv/')
},
{
prueba: /.scss$/,
cargadores: [
'cargador de estilo',
'css-loader',
'sass-loader? includePaths [] =' + encodeURIComponent (path.resolve (__ dirname, '../app/'))
]
},
{
prueba: /.css$/,
cargador: 'style-loader! css-loader'
},
{
prueba: /.less$/,
loader: 'style-loader! css-loader! less-loader'
},
{
prueba: /.js|.ts$/,
excluir: [path.join (__ dirname, 'app / components'), / node_modules /],
cargador: 'ng-annotate-loader'
},
{
prueba: /.js$/,
excluir: [path.join (__ dirname, 'app / components'), / node_modules /],
cargador: 'babel-loader? presets [] = es2015 & presets [] = stage-1 & presets [] = react & cacheDirectory'
}
]
};

config.resolve.modules = [
    ...(config.resolve.modules || []),
    path.resolve('./'),
];

return config;
// ,
// plugins: [
//     new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) {
//         resource.request = resource.request.includes('xv/') ? '../../app/' + resource.request : resource.request;
//     })
// ]

} `

// código

`import * as React from 'react';

importar {autobind} de 'xv / util / decorators';

importar '../ styles / ActionIcon.scss'; `

// error

`ERROR en ./app/xv/ui/components/ActionIcon.tsx

Módulo no encontrado: Error: No se puede resolver 'xv / util / decorators' en '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components'

@ ./app/xv/ui/components/ActionIcon.tsx 31: 0-46
@ ./.storybook/stories/actionIcons.js
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (paquete web) -hot-middleware / client.js? reload = true ./. storybook / config.js`

con / xv / siendo mapeado a la base del proyecto (root / app / xv / *) en la compilación habitual de desarrollo webpack (no libro de cuentos)

perdón por el formato

Probé diferentes variaciones del reemplazo de expresiones regulares con NormalModuleReplacementPlugin, algunas encontradas en temas / problemas similares sobre el libro de cuentos que no maneja rutas absolutas

ejemplo:

plugins: [ new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) { resource.request = resource.request.replace(/xv/, '../../app/'); }) ]

me da este error:

`ERROR en ./.storybook/stories/actionIcons.js

Módulo no encontrado: Error: No se puede resolver '../../app//ui/components/Tooltip' en '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'

@ ./.storybook/stories/actionIcons.js 5: 0-47
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (paquete web) -hot-middleware / client.js? recargar = verdadero ./.storybook/config.js
'

y este cambio (agregando / xv / a la cadena de reemplazo)

plugins: [ new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) { resource.request = resource.request.replace(/xv/, '../../app/xv/'); }) ]

da

`ERROR en ./.storybook/stories/actionIcons.js

Módulo no encontrado: Error: No se puede resolver '../../app/xv//ui/components/Tooltip' en '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'

@ ./.storybook/stories/actionIcons.js 5: 0-47
'

cuando tengo el reemplazo de ruta correcto para rutas absolutas, no solo las rutas relativas están desordenadas, sino que la ruta es 'correcta' y persiste un error:

ERROR in ./.storybook/stories/actionIcons.js Module not found: Error: Can't resolve '../../app/xv/ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'

¿Cuál es su directorio de trabajo (cwd)?

raíz/

• .libro de historias
• aplicación
  - xv
  --- ui
  ---- componentes
  --- utils

Empiezo el libro de cuentos desde NeXgen-UI (también conocido como raíz del proyecto)

Entonces, teniendo esto import { autobind } from 'xv/util/decorators'; probablemente debería agregar path.resolve('./app') al resolve.modules

bien, ahora tengo esto

'
config.resolve = {

    modules: [

        ...(config.resolve.modules || []),

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

'

y obtengo lo mismo:

`ERROR en ./app/xv/ui/components/ActionIcon.tsx

Módulo no encontrado: Error: No se puede resolver 'xv / util / decorators' en '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components'
'

Parece que también necesitas agregar config.resolve.extensions.push('.ts', '.tsx');

@ igor-dv También le di una oportunidad, el mismo error. Gracias por la ayuda en esto

🤔 Creo que necesito ver la reproducción, entonces. ¿Tiene un repositorio público?

Para mí, funcionó agregando __dirname a path.resolve en la configuración de mi paquete web, así: (Estoy trabajando en una configuración de create-react-app + TypeScript):

config.resolve.modules = [
  ...(config.resolve.modules || []),
  path.resolve(__dirname, "../"),
  path.resolve(__dirname, "../src")
];

Mi estructura de archivos, ajusta la tuya en consecuencia:

''
/raíz
/.book de historias
webpack.config.js
/ src

La cosa estúpida de la que no me di cuenta es que olvidé agregar un ../ a mi resolve.modules config.

Esto es lo que funciona para mí:

// .storybook/webpack.config.js
module.exports = {
  ...,
  resolve: {
    modules: [path.resolve(__dirname, "../src"), "node_modules"],
  }
}

Esto se debe a que la configuración de paquete web de mi libro de cuentos se encuentra 1 directorio más profundo en el directorio predeterminado .storybook .

En caso de que alguien esté mirando esto para el libro de cuentos 5,

const path = require('path');

module.exports = ({ config }) => {
  config.resolve.modules.push(path.resolve(__dirname, "../src"));
  return config;
};

Eres hermosa persona @ kexinlu1121. Funcionó perfectamente, gracias.

La solución de @glocore fue la pista que necesitaba para que funcionara. ¡Gracias!

Tuve un problema similar en el que mi importación absoluta funciona en start-storybook pero no cuando construyo. Lo pondré aquí como referencia si alguien quiere alguna referencia.

Estoy usando @src para la importación absoluta y lo hice funcionar agregando esta línea:

# /root/.storybook/webpack.config.js

const path = require("path");

module.exports = ({ config }) => {
  // ...

  // Add absolute path.resolve so storybook can handle absolute import (eg. @src/resources/...)
  config.resolve.alias = {
    ...config.resolve.alias,
    "@src": path.resolve(__dirname, "../src"),
  };

  return config;
};

Por contexto, el directorio de mi proyecto se ve así:

/root
  .storybook/
    webpack.config.js
  src/
    components/

Espero eso ayude :)

@wzulfikar ¡ Gracias por su solución!

Obtuve este problema después de usar CLI y pude resolverlo modificando mi .storybook / main.js a:

const path = require('path');

module.exports = {
  ...other settings....,

  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    return config;
  },

}

Hola
Estoy usando React / TS
Tengo el mismo problema con mi .storybook / main.js:

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-knobs",
  ],
  webpackFinal: async (config) => {

    config.resolve.alias = {
      ...config.resolve.alias,
      'fs': path.resolve(__dirname, 'fsMock.js'),
      'child_process': path.resolve(__dirname, 'fsMock.js'),
      'net': path.resolve(__dirname, 'fsMock.js'),
      'tls': path.resolve(__dirname, 'fsMock.js'),
      // "src/types": path.resolve(__dirname, "../src/types"),
      // "src/components": path.resolve(__dirname, "../src/components"),
    };

    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    // config.resolve.extensions.push('.ts', '.tsx');

    return config;
  },
}

mi estructura

.storybook
src
├── components
|     index.ts
│   ├── ChildrenComponent
│    │  ├── index.tsx
│    │  └── index.stories.tsx
│   ├── ParentComponent
│    │    ├── index.tsx
│    │    └── index.stories.tsx
├── stories

Un componente ParentComponent

import React from "react";
import { ChildrenComponent } from "src/components";
import { ItemType } from "src/types";

export default ({ item }: { item: ItemType }) => {
  return (
    <p className="hello">
      <ChildrenComponent type={item.type} />
      <span className="ellipsis">{item.title}</span>
    </p>
  );
};

El problema viene de src/components porque si yo hago src/components/ChildrenComponent funciona.

No lo entiendo Probé todo aquí y # 333 # 3291 y muchos otros

Una captura de pantalla del error

Alguien puede ayudar ?