일반 앱에서 어떻게 작동하는지 모르겠지만 (설정은 무엇입니까?), 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 /는 일반적인 웹팩 개발 (스토리 북이 아닌) 빌드에서 프로젝트의 기본 (루트 / 앱 / 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
  ---- 부품
  --- 유틸리티

NeXgen-UI (일명 프로젝트 루트)에서 스토리 북을 시작합니다.

따라서 import { autobind } from 'xv/util/decorators'; 있으면 resolve.modules 에 path.resolve('./app') 을 추가해야합니다.

좋아, 이제이게

`
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 나는 그에게도 같은 오류를 주었다. 이것에 대한 도움을 주셔서 감사합니다

🤔 그럼 복제품을 봐야 할 것 같아요. 공용 저장소가 있습니까?

저에게는 다음과 같이 내 웹팩 구성에서 __dirname 를 path.resolve 에 추가하여 작동했습니다. (저는 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"],
  }
}

이것은 내 스토리 북 웹팩 구성이 기본 .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 및 다른 많은

오류의 스크린 샷

누구든지 도울 수 있습니까?