I am trying to upgrade my legacy Rails application that uses Webpacker from version 5 to version 6 (v6.0.0.rc.6) following these instructions. The goal is to move away from Webpacker to Shakapacker because Webpacker was retired 2 years ago.
Most of the changes I have made so far are in the Webpacker config files (see below). Now I am stuck with CoffeeScript files, which could not be converted correctly as far as I know. This is the error after running rake assets:precompile:

ERROR in ./app/javascript/packs/test.coffee
Module build failed (from ./node_modules/coffee-loader/dist/cjs.js):
CoffeeScriptError: /Users/abs/Documents/projects/legacy/app/javascript/packs/test.coffee:1:1: error: reserved word ‘var’
var hello;
^^^
at Object.loader (/Users/abs/Documents/projects/legacy/node_modules/coffee-loader/dist/index.js:37:14)

I’ve tried switching back and forth between different coffee-script versions, but the issue is still there. I also created another simpler CoffeeScript file to make debugging easier. However, I am running out of options. What did I do wrong here?

config/webpack/environment.js

const { webpackConfig } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue =  require('./loaders/vue')
const coffee = require('./loaders/coffee')
const sass = require('./loaders/sass.js')
const yaml = require('./loaders/yaml.js')
const pug = require('./loaders/pug.js')
const webpack = require('webpack');

webpackConfig.plugins = [
    ...webpackConfig.plugins,
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false,
    })
]

webpackConfig.module.rules = [
    vue,
    ...webpackConfig.module.rules,
    pug,
    coffee,
    sass,
    yaml
]

delete webpackConfig.module.rules['nodeModules']

const scssConfigIndex = webpackConfig.module.rules.findIndex((config) => ".scss".match(config.test))
webpackConfig.module.rules.splice(scssConfigIndex, 1)

webpackConfig.resolve = {
  extensions: [".coffee", ".vue", ".mjs", ".js", ".sass", ".scss", ".css", ".module.sass",
    ".module.scss", ".module.css", ".png", ".svg", ".gif", ".jpeg", ".jpg"]
}

module.exports = webpackConfig

config/webpack/loaders/coffee.js

module.exports = {
  test: /.coffee$/,
  use: ["babel-loader", "coffee-loader"]
}

test.coffee. Very simple.

hello = -> console.log('Hi!')

This is the output of the rules:

[
  { test: /.vue(.erb)?$/, use: [ [Object] ] },
  {
    test: [ /.html$/ ],
    exclude: [ /.(js|mjs|jsx|ts|tsx)$/ ],
    type: 'asset/source'
  },
  {
    test: [
      /.bmp$/,   /.gif$/,
      /.jpe?g$/, /.png$/,
      /.tiff$/,  /.ico$/,
      /.avif$/,  /.webp$/,
      /.eot$/,   /.otf$/,
      /.ttf$/,   /.woff$/,
      /.woff2$/, /.svg$/
    ],
    exclude: [ /.(js|mjs|jsx|ts|tsx)$/ ],
    type: 'asset/resource',
    generator: { filename: 'static/[name]-[hash][ext][query]' }
  },
  {
    test: /.(css)$/i,
    use: [
      '/Users/long.luongngoc/Documents/projects/cgi/mmog-le/node_modules/mini-css-extract-plugin/dist/loader.js',
      [Object]
    ]
  },
  {
    test: /.(js|jsx|mjs|ts|tsx|coffee)?(.erb)?$/,
    include: [
      '/Users/long.luongngoc/Documents/projects/cgi/mmog-le/app/javascript'
    ],
    exclude: /node_modules/,
    use: [ [Object] ]
  },
  { test: /.coffee(.erb)?$/, use: [ [Object] ] },
  { test: /.pug$/, use: [ [Object] ] },
  { test: /.coffee$/, use: [ 'babel-loader', 'coffee-loader' ] },
  {
    test: /.sass$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'resolve-url-loader',
      [Object]
    ]
  },
  { test: /.ya?ml$/, use: [ 'yaml-js-loader' ] }
]