لا أعرف كيف يعمل من أجلك في تطبيقك المعتاد (مثل ما هو الإعداد الخاص بك؟) ، ولكن إذا كنت ستضع 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 = يتطلب ('path') ؛ `
// const webpack = تتطلب ('webpack') ؛
const genDefaultConfig = تتطلب ('@ storybook / رد فعل / dist / server / config / defaults / webpack.config.js') ؛

module.exports = (baseConfig، env) => {
تكوين const = genDefaultConfig (baseConfig ، env) ؛
config.module = {
قواعد: [
{
الاختبار: /.tsx$/ ،
لوادر: ["ts-loader"] ،
تشمل: path.resolve (__ dirname، '../app/xv/')
} ،
{
الاختبار: /.scss$/ ،
لوادر: [
"محمل النمط"،
"محمل css"،
'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 / component')، / node_modules /]،
محمل: 'ng-annotate-loader'
} ،
{
الاختبار: /.js$/ ،
استبعاد: [path.join (__ dirname، 'app / component')، / node_modules /]،
مُحمِّل: 'babel-loader؟ presets [] = es2015 & presets [] = stage-1 والإعدادات المسبقة [] = رد فعل & دليل ذاكرة التخزين المؤقت'
}
]
} ؛

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" رد فعل "؛

استيراد {autobind} من "xv / util / decorators" ؛

استيراد '../ Styles / ActionIcon.scss' ؛ `

// خطأ

`خطأ في ./app/xv/ui/components/ActionIcon.tsx

الوحدة غير موجودة: خطأ: لا يمكن حل "xv / util / decorators" في "/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / المكونات"

@ ./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؟ إعادة تحميل = صحيح ./. storybook / config.js`

مع / xv / يتم تعيينه إلى قاعدة المشروع (root / app / xv / *) في بنية webpack المعتادة (غير القصص المصورة)

آسف على التنسيق

لقد جربت أشكالًا مختلفة من استبدال regex مع 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؟ إعادة التحميل = صحيح ./.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
• تطبيق
  - الخامس عشر
  - واجهة المستخدم
  ---- المكونات
  --- أدوات

أبدأ كتاب القصة من 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 / المكونات"
"

يبدو أنك بحاجة إلى إضافة config.resolve.extensions.push('.ts', '.tsx'); أيضًا

@ igor-dv أعطيت أن تذهب كذلك ، نفس الخطأ. شكرا للمساعدة في هذا الشأن

🤔 أعتقد أنني بحاجة لرؤية التكاثر ، إذن. هل لديك ريبو عام؟

بالنسبة لي ، فقد نجحت عن طريق إضافة __dirname إلى path.resolve في تهيئة webpack الخاصة بي ، مثل هذا: (أنا أعمل على إنشاء تطبيق تفاعل + إعداد TypeScript):

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

هيكل ملفي ، اضبط هيكلك وفقًا لذلك:

""
/جذر
/.storybook
webpack.config.js
/ src

الشيء الغبي الذي فشلت في إدراكه هو أنني نسيت إضافة ../ إلى التكوين الخاص بي resolve.modules .

إليك ما يناسبني:

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

هذا لأن تكوين webpack الخاص بك في Storybook يقع في 1 دليل أعمق في الافتراضي .storybook dir.

في حال كان أي شخص ينظر إلى هذا من أجل 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 شكرا على الحل الخاص بك!

حصلت على هذه المشكلة بعد استخدام CLI وتمكنت من حلها عن طريق تعديل .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 وغيرها الكثير

لقطة شاشة للخطأ

هل أستطيع مساعدتك ؟