Storybook 在 React、Next.JS、Typescript 項目中找不到組件

Question

我用我的 next.js、typescript 和反應項目設置了故事書。 該項目渲染良好，但故事書中斷並給我錯誤：“找不到模塊：錯誤：無法解析'組件/原子'在......”似乎組件的路徑導致它中斷：

import { Element } from 'components/atoms';

但以下工作：

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

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

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

我在網上嘗試了一些建議，但似乎都沒有解決路徑問題。 我使用以下內容在 my.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

對於仍在尋找解決方案的人，請在返回配置之前嘗試在 webpackFinal 中添加以下內容。 這是因為故事書未配置為使用絕對路徑訪問文件。

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

Answer 3

我在解析別名時遇到問題

錯誤：無法解析“@foo/bar”

在 root >.storybook/main.js 我添加了屬性 config.resolve.alias

 const path = require('path'); module.exports = { stories: ['../libs/feature/src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', ], framework: '@storybook/react', webpackFinal: async (config, { configType }) => { config.resolve.alias = {...config.resolve.alias, '@foo/bar': path.resolve(__dirname, '../libs/bar/src/'), }; return config; }, };

Answer 4

我認為您需要的是路徑別名。 如果您正在處理打字稿項目，則可以使用tsconfig.json paths compiler option聲明映射到應用程序中某個絕對路徑的別名：

"baseUrl": "./src",
"paths": {
  "components/*": ["components/*"],
  "@/common/*": ["common/*"],
 }

• 官方鏈接 => typescriptlang.org
• 在這里，您對這個打字稿功能有一個很好的解釋。 Node.js 中 TypeScript 的路徑別名

請注意，這並不總是那么容易，因為在生產中，您的構建工具鏈必須將它們轉換為正確的路徑，因為 tsc 不會這樣做。 幸運的是，nexjts 最近添加了這個功能 => https://nextjs.org/docs/advanced-features/module-path-aliases