मुझे नहीं पता कि आपके नियमित ऐप में यह आपके लिए कैसे काम करता है (जैसे कि आपका सेटअप क्या है?), लेकिन अगर आप अपना cwd ( cwd/src/components/.... - resolve.modules लगा देंगे विस्तारित webpack.config , इसे संभवतः आपकी समस्या का समाधान करना चाहिए (मैंने इसे एक कोणीय ऐप के साथ जाँच लिया है, लेकिन यह वास्तव में कोई फर्क नहीं पड़ता)

मेरी .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 = आवश्यकता ('पथ'); `
// const webpack = आवश्यकता ('webpack');
const genDefaultConfig = की आवश्यकता होती है ('@ स्टोरीबुक / रिएक्शन / डिस्ट / सर्वर / कॉन्फिग / डिफॉल्ट / वेबपैक .config.js');

मॉड्यूल.एक्सपोर्ट्स (बेसकॉन्फिग, एनवी) => {
const config = genDefaultConfig (baseConfig, env);
config.module = {
नियम: [
{
परीक्षण: /.tsx$/,
लोडर: ["टीएस-लोडर"],
शामिल करें: path.resolve (__ dirname, '../app/xv/')
},
{
परीक्षण: /.scss$/,
लोडर: [
'शैली-लोडर',
'सीएसएस-लोडर',
'sass-loader? शामिल करेंPaths [] =' + encodeURIComponent (path.resolve (__ dirname, '../app/'))
]
},
{
परीक्षण: / .css//,
लोडर: 'स्टाइल-लोडर! सीएसएस-लोडर'
},
{
परीक्षण: /.less$/,
लोडर: 'स्टाइल-लोडर! सीएसएस-लोडर! कम लोडर'
},
{
परीक्षण: /.jspg.ts$/,
बाहर करें: [path.join (__ dirname, 'app / Components'), / node_modules /],
लोडर: 'एन-एनोटेट-लोडर'
},
{
परीक्षण: /.js$/,
बाहर करें: [path.join (__ dirname, 'app / Components'), / node_modules /],
लोडर: 'babel- लोडर; प्रीसेट्स [] = es2015 और प्रीसेट्स]] = स्टेज -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;
//     })
// ]

} `

// कोड

`आयात * 'प्रतिक्रिया' से प्रतिक्रिया के रूप में;

'xv / उपयोग / सज्जाकार' से {autobind} आयात करें;

आयात '../ शैलियाँ / ActionIcon.scss'; `

// त्रुटि

`ERROR in ./app/xv/ui/compenders/ActionIcon.tsx

मॉड्यूल नहीं मिला: त्रुटि: '/ उपयोगकर्ता / लुकासंदर्सन / कार्यक्षेत्र / नेक्सजेन-यूआई / ऐप / xv / ui / घटकों' में 'xv / उपयोग / सज्जाकार' को हल नहीं कर सकता

@ ./app/xv/ui/compenders/ActionIcon.tsx 31: 0-46
@ ./storybook/stories/actionIcons.js
@ ./storybook/config.js
@ बहु ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/serf/globals.js (webpack) -hot-मिडलवेयर / क्लाइंट.जेएस reload = true ./। स्टोरीबुक / config.js`

सामान्य वेबपैक देव (गैर स्टोरीबुक) बिल्ड में / xv / प्रोजेक्ट के बेस (रूट / ऐप / xv / *) से मैप किया जा सकता है

स्वरूपण के लिए खेद है

मैंने NormalModuleReplacementPlugin के साथ रेगेक्स प्रतिस्थापन के विभिन्न रूपों की कोशिश की है, कुछ इसी तरह के थ्रेड्स में पाए गए / स्टोरीबुक के बारे में समस्याएँ पूर्ण पथों को नहीं संभाल रही हैं

उदाहरण:

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

मुझे यह त्रुटि देता है:

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

मॉड्यूल नहीं मिला: त्रुटि: '/ ../app//ui/compenders/Tooltip' /'User/lukasanderson/workspace/NeXgen-UI/.storybook/stories 'में हल नहीं हो सकता

@/.storybook/stories/actionIcons.js 5: 0-47
@ ./storybook/config.js
@ बहु ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/serf/globals.js (webpack) -hot-मिडलवेयर / क्लाइंट.जेएस reload = true ./.storybook/config.js
`

और यह परिवर्तन (प्रतिस्थापन स्ट्रिंग में / xv / जोड़कर)

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

देता है

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

मॉड्यूल नहीं मिला: त्रुटि: '../../app/xv//ui/compenders/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
  --- ui
  ----अवयव
  --- utils

मैं नेक्सजेन-यूआई (उर्फ प्रोजेक्ट रूट) से स्टोरीबुक शुरू करता हूं

इसलिए इस import { autobind } from 'xv/util/decorators'; आपको path.resolve('./app') को resolve.modules path.resolve('./app') जोड़ना चाहिए

ठीक है, इसलिए मेरे पास अब यह है

`
config.resolve = {

    modules: [

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

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

`

और वही हो रहा है:

`ERROR in ./app/xv/ui/compenders/ActionIcon.tsx

मॉड्यूल नहीं मिला: त्रुटि: '/ उपयोगकर्ता / लुकासंदर्सन / कार्यक्षेत्र / नेक्सजेन-यूआई / ऐप / xv / ui / घटकों' में 'xv / उपयोग / सज्जाकार' को हल नहीं कर सकता
`

लगता है कि आपको config.resolve.extensions.push('.ts', '.tsx'); जोड़ने की आवश्यकता है

@ igor-DV मैंने कहा कि एक जाना भी, एक ही त्रुटि। इस पर मदद के लिए धन्यवाद

Then मुझे लगता है कि मुझे प्रजनन देखने की जरूरत है, तब। क्या आपके पास एक सार्वजनिक रेपो है?

मेरे लिए, इसने मेरे webpack config में __dirname से path.resolve जोड़कर काम किया, इस तरह: (मैं एक create-react-app + टाइपस्क्रिप्ट सेटअप पर काम कर रहा हूँ):

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 डिर में डिफ़ॉल्ट रूप से 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 आपके समाधान के लिए धन्यवाद!

सीएलआई का उपयोग करने के बाद मुझे यह मुद्दा मिला और मैं अपनी .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;
  },

}

नमस्ते
मैं रिएक्ट / टीएस का उपयोग कर रहा हूं
मुझे वही मुद्दा मिला है। मेरी .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 और कई अन्य लोगों की कोशिश की

त्रुटि का एक स्क्रीन शॉट

क्या कोई मदद कर सकता है?