我有一个next.js项目,我正在尝试向其中添加打印脚本。
我的文件夹结构如下:
api
aggregation.ts
interfaces
index.ts
components
Component1
index.js
index.module.css
Component2
index.js
index.module.css
pages
page1
index.js
index.module.css
我在next.config.js
中有interfaces
的别名
config.resolve.alias.interfaces = path.join(__dirname, 'interfaces');
现在是实际问题
interfaces
中的index.ts
导出接口,例如
export interface Order {
store: Store;
orderNumber: string;
totals: Totals;
customer: Customer;
currency: Currency;
paymentMethod: PaymentMethod;
items: OrderProduct[];
createdAt: string;
orderId: string;
}
我尝试将它们导入aggregation.ts
,如下所示
import { Order } from 'interfaces';
我得到
Cannot find module 'interfaces' or its corresponding type declarations.
这也会导致构建失败。
我已经安装了
"@types/node": "^16.0.1",
"@types/react": "^17.0.14",
"typescript": "^4.3.5",
和next正确地生成了next-env.d.ts
,其中
/// <reference types="next" />
/// <reference types="next/types/global" />
关于如何修复Cannot find module
问题有什么想法吗?我有一种感觉,它可能与我的文件夹结构或我的构建步骤有关。但我也得到了语法突出显示,指示导入错误,所以它可能与typescript配置有关。
任何建议都将不胜感激!
1条答案
按热度按时间rjee0c151#
您可以使用
baseUrl
选项在tsconfig.json
中配置模块别名以直接从根导入(也可以使用paths
选项进行进一步的别名配置)。允许您使用以下导入。
从Absolute Imports and Module path aliases文档中:
自Next.js 9.4起,Next.js自动支持
tsconfig.json
和jsconfig.json
、"paths"
和"baseUrl"
选项。这些选项允许您配置模块别名,例如,常见的模式是为某些目录设置别名以使用绝对路径。
这些选项的一个有用功能是它们会自动集成到某些编辑器中,例如VSCode。
baseUrl
组态选项可让您直接从项目的根目录汇入。