Webpack (mini-css-extract-plugin) Error: Multiple chunks emit assets to the same filename app.js (chunks src and css)

I’ve been toiling with this for a while, and even with the broadly unintelligible structure of webpack, I can’t find any guidance on how this is supposed to work.

Context:

I have multiple JS files and multiple CSS files. I want to combine them for production deployment. I’ve been using webpack for a while successfully with just JS, but trying to add CSS yields an error:

Error: Conflict: Multiple chunks emit assets to the same filename app.js (chunks src and css)
    at /<redacted>/node_modules/webpack/lib/Compilation.js:4617:12
    at /<redacted>/node_modules/webpack/lib/Cache.js:91:34
    at Array.<anonymous> (/<redacted>/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
    at /<redacted>/node_modules/webpack/lib/Cache.js:91:19
    at Hook.eval [as callAsync] (eval at create (/<redacted>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
    at Cache.get (/<redacted>/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/<redacted>/node_modules/webpack/lib/CacheFacade.js:111:15)
    at /<redacted>/node_modules/webpack/lib/Compilation.js:4563:22
    at arrayEach (/<redacted>/node_modules/neo-async/async.js:2405:9)
    at Object.each (/<redacted>/node_modules/neo-async/async.js:2846:9)

My webpack.config.js file looks like this:

import path from 'path';
import {fileURLToPath} from 'url';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

// __dirname doesn't work with ES6 modules :/
// https://bobbyhadz.com/blog/javascript-dirname-is-not-defined-in-es-module-scope
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    src: './src/index.js',
    css: [
      path.resolve(__dirname, './css/styles.css'),
      path.resolve(__dirname, './css/properties.css'),
    ]
  },

  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, 'dev'),
    filename: 'app.js',
    library: "app"
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader"
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: 'app.css',
  })]
};

My goal is to have multiple css files and multiple js files merged (and minified) into a single JS (app.js) and a single CSS file (app.css).

Has anyone been able to get this working?

Environment

From package.json

"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.7.3",
"source-map-loader": "^4.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^5.0.1"

Node version:

node --version
v14.17.1