Question

我使用next.js，打字稿和react项目设置了故事书。该项目可以很好地渲染，但故事书会中断并给我一个错误：“找不到模块：错误：无法在...中解析'组件/原子'。”似乎组件路径导致其中断：< / p>

import { Element } from 'components/atoms';

但可以进行以下操作：

import { Element } from '../../atoms

我有一个tsconfig.json文件，其中包含以下内容：

  "compilerOptions": {
    "baseUrl": "src",
    },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
...

我在线尝试了一些建议，但似乎都无法解决路径问题。我在.storybook文件夹中使用以下命令创建了一个webpack.config.js，但仍然出现错误。

module.exports = {
 ...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

我不想在调用文件时使用../../，而只能使用./components结构。

Answer 1

花了一些时间在 Storybook 上)

这是我的 .storybook/main.js 版本，终于奏效了：

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules.push(path.resolve(__dirname, '../src'));

    return config;
  },

  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

Answer 2

我认为您需要的是路径别名。如果您正在处理一个打字稿项目，则可以使用python声明在应用程序中映射到某个绝对路径的别名：

tsconfig.json paths compiler option

官方链接=> typescriptlang.org
在这里，您对该打字稿功能有很好的解释。 Path aliases with TypeScript in Node.js

请注意，这并不总是那么容易，因为在生产中，构建工具链将不得不将它们转换为正确的路径，因为tsc不会这样做。幸运的是nexjts最近添加了此功能=> https://nextjs.org/docs/advanced-features/module-path-aliases

故事书在React，Next.JS，Typescript项目中找不到组件

2 个答案: