我正在尝试将我的故事书与我的主要 Web 应用程序分开,以便我可以将我的故事书与我的 Web 应用程序分开部署。但是我在进口方面遇到了一些麻烦。我的组件位于网络应用程序下。故事书在网络应用程序下运行时运行良好,但当我将其移出时却运行不正常。
文件结构:
/app
|--/myWebApp
|-----package.json
|-----(next js files and components)
|--/storybook
|-----/.storybook
|-------/stories
|-------main.js
|-------preview.js
|-----next.config.js
|-----package.json
应用程序/故事书/next.config.js
const withTM = require('next-transpile-module')(['@monorepo/myWebApp'])
module.export = withTM()
应用程序/myWebApp/package.json
{
"name": "@monorepo/myWebApp",
"main": "@monorepo/myWebApp"
}
然后在我的故事中,我从
app/myWebApp
导入一个组件,我使用像 @monorepo/myWebApp/src/components/button
. 这样的导入
但是当这个按钮/组件使用 Next 的绝对导入引用其他组件时,例如
src/components/text
,故事书会抛出构建错误,说它无法解决。故事书页面出现但由于绝对导入的引用错误而无法呈现组件。
我该如何解决这个问题?我缺少配置吗?或者可能无关我是否需要一个页面文件才能在特定路线上提供这本故事书?
添加 next-transpile-module 是我尝试并在网上找到的用于从另一个应用程序访问组件的方法。但它提到
main
应该在两个应用程序中指向同一个文件但我的故事书不会与应用程序匹配......
我对 Next JS 很陌生,非常感谢任何帮助。提前致谢。