Custom Webpack loader can't parse custom language file-CodePudding

My Webpack config:

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const sass = require("sass");

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        static: "./dist",
        hot: true
    }
    entry: "./src/index.tsx",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: sass,
                            sassOptions: {
                                fiber: false
                            }
                        }
                    }
                ],
                exclude: "/node_modules/"
            },
            {
                test: /\.tsx$/,
                use: [
                    {
                        loader: "ts-loader"
                    },
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-typescript", "@babel/react", "@babel/env"],
                        }
                    }
                ],
                exclude: "/node_modules/"
            },
            {
                test: /\.lang$/,
                type: "asset/source",
                exclude: "/node_modules/"
            }
        ]
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            inject: true
        })
    ]
};

The error I'm getting:

ERROR in ./src/impl/text/language.ts 3:27
Module parse failed: Unexpected token (3:27)
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
| import * as enUS from "lang/en-US.lang";
|
> const parseLanguage = (lang: string) => {
|     console.log(lang);
|     const values: { [key: string]: string } = {};
 @ ./src/components/App.tsx 2:0-52 6:15-26
 @ ./src/index.tsx 3:0-39 4:36-39

webpack 5.65.0 compiled with 1 error in 2854 ms

I had a whole host of issues getting Typescript to play nice, now I can't for the life of me figure out why Webpack has a problem with this. The file I'm trying to import is named en-US.lang. I've tried using asset/resource and asset/inline, in addition to trying all sorts of loaders (raw-loader, file-loader...) and I'm really at a loss.

All of the other file types work perfectly, and I've even imported PNGs/SVGs using a similar format... so what am I doing wrong here?

CodePudding user response：

Long story short, the file being imported was in a Typescript (not tsx) file, and I needed to include in the Webpack TS loader