Babel.js 使用Typescript搭配Next.js,找不到具有Map类型宣告的模块

ct3nt3jp  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(176)

我有一个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配置有关。
任何建议都将不胜感激!

rjee0c15

rjee0c151#

您可以使用baseUrl选项在tsconfig.json中配置模块别名以直接从根导入(也可以使用paths选项进行进一步的别名配置)。

// tsconfig.json
{
    "compilerOptions": {
        "baseUrl": "."
    }
}

允许您使用以下导入。

import { Order } from 'interfaces';

Absolute Imports and Module path aliases文档中:
自Next.js 9.4起,Next.js自动支持tsconfig.jsonjsconfig.json"paths""baseUrl"选项。
这些选项允许您配置模块别名,例如,常见的模式是为某些目录设置别名以使用绝对路径。
这些选项的一个有用功能是它们会自动集成到某些编辑器中,例如VSCode。
baseUrl组态选项可让您直接从项目的根目录汇入。

相关问题