Rails application with Vuejs and TailwindCSS outputs error when starting server. Problem with webpack configuration or compatibility versions

Question

I am trying to add TailwindCSS to my rails application with the frontend managed by Vuejs. I get this error message when running yarn start.

webpack-dev-server --config config/webpack/environment.js
[webpack-cli] Failed to load '/home/maxycle/code/collaborasound/config/webpack/environment.js' config
[webpack-cli] TypeError: Cannot read properties of undefined (reading 'config')
    at Object.<anonymous> (/home/maxycle/code/collaborasound/config/webpack/environment.js:6:13)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at WebpackCLI.tryRequireThenImport (/home/maxycle/code/collaborasound/node_modules/webpack-cli/lib/webpack-cli.js:204:22)
    at loadConfigByPath (/home/maxycle/code/collaborasound/node_modules/webpack-cli/lib/webpack-cli.js:1404:38)
    at /home/maxycle/code/collaborasound/node_modules/webpack-cli/lib/webpack-cli.js:1454:88
error Command failed with exit code 2.

This is my package.json file

  "name": "collaborasound",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.10",
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1",
    "turbolinks": "^5.2.0",
    "vue": "^3.4.15",
    "vue-loader": "^17.4.2",
    "vue-template-compiler": "^2.7.16",
    "webpack": "^4.46.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-runtime": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@rails/webpacker": "^6.0.0",
    "babel-loader": "^8.2.3",
    "postcss-loader": "^4.3.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^4.7.0"
  },
  "scripts": {
    "start": "webpack-dev-server --config config/webpack/environment.js"
  }
}

This is my config/webpack/environment.js file

const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');

environment.config.node = {
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty',
};
// Babel Loader Configuration
environment.loaders.append('babel', {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime']
    },
  },
});

// PostCSS Loader Configuration
const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

environment.loaders.append('postcss', postcssLoader);

// Vue Loader Configuration
environment.loaders.prepend('vue', vue);

// Vue Loader Plugin
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());

module.exports = environment;

and this is my application.js file

import { createApp } from 'vue'
import App from '../components/App.vue'
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import '../stylesheets/application.scss'

const app = createApp(App);
document.addEventListener('DOMContentLoaded', () => {
    app.mount('#app');
  });
Rails.start()
Turbolinks.start()
ActiveStorage.start()

I cannot figure out how to fix this. If anyone can help I will be very happy.