Why does my typescript node module when installed into my Next.js app trigger a “may need an appropriate loader” error?

Question

I wrote a TypeScript node module and installed into my Next.js app. However, when I try to run my Next.js app, the module triggers an error. Any ideas why this may be the case? Please see details below.

My typescript node module

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
        })
    }
}

Error output

Module parse failed: Unexpected token (8:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Answer 1

I was able to resolve the issue by changing the webpack configuration in my next.config.js file, as follows:

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

Reference: How to load libraries which export Typescript in next.js