为什么我的打字稿节点模块在安装到我的 Next.js 应用程序中时会触发"may need an appropriate loader"错误？

Question

我写了一个TypeScript节点模块并安装到我的Next.js应用程序中。然而，当我试图运行我的Next.js应用程序时，该模块触发了一个错误。你知道为什么会这样吗?详情请见下文

我的typescript节点模块

import axios from 'axios'
//  AwsS3FileUploader()
//  A JavaScript library for file upload to AWS S3 bucket from the client side.
export const AwsS3FileUploader = class {
url: string // unsigned or signed upload url
headers: object // headers to be included in request
data: Blob // file object to be included in request and uploaded to the S3 bucket
constructor(initUrl: string, initHeaders: object, initData: Blob) {
this.url = initUrl
this.headers = initHeaders
this.data = initData
}
async uploadFile(): Promise<object> {
const res = await axios({
url: this.url,
method: 'PUT',
headers: this.headers,
data: this.data
})
if (res.status !== 200) return Promise.reject(res)
return Promise.resolve({
data: res.data,
status: res.status,
statusText: res.statusText
})
}
}

错误输出

Module parse failed: Unexpected token (8:7)您可能需要一个适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看到https://webpack.js.org/concepts装载机

Answer 1

我能够通过改变我的next.config.js文件中的webpack配置来解决这个问题，如下所示:

webpack(config, options) {
config.module.rules.push({
test: /.(ts)x?$/, // Just `tsx?` file only
use: [
{
loader: "ts-loader",
},
],
});
return config;
}

参考:如何在next.js中加载导出Typescript的库