Ich weiß nicht, wie es für Sie in Ihrer regulären App funktioniert (wie ist Ihr Setup?), Aber wenn Sie Ihren cwd (unter der Annahme -> cwd/src/components/.... ) auf resolve.modules im erweiterten webpack.config sollte es wahrscheinlich Ihr Problem lösen (ich habe es zwar mit einer Angular-App überprüft, aber es spielt keine Rolle)

Meine .storybook/webpack.config.js -Datei wird wie folgt beschrieben.
Gibt es hier ein Problem?

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

Versuchen Sie Folgendes hinzuzufügen:

const path = require('path');

// blah blah code

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

  // blah blah code

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

Es hat richtig funktioniert !!
Ich kann Ihnen nicht genug danken!!!!!!!

@ igor-dv Ich habe ein ähnliches Problem und habe Ihren Vorschlag (oben) sowie das NormalModuleReplacementPlugin ausprobiert, mit dem der Pfad resource.request geändert wird. Weder haben gearbeitet

Haben Sie weitere Vorschläge?

Können Sie bitte Ihre Codebeispiele / webpack.config.js teilen?

.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 = {
Regeln: [
{
Test: /.tsx$/,
Lader: ["ts-loader"],
include: path.resolve (__ dirname, '../app/xv/')
},
{
Test: /.scss$/,
Lader: [
'Style-Loader',
'CSS-Loader',
'sass-loader? includePaths [] =' + encodeURIComponent (path.resolve (__ dirname, '../app/'))
]]
},
{
Test: /.css$/,
loader: 'style-loader! css-loader'
},
{
Test: /.less$/,
loader: 'style-loader! css-loader! less-loader'
},
{
Test: /.js|.ts$/,
ausschließen: [path.join (__ dirname, 'app / components'), / node_modules /],
Loader: 'ng-annotate-loader'
},
{
Test: /.js$/,
ausschließen: [path.join (__ dirname, 'app / components'), / node_modules /],
loader: '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;
//     })
// ]

} `

// Code

`import * as React from 'react';

{autobind} aus 'xv / util / decorators' importieren;

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

// Error

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

Modul nicht gefunden: Fehler: 'xv / util / decorators' in '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components' kann nicht aufgelöst werden.

@ ./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`

mit / xv / wird der Basis des Projekts (root / app / xv / *) im üblichen Webpack-Entwickler-Build (kein Storybook) zugeordnet

Entschuldigung für die Formatierung

Ich habe verschiedene Varianten des Regex-Ersatzes mit NormalModuleReplacementPlugin ausprobiert, einige davon in ähnlichen Threads / Problemen über Storybooks, die keine absoluten Pfade verarbeiten

Beispiel:

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

gibt mir diesen Fehler:

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

Modul nicht gefunden: Fehler: '../../app//ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories' kann nicht aufgelöst werden.

@ ./.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
`

und diese Änderung (Hinzufügen von / xv / zur Ersatzzeichenfolge)

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

gibt

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

Modul nicht gefunden: Fehler: '../../app/xv//ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories' kann nicht behoben werden.

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

Wenn ich den richtigen Pfadersatz für absolute Pfade habe, sind nicht nur die relativen Pfade durcheinander, sondern der Pfad ist 'korrekt' und ein Fehler bleibt bestehen:

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'

Was ist Ihr Arbeitsverzeichnis (cwd)?

Wurzel/

• .storybook
• App
  - xv
  --- ui
  ---- Komponenten
  --- Utensilien

Ich starte das Storybook von NeXgen-UI (auch bekannt als Projektstamm).

Wenn Sie also dieses import { autobind } from 'xv/util/decorators'; , sollten Sie wahrscheinlich path.resolve('./app') zu den resolve.modules hinzufügen

Okay, also habe ich das jetzt

`
config.resolve = {

    modules: [

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

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

`

und bekomme das gleiche:

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

Modul nicht gefunden: Fehler: 'xv / util / decorators' in '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components' kann nicht aufgelöst werden.
`

Sieht so aus, als müssten Sie auch config.resolve.extensions.push('.ts', '.tsx'); hinzufügen

@ igor-dv Ich habe das auch ausprobiert, der gleiche Fehler. Danke für die Hilfe dazu

🤔 Ich denke, ich muss dann die Reproduktion sehen. Hast du ein öffentliches Repo?

Für mich funktionierte es, indem ich __dirname zu path.resolve in meiner Webpack-Konfiguration hinzufügte, wie folgt: (Ich arbeite an einem Setup zum Erstellen, Reagieren und App + TypeScript-Setup):

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

Meine Dateistruktur, passen Sie Ihre entsprechend an:

`` `
/Wurzel
/.storybook
webpack.config.js
/ src

Das Dumme, was ich nicht realisiert habe, ist, dass ich vergessen habe, meiner resolve.modules -Konfiguration ein führendes ../ hinzuzufügen.

Folgendes funktioniert bei mir:

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

Dies liegt daran, dass sich meine Storybook-Webpack-Konfiguration 1 Verzeichnis tiefer im Standardverzeichnis .storybook .

Für den Fall, dass jemand nach Storybook 5 sucht,

const path = require('path');

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

Du schöne Person @ kexinlu1121. Es hat perfekt funktioniert, danke.

Die Lösung von @glocore war der Hinweis, den ich brauchte, damit es funktioniert. Vielen Dank!

Ich hatte ein ähnliches Problem, bei dem mein absoluter Import in start-storybook funktioniert, aber nicht beim Erstellen. Ich werde es hier nur als Referenz einfügen, wenn jemand eine Referenz möchte.

Ich verwende @src für den absoluten Import und habe es durch Hinzufügen dieser Zeile zum Laufen gebracht:

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

Für den Kontext sieht mein Projektverzeichnis folgendermaßen aus:

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

Ich hoffe es hilft :)

@wzulfikar Vielen Dank für Ihre Lösung!

Ich habe dieses Problem nach der Verwendung von CLI erhalten und konnte es beheben, indem ich meine .storybook / main.js wie folgt geändert habe:

const path = require('path');

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

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

    return config;
  },

}

Hallo
Ich benutze React / TS
Ich habe das gleiche Problem mit meinem .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;
  },
}

meine Struktur

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

Eine ParentComponent-Komponente

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

Das Problem kommt von src/components weil ich src/components/ChildrenComponent mache, es funktioniert.

Ich verstehe es nicht, ich habe hier alles versucht und # 333 # 3291 und viele andere

Ein Screenshot des Fehlers

Kann jemand helfen ?