CoffeeScriptError: error: reserved word 'var' in Rails and Webpacker

Question

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"]
}

app/javascript/packs/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' ] }
]