javascriptwebpackbootstrap-5babel-loaderspread-syntax

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


I am having MVC application and trying to add Bootsrap5 through Webpack and am getting following error. I have tried many of the workaround with stage-0, stage-2 and stage-3 but nothing worked for me.

I am suspecting the issue is because of three dots (Spread syntax) but the workaround not helped for me.

Issue:

ERROR in ./~/bootstrap/dist/js/bootstrap.esm.js
Module parse failed: C:\DO NOT DELETE\Projects\GIT_SourceCode\Brain.Web\node_modules\bootstrap\dist\js\bootstrap.esm.js 
Unexpected token (1242:15)
You may need an appropriate loader to handle this file type.
|
|   _getConfig(config) {
|     config = { ...Default$a,
|       ...Manipulator.getDataAttributes(this._element),
|       ...(typeof config === 'object' ? config : {})
 @ ./Content/js/site.js 5:0-19

ERROR in site-30927619780d53073ccb.min.js from UglifyJs
Unexpected token: name (BSTChart) [site-30927619780d53073ccb.min.js:107816,6]

ERROR in report-30927619780d53073ccb.min.js from UglifyJs
Unexpected token: name (BSTChart) [report-30927619780d53073ccb.min.js:106016,6]

Package.json

{
  "dependencies": {
    "inputmask": "^3.3.10"
  },
  "devDependencies": {
    "@amcharts/amcharts4": "4.10.17",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@popperjs/core": "2.10.2",
    "acorn": "^6.1.1",
    "amcharts3": "3.21.15",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-stage-0": "^6.24.1",
    "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": "^2.1.0",
    "file-loader": "^0.10.1",
    "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": "^6.0.3",
    "select2": "^4.0.3",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "style-loader": "^0.16.0",
    "toastr": "^2.1.2",
    "webpack": "^2.3.1",
    "webpack-cleanup-plugin": "^0.5.1"
  },
  "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');

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: /\.js$/,
                loader: 'babel-loader',
                query: {
                    plugins: ['transform-object-rest-spread']
                },
                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
        })
    ]
};

Solution

  • 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,
                }),
            ],
        }
    };