7

在我们的应用程序中，我们使用绝对路径进行导入。例如，如果我们有一个相对于src文件夹的路径，我们可以只写import module from "components/myComponent".

问题是这在故事书中不起作用。经过一番挖掘，事实证明您可以采用默认的 webpack 配置并根据需要对其进行扩展，如此处的文档中所示。我基于此的思考过程是src像这样简单地将我的目录推送到模块数组上，

module.exports = (baseConfig, env, defaultConfig) => {
    // Extend defaultConfig as you need.
    defaultConfig.resolve.modules.push("src");

    return defaultConfig;
};

然而，在这样做之后，我在尝试运行故事书时最终收到以下错误。

./node_modules/@storybook/addon-knobs/src/react/index.js 中的错误模块解析失败：意外令牌 (26:9) 您可能需要适当的加载程序来处理此文件类型。| 常量初始内容 = 获取故事（上下文）；| const props = { 上下文，storyFn：getStory，频道，knobStore，initialContent }; | 返回 ; | }; |

真的不知道从这里去哪里。

4

4 回答 4

19

我在使用 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;
  },

}

请注意，我使用的是 Typescript 和 ReactJS，我的 Typescript 文件的基本 URL 设置为src. 那就是我的 tsconfig 有这个：

{
...,
 "baseUrl": "./src/",
}
于 2020-10-01T14:36:22.153 回答
10

这看起来与这个 GitHub 问题https://github.com/storybooks/storybook/issues/2704非常相似，其中建议的修复是在 webpack 配置中使 src 目录成为绝对目录。

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};
于 2018-08-09T15:43:46.850 回答
2

我尝试了其他解决方案，但它们没有帮助。所以我为我的案例使用了一个 webpack 插件来解决这个问题。

按照此处的说明操作后：https ://storybook.js.org/docs/riot/configure/webpack#extending-storybooks-webpack-config

我正在使用 TypeScript 版本，并且已将 webpackFinal 字段更改为以下内容：

// main.ts
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
import type { Configuration } from 'webpack';

export default {
  // ... other fields
  webpackFinal: async (config: Configuration) => {
    if (!config.resolve) {
      config.resolve = {};
    }

    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin(),
    ];

    return config;
  },
};
于 2021-07-07T15:16:56.810 回答
0

类似于@Sahin D. 上面的答案，但它看起来已经更新了。

// .storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

来源：https ://storybook.js.org/docs/react/configure/webpack#typescript-module-resolution

于 2022-03-02T20:51:57.487 回答