"You May Need an Appropriate Loader to Handle This File Type" with Webpack and Babel

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

You are using unnecessary escape character: which is not required.

Replace test: '/\.(js|jsx)$/', with test: /\.js$|jsx/, it should work fine.

I replicated your issue in my machine and found the same which is resolved by the above fix.

hope this helps, happy coding!!!

Typescript with Webpack - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

So I think your issue here is that your webpack config file is written in typescript. I think your webpack config itself looks okay, but basically your webpack file is telling your system how to handle typescript files, but nothing is telling your system how to handle a webpack.config.ts file.

One quick test would be to remove the small bit of typescript in your config file and change it to webpack.config.js and see if that works. Then at least you've confirmed the issue.

As for getting the typescript config file you might just need to install ts-node as an npm dev dependency.

Here is the documentation for using a typescript config file though https://webpack.js.org/configuration/configuration-languages/

You may need an appropriate loader to handle this file type with Webpack and Babel

You need to install the es2015 preset:

npm install babel-preset-es2015

and then configure babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

You may need an appropriate loader to handle this file type js

The solution worked for me is Upgrading of Webpack and including plugin for plugin-proposal-object-rest-spread.

When we are upgrading Webpack, some of the plugin also need to be upgraded.

Package.json

{
  "dependencies": {
    "@babel/runtime": "7.5.2",
    "inputmask": "^3.3.10",
    "uglifyjs-webpack-plugin": "^2.2.0"
  },
  "devDependencies": {
    "@amcharts/amcharts4": "4.10.17",
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@popperjs/core": "^2.10.2",
    "acorn": "^6.1.1",
    "amcharts3": "3.21.15",
    "babel-loader": "^8.2.2",
    "bootstrap": "^5.1.3",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-toggle": "^2.2.2",
    "css-loader": "^0.27.3",
    "dropzone": "5.5.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.2.0",
    "font-awesome": "^4.7.0",
    "html5sortable": "^0.6.1",
    "inputmask": "^3.3.10",
    "jquery": "^3.2.1",
    "jquery-ajax-unobtrusive": "^3.2.4",
    "jquery-confirm": "3.3.4",
    "jquery-ui": "^1.12.1",
    "jquery-validation": "^1.16.0",
    "jquery-validation-unobtrusive": "^3.2.6",
    "node-sass": "^4.5.1",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "sass-loader": "^7.3.1",
    "select2": "^4.0.3",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "style-loader": "^3.3.0",
    "toastr": "^2.1.2",
    "webpack": "4.35.3",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-cli": "^3.3.5"
  },
  "license": "MIT",
  "main": "index.js",
  "name": "brain",
  "scripts": {
    "build": "webpack",
    "build-prod": "webpack --config ./webpack.prod.config.js"
  },
  "version": "1.0.0"
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    watch: true,
    entry: {
        site: path.resolve(__dirname, 'Content/js/site.js'),
        report: path.resolve(__dirname, 'Content/js/report.js')
    },
    output: {
        path: path.resolve(__dirname, 'Content/build/'),
        filename: '[name]-[hash].min.js'
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [["@babel/preset-env", { "targets": "defaults" }]],
                        plugins: ["@babel/plugin-proposal-object-rest-spread"],
                        cacheDirectory: true
                    }
                },
                exclude: [path.resolve(__dirname, 'node_modules')]
            },           
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                }),
                exclude: [path.resolve(__dirname, 'node_modules')]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: {
                    loader: 'file-loader',
                    options: { name: 'img/[name].[ext]' }
                }
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: {
                    loader: 'file-loader',
                    options: { name: 'fonts/[name].[ext]' }
                }
            }
        ]
    },
    resolve: {
        alias: {
            jquery: 'jquery/src/jquery',
            'jquery-ui': 'jquery-ui/ui'
        }
    },
    plugins: [
        new WebpackCleanupPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new ExtractTextPlugin({
            filename: '[name]-[hash].min.css',
            allChunks: true
        })
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    }
};

---

Related Topics