Question

在运行故事书时，我遇到模块未找到错误，因为故事书不知道如何使用package.json中定义的简化导入路径来处理导入。我可以在Storybook的自定义webpack配置中添加什么以使其能够识别这些导入？

在package.json中：

    "moduleNameMapper": {
       "^Api(.*)$": "<rootDir>/src/api$1",
     }

导入我的组件：

import api from 'Api/index';

const myComponent = props = { ... }

我当前的故事书自定义Webpack配置：

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

我在控制台中看到的错误（根本不在正确的位置显示）：

Module not found: Error: Can't resolve 'Api/index' in '/Users/UDJ/Projects/AdvApp/src/components/Molecules'

当我将NODE_PATH像这样添加到我的故事书脚本中时："storybook": "NODE_PATH=src start-storybook -s ./stories/public -p 6006"然后出现另一个错误（至少现在它有正确的路径）：

Module not found: Error: [CaseSensitivePathsPlugin] `/Users/UDJ/Projects/AdvApp/src/Api/index.js` does not match the corresponding path on disk `api`.

如何修改故事书配置以与moduleNameMapper一起使用？

0 个答案: