node.js - 为什么我的 typescript 节点模块在安装到我的 Next.js 应用程序时会触发“可能需要适当的加载程序”错误？

Question

我编写了一个 TypeScript 节点模块并安装到我的 Next.js 应用程序中。但是，当我尝试运行 Next.js 应用程序时，模块会触发错误。任何想法为什么会这样？请参阅下面的详细信息。

我的打字稿节点模块

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#loaders

标签： node.jstypescriptwebpacknext.js

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 的库