My vue js project at server startup should be built with webpack and then run with exspress js, but I get the following error
ERROR Error: Build failed with errors. Error: Build failed with errors. at C:\Users\Admin\Marketplays\node_modules@vue\cli-service\lib\commands\build\index.js:207:23 at C:\Users\Admin\Marketplays\node_modules\webpack\lib\webpack.js:168:8 at C:\Users\Admin\Marketplays\node_modules\webpack\lib\HookWebpackError.js:67:2 at Hook.eval [as callAsync] (eval at create (C:\Users\Admin\Marketplays\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Admin\Marketplays\node_modules\tapable\lib\Hook.js:18:14) at Cache.shutdown (C:\Users\Admin\Marketplays\node_modules\webpack\lib\Cache.js:154:23) at C:\Users\Admin\Marketplays\node_modules\webpack\lib\Compiler.js:1379:15 at Hook.eval [as callAsync] (eval at create (C:\Users\Admin\Marketplays\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Admin\Marketplays\node_modules\tapable\lib\Hook.js:18:14) at Compiler.close (C:\Users\Admin\Marketplays\node_modules\webpack\lib\Compiler.js:1372:23)
In webpack and vue configurations I wrote seemingly everything I needed, but still didn't work. Before this asked for libraries to support css, they are installed, now it's not clear what is being asked for
vue configurations:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
},
chainWebpack: config => {
config.module
.rule('css')
.uses.clear();
config.module
.rule('css')
.test(/\.css$/)
.use('style-loader')
.loader('style-loader');
config.module
.rule('css')
.use('css-loader')
.loader('css-loader')
.options({
modules: true,
sourceMap: true,
});
config.plugins.delete('extract-css');
},
};
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
},
};
webpack configuration:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}
};
I have installed all the necessary css libraries, installed vue-cli, re-configured the dependencies, cleared the cache, but when I run the project it gives the above error.