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