通常のアプリでどのように機能するかはわかりませんが（セットアップはどのようなものですか？）、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私は同様の問題を抱えており、あなたの提案（上記）と、resource.requestパスを変更するNormalModuleReplacementPluginを試しました。 どちらも機能していません

他に何か提案はありますか？

コード例/webpack.config.jsを共有していただけますか？

.storybook / webpack.config.js

const path = require（ 'path'）; `
// 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 [] = 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;
//     })
// ]

} `

//コード

`import * as React from'react ';

'xv / util / decorators'から{autobind}をインポートします。

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

//エラー

`./app/xv/ui/components/ActionIcon.tsxのエラー

モジュールが見つかりません：エラー：「/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components」の「xv / util / decorators」を解決できません

@ ./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 /は、通常のwebpack dev（ストーリーブック以外）ビルドのプロジェクトのベース（root / app / xv / *）にマップされます

フォーマットしてすみません

NormalModuleReplacementPluginで正規表現の置換のさまざまなバリエーションを試しましたが、ストーリーブックが絶対パスを処理しないことに関する同様のスレッド/問題で見つかったものもあります

例：

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

私にこのエラーを与えます：

`./.storybook/stories/actionIcons.jsのエラー

モジュールが見つかりません：エラー： '/ Users / lukasanderson / workspace / NeXgen-UI / .storybook / stories'の '../../app//ui/components/Tooltip'を解決できません

@。/。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のエラー

モジュールが見つかりません：エラー： '/ Users / lukasanderson / workspace / NeXgen-UI / .storybook / stories'の '../../app/xv//ui/components/Tooltip'を解決できません

@。/。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
  --- ui
  ----コンポーネント
  --- utils

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のエラー

モジュールが見つかりません：エラー：「/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components」の「xv / util / decorators」を解決できません
`

config.resolve.extensions.push('.ts', '.tsx');も追加する必要があるようです

@ igor-dv私もそれを試してみましたが、同じエラーです。 これについての助けをありがとう

🤔それでは、複製を見る必要があると思います。 公開リポジトリはありますか？

私にとっては、次のように、webpack構成のpath.resolveに__dirnameを追加することで機能しました:(私はcreate-react-app + 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ディレクトリ深い場所にあるためです。

ストーリーブック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/ChildrenComponentを実行しているので、問題はsrc/componentsから発生します。

私はそれを理解していません私はここですべてを試しましたそして＃333 ＃3291と他の多く

エラーのスクリーンショット

誰か助けてもらえますか？