css files not being copied to dist folder webpack5 - sass

Question

I am getting the following error, along with broken css being applied to my webpage.
This at first glance looks like an issue with css, however this file doesn't exist at ALL in the dist folder that gets generated when I run npm run build:development
Refused to apply style from 'http://localhost:3457/dist/main.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
these are the run scripts in my package.json
"scripts": {
"start": "cross-env BABEL_ENV=development webpack-dev-server --progress --config conf/webpack.config.development.js",
"build:server": "cross-env BABEL_ENV=development webpack-dev-server --progress --config conf/webpack.config.development.js",
"build:development": "cross-env BABEL_ENV=development webpack --progress --config conf/webpack.config.development.js",
"build:staging": "cross-env BABEL_ENV=production webpack --progress --config conf/webpack.config.staging.js",
"build:production": "cross-env BABEL_ENV=production webpack --progress --config conf/webpack.config.production.js",
"clean": "rimraf dist",
"lint": "eslint . --ext=jsx --ext=js || true",
"lint:styles": "stylelint \"scss/*.scss\" --syntax scss || true"
},
and this is my webpack.config.development.js file that is supposed to configure the webpack, supposedly.
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mainPackageJson = require('./../package.json');
// File locations
const PATHS = {
js: path.resolve(__dirname, '../js'),
dist: path.resolve(__dirname, '../dist'),
modules: [
path.resolve(__dirname, '../node_modules/cleave.js')
]
};
exports = module.exports = {
mode: 'development',
stats: {
errorDetails: true
},
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://localhost:3457',
'webpack/hot/only-dev-server',
'./js/index'
],
output: {
path: PATHS.dist,
filename: '[name].js',
publicPath: '/dist'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {name: 'vendor', filename: 'vendor.js'}
}
}
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'eval-source-map',
module: {
noParse: /node_modules\/quill\/dist\/quill.js/,
rules: [
{
test: /\.gif$/,
type: 'asset/inline'
// loader: 'url-loader',
// query: {
// mimetype: 'image/png'
// }
},
{
test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
type: 'asset/inline'
// loader: 'url-loader',
// query: {
// mimetype: 'application/font-woff'
// }
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
type: 'asset/resource'
// loader: 'file-loader',
// query: {
// name: '[name].[ext]'
// }
},
{
test: /\.(sa|sc|c)ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: PATHS.dist
}
},
"css-loader",
"postcss-loader",
"sass-loader",
],
},
{
test: /\.jsx?$/,
rules: [{loader: 'react-hot-loader/webpack'}, {loader: 'babel-loader'}],
include: [
PATHS.js,
...PATHS.modules
]
}
]
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js'}),
require('autoprefixer'),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
// new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
__CONTENT__: JSON.stringify('#content'),
__DEV__: true,
__NOOP__: function () {
},
__VERSION__: JSON.stringify(mainPackageJson.version)
}),
new CopyPlugin(
{
patterns: [{
from: path.resolve(__dirname, '..', 'conf.js'),
to: 'conf.js'
}]
}
),
],
devServer: {
static: path.resolve(__dirname, '..'),
historyApiFallback: true,
hot: true,
host: 'localhost',
port: 3457
}
};
Perhaps I am misunderstanding something.
I am attempting to update the application from webpack3 to webpack5, among other outdated dependencies.
What is wrong?, why isn't a main.css file being generated or copied into the dist folder for it to be accessed?
When I had (which I deleted) files from an older dist folder built, it appeared to work correctly.