После выполнения команды # yarn serve и запуска собранного бандла на локальном сервере браузер огорчил пустой страницей с ошибкой:
Uncaught TypeError: _vue.default is not a constructor
Попробовал гуглить подобные ошибки, ничего вразумительного и подсказки решения ошибки не нашел. Нужна помощь специалистов. Разработку веду в WebStorm.
package.json
{
"name": "Project",
"version": "0.1.0",
"private": true,
"description": "Project:: webpanel",
"author": "Matvey U",
"scripts": {
"dev": "webpack serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"main": "test_serv.js",
"dependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^2.0.0-rc.0",
"@coreui/utils": "^1.3.1",
"@coreui/vue": "^3.2.7",
"@coreui/vue-chartjs": "^1.0.6",
"@fortawesome/fontawesome-free": "^5.15.2",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^3.0.0-3",
"@popperjs/core": "^2.6.0",
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"bluebird": "^3.7.2",
"body-parser": "^1.19.0",
"chokidar": "^3.5.1",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dayjs": "^1.10.4",
"es6-promise": "^4.2.8",
"express": "^4.17.1",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.11.13",
"perfect-scrollbar": "^1.5.0",
"random-js": "^2.1.0",
"saslprep": "^1.0.3",
"serve-favicon": "^2.5.0",
"socket.io": "^3.1.0",
"socket.io-client": "^3.1.0",
"stylus": "^0.54.8",
"v-axios": "^3.0.3",
"v-clipboard": "^2.2.3",
"vue": "^3.0.0",
"vue-moment": "^4.1.0",
"vue-router": "^4.0.0-0",
"vue-sidebar-menu": "^4.7.4",
"vue-tables-2": "^2.1.80",
"vuelidate": "^0.7.6",
"vuex": "^4.0.0-0",
"vuex-persistedstate": "^4.0.0-beta.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"animate-sass": "^0.8.2",
"babel-eslint": "^10.1.0",
"css-loader": "^5.0.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.5",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"stylus-loader": "^3.0.2",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.45.0",
"webpack-cli": "^4.4.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"keywords": [
"Nodejs",
"Express",
"Mongoose",
"MongoDB",
"RestAPIs",
"CRUD"
],
"license": "MIT"
}
webpack.config.js
const WebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: [
__dirname + '/src/main.js'
],
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/',
libraryExport: 'default'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/'
},
},
'css-loader',
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
use: [
'url-loader'
]
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new WebpackPlugin({
template: __dirname + '/public/index.html',
inject: 'body'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false
})
],
resolve: {
extensions: ['.js', '.vue', '.json', '.scss'],
alias: {
'vue$': 'vue/dist/vue.common.js',
'@': resolve('src'),
styles: resolve('src/assets/scss')
}
},
devServer: {
contentBase: './public',
port: 7700
}
};