You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. C#

Question

I'm trying to use the $.getJSON() function in javascript but I get this error:

"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

Here's my javascript:

$(document).ready(function () {
    console.log("Hello from riskanalysis.delete.js");

    var categoryTd = $('#categoryId');
    var categoryText = categoryTd.text();
    var categoryInt = parseInt(categoryText);
    console.log(categoryInt);
    console.log(categoryText);

        // Send an AJAX request
    $.getJSON("/riskanalysis/getCategoryNameById?id=" + categoryInt)
    console.log("Hello before");
            .done(function (categoryName) {
                // On success
                console.log("Category name is: " + categoryName);
                categoryTd.text(categoryName); 
            });

    console.log("Hello after");
});

Here's my webpack.config.js file:

module.exports = {
    entry:
    {
        shared: './src/shared.js',
        home: './src/home/home.js',
        riskanalysisSearch: './src/riskanalysis/riskanalysis.search.js',
        riskanalysisCreate: './src/riskanalysis/riskanalysis.create.js',
        riskanalysisDelete: './src/riskanalysis/riskanalysis.delete.js',
        dropdown: './src/dropdown/dropdown.js',
        actionplan: './src/actionplan/actionplan.js'
    },
    output: {
        filename: '../wwwroot/js/[name].js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](jquery)[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    }

};

Here's the error:

The weird thing is that in all my other javascript files it is working perfectly.

Does anyone have an idea what could be wrong? Thanks already!

Answer 1

The cause of the error is the line console.log("Hello before"); , move this line above $.getJSON("/riskanalysis/getCategoryNameById?id=" + categoryInt) so that it looks like this:

console.log("Hello before");
$.getJSON("/riskanalysis/getCategoryNameById?id=" + categoryInt)
        .done(function (categoryName) {
            // On success
            console.log("Category name is: " + categoryName);
            categoryTd.text(categoryName); 
        });

console.log("Hello after");

The line that shows this error is: Module parse failed: Unexpected token (13:12)

Regarding the error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. this is because the full file extension for this file is .delete.js which makes webpack think that this isn't a normal .js file. Webpack will try to find a file loader for .delete.js files, as one doesn't exist it will fall back to the .js file loader. Due to the above error the js parser will fail resulting in this error.