Je ne sais pas comment cela fonctionne pour vous dans votre application régulière (comme quelle est votre configuration?), Mais si vous allez mettre votre cwd (en supposant -> cwd/src/components/.... ) dans le resolve.modules dans l'extension webpack.config , cela devrait probablement résoudre votre problème (je l'ai vérifié avec une application Angular, mais cela n'a pas vraiment d'importance)

Mon fichier .storybook/webpack.config.js est décrit comme suit.
Y a-t-il un problème ici?

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

Essayez d'ajouter quelque chose comme ceci:

const path = require('path');

// blah blah code

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

  // blah blah code

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

Cela a fonctionné correctement !!
Je ne vous remercierai jamais assez!!!!!!!

@ igor-dv J'ai un problème similaire et j'ai essayé votre suggestion (ci-dessus), ainsi que le NormalModuleReplacementPlugin qui modifie le chemin resource.request. Ni l'un ni l'autre n'ont fonctionné

Avez-vous d'autres suggestions?

Pouvez-vous s'il vous plaît partager vos exemples de code / webpack.config.js?

.storybook / webpack.config.js

const path = require ('chemin'); `
// 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 = {
règles: [
{
test: /.tsx$/,
chargeurs: ["ts-loader"],
inclure: path.resolve (__ dirname, '../app/xv/')
},
{
test: /.scss$/,
chargeurs: [
'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$/,
exclure: [path.join (__ dirname, 'app / components'), / node_modules /],
chargeur: 'ng-annotate-loader'
},
{
test: /.js$/,
exclure: [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 * comme React de 'react';

import {autobind} depuis 'xv / util / decorators';

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

// Erreur

`ERREUR dans ./app/xv/ui/components/ActionIcon.tsx

Module non trouvé: Erreur: Impossible de résoudre «xv / util / decorators» dans «/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components»

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

avec / xv / mappé à la base du projet (root / app / xv / *) dans la construction habituelle du webpack dev (non storybook)

désolé pour le formatage

J'ai essayé différentes variantes du remplacement de l'expression régulière avec NormalModuleReplacementPlugin, certaines trouvées dans des fils / problèmes similaires sur le livre de contes ne gérant pas les chemins absolus

exemple:

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

me donne cette erreur:

`ERREUR dans ./.storybook/stories/actionIcons.js

Module introuvable: Erreur: impossible de résoudre «../../app//ui/components/Tooltip» dans «/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? reload = true ./.storybook/config.js
»

et ce changement (ajouter / xv / à la chaîne de remplacement)

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

donne

`ERREUR dans ./.storybook/stories/actionIcons.js

Module introuvable: Erreur: impossible de résoudre «../../app/xv//ui/components/Tooltip» dans «/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories»

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

lorsque j'ai le bon remplacement de chemin pour les chemins absolus, non seulement les chemins relatifs sont perturbés, mais le chemin est `` correct '' et une erreur persiste:

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'

Quel est votre répertoire de travail (cwd)?

racine/

• .storybook
• app
  - xv
  --- ui
  ----Composants
  --- utils

Je démarre le livre d'histoires à partir de NeXgen-UI (aka racine du projet)

Donc, ayant ce import { autobind } from 'xv/util/decorators'; vous devriez probablement ajouter path.resolve('./app') au resolve.modules

bien, donc j'ai maintenant ceci

»
config.resolve = {

    modules: [

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

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

»

et j'obtiens la même chose:

`ERREUR dans ./app/xv/ui/components/ActionIcon.tsx

Module non trouvé: Erreur: Impossible de résoudre «xv / util / decorators» dans «/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components»
»

Il semble que vous deviez également ajouter config.resolve.extensions.push('.ts', '.tsx');

@ igor-dv J'ai essayé ça aussi, même erreur. Merci pour l'aide à ce sujet

🤔 Je pense que j'ai besoin de voir la reproduction, alors. Avez-vous un repo public?

Pour moi, cela a fonctionné en ajoutant __dirname à path.resolve dans ma configuration webpack, comme ceci: (je travaille sur une configuration create-react-app + TypeScript):

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

Ma structure de fichiers, ajustez la vôtre en conséquence:

''
/racine
/.storybook
webpack.config.js
/ src

La chose stupide que je n'ai pas réussi à réaliser est que j'ai oublié d'ajouter un ../ à ma configuration resolve.modules .

Voici ce qui fonctionne pour moi:

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

C'est parce que ma configuration webpack de storybook se trouve 1 répertoire plus profond dans le répertoire par défaut .storybook .

Au cas où quelqu'un regarde ceci pour le livre d'histoires 5

const path = require('path');

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

Belle personne @ kexinlu1121. Cela a parfaitement fonctionné, merci.

La solution de @glocore était l'indice dont j'avais besoin pour que cela fonctionne. Merci!

J'ai eu un problème similaire où mon importation absolue fonctionne dans start-storybook mais pas lorsque je construis. Je vais simplement le mettre ici pour référence si quelqu'un veut une référence.

J'utilise @src pour l'importation absolue et je l'ai fait fonctionner en ajoutant cette ligne:

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

Pour le contexte, mon répertoire de projet ressemble à ceci:

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

J'espère que cela aide :)

@wzulfikar Merci pour votre solution!

J'ai eu ce problème après avoir utilisé la CLI et j'ai pu le résoudre en modifiant mon .storybook / main.js en:

const path = require('path');

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

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

    return config;
  },

}

Bonjour
J'utilise React / TS
J'ai eu le même problème avec mon .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;
  },
}

ma structure

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

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

Le problème vient de src/components parce que je fais src/components/ChildrenComponent ça marche.

Je ne comprends pas j'ai tout essayé ici et # 333 # 3291 et bien d'autres

Une capture d'écran de l'erreur

Quelqu'un peut-il aider?