Я не знаю, как это работает для вас в вашем обычном приложении (например, какова ваша настройка?), Но если вы поместите свой cwd (при условии -> cwd/src/components/.... ) в resolve.modules в расширенном webpack.config это, вероятно, должно решить вашу проблему (хотя я проверил это с помощью приложения Angular, но на самом деле это не имеет значения)

Мой файл .storybook/webpack.config.js описывается следующим образом.
Здесь проблема?

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;
};

Попробуйте добавить что-то вроде этого:

const path = require('path');

// blah blah code

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

  // blah blah code

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

Работало нормально !!
Я не могу тебя отблагодарить!!!!!!!

@ igor-dv У меня аналогичная проблема, и я попробовал ваше предложение (см. выше), а также плагин NormalModuleReplacementPlugin, который изменяет путь resource.request. Ни один из них не работал

Есть ли у вас другие предложения?

Не могли бы вы поделиться своими примерами кода / webpack.config.js?

.storybook / webpack.config.js

const path = require ('путь'); `
// 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 = {
правила: [
{
тест: /.tsx$/,
загрузчики: ["ts-loader"],
включить: path.resolve (__ dirname, '../app/xv/')
},
{
тест: /.scss$/,
загрузчики: [
'стиль-загрузчик',
'css-loader',
'sass-loader? includePaths [] =' + encodeURIComponent (path.resolve (__ dirname, '../app/'))
]
},
{
тест: /.css$/,
загрузчик: 'style-loader! css-loader'
},
{
тест: /.less$/,
загрузчик: 'style-loader! css-loader! less-loader'
},
{
тест: /.js|.ts$/,
исключить: [path.join (__ dirname, 'app / components'), / node_modules /],
загрузчик: 'ng-annotate-loader'
},
{
тест: /.js$/,
исключить: [path.join (__ dirname, 'app / components'), / node_modules /],
загрузчик: 'babel-loader? presets [] = es2015 & presets [] = stage-1 & presets [] = response & 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;
//     })
// ]

} `

// код

`import * as React from 'react';

импортировать {autobind} из 'xv / util / decorators';

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

// ошибка

`ОШИБКА в ./app/xv/ui/components/ActionIcon.tsx

Модуль не найден: ошибка: не удается разрешить «xv / util / decorators» в «/ 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 (webpack) -hot-middleware / client.js? reload = true ./. storybook / config.js`

с / xv / сопоставлен с базой проекта (root / app / xv / *) в обычной сборке webpack dev (не сборник рассказов)

извините за форматирование

Я пробовал разные варианты замены регулярного выражения с помощью NormalModuleReplacementPlugin, некоторые из которых были обнаружены в аналогичных потоках / проблемах с рассказами, не обрабатывающими абсолютные пути

пример:

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

дает мне эту ошибку:

`ОШИБКА в ./.storybook/stories/actionIcons.js

Модуль не найден: ошибка: не удается разрешить '../../app//ui/components/Tooltip' в '/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 (webpack) -hot-middleware / client.js? reload = true ./.storybook/config.js
`

и это изменение (добавление / xv / к строке замены)

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

дает

`ОШИБКА в ./.storybook/stories/actionIcons.js

Модуль не найден: ошибка: не удается разрешить '../../app/xv//ui/components/Tooltip' в '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'

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

когда у меня есть правильная замена пути для абсолютных путей, не только относительные пути испорчены, но и путь является «правильным», и ошибка сохраняется:

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'

Какой у вас рабочий каталог (cwd)?

корень /

• .storybook
• приложение
  - xv
  --- интерфейс
  ----составные части
  --- утилиты

Я запускаю сборник рассказов из NeXgen-UI (он же корень проекта)

Итак, имея этот import { autobind } from 'xv/util/decorators'; вы, вероятно, должны добавить path.resolve('./app') к resolve.modules

хорошо, теперь у меня есть это

`
config.resolve = {

    modules: [

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

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

`

и получаю то же самое:

`ОШИБКА в ./app/xv/ui/components/ActionIcon.tsx

Модуль не найден: ошибка: не удается разрешить «xv / util / decorators» в «/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components»
`

Похоже, вам также нужно добавить config.resolve.extensions.push('.ts', '.tsx');

@ igor-dv Я тоже попробовал, та же ошибка. Спасибо за помощь в этом

🤔 Думаю, мне нужно посмотреть репродукцию. У вас есть публичное репо?

Для меня это сработало, добавив __dirname в path.resolve в конфигурацию моего веб-пакета, например: (я работаю над установкой create-response-app + TypeScript):

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

Моя файловая структура, скорректируйте свою соответственно:

`` ''
/ корень
/. сборник рассказов
webpack.config.js
/ src

Глупую вещь, которую я не понял, это то, что я забыл добавить начальную ../ в мою конфигурацию resolve.modules .

Вот что мне подходит:

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

Это связано с тем, что моя конфигурация веб-пакета сборника рассказов расположена на 1 каталог глубже в каталоге по умолчанию .storybook .

Если кто-то смотрит на это для сборника рассказов 5,

const path = require('path');

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

Ты красивый человек @ kexinlu1121. Это сработало отлично, спасибо.

Решение @glocore было подсказкой, которая мне нужна для его работы. Благодаря!

У меня была аналогичная проблема, когда мой абсолютный импорт работал в start-storybook но не при сборке. Я просто помещу это здесь для справки, если кому-то понадобится справка.

Я использую @src для абсолютного импорта и заставил его работать, добавив эту строку:

# /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;
};

Для контекста каталог моего проекта выглядит так:

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

Надеюсь, поможет :)

@wzulfikar Спасибо за решение!

У меня возникла эта проблема после использования интерфейса командной строки, и я смог решить ее, изменив свой .storybook / main.js на:

const path = require('path');

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

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

    return config;
  },

}

Здравствуйте
Я использую React / TS
У меня такая же проблема с моим .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;
  },
}

моя структура

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

Компонент 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>
  );
};

Проблема исходит от src/components потому что я делаю src/components/ChildrenComponent это работает.

Не понимаю Я пробовал все здесь и # 333 # 3291 и многие другие

Снимок экрана с ошибкой

Кто-нибудь может помочь?