如何在storybook和Next.js中使用绝对导入

Question

在我的.storybook/main.js文件中，我有：

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

但当我运行我的故事书时，我遇到了一个错误：

resolve 'components/Common/Button' in '/myprojectpath/pages'
Parsed request is a module
using description file: /myprojectpath/package.json (relative path: ./pages)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/myprojectpath/pages/node_modules doesn't exist or is not a directory
looking for modules in /myprojectpath/node_modules

不确定发生了什么。当我运行Next.js项目时，它加载良好。

提前感谢！

Answer 1

看起来像是设置绝对路径问题：github问题

很可能，将通过解决

path.resolve(__dirname, ".."), "node_modules"]

或

path.resolve(__dirname, "../src"), "node_modules"]