Coffeescript + React + Babel => unable to get Webpack to run loaders is proper order

[bj-cmi]

We have a mature Rails 6 app that is transitioning from jQuery+CoffeeScript to React, and are currently upgrading it from Rails 6 to 7. We are following the instructions to upgrade from Webpacker to Shakapacker, and are quite close to replicating our prior setup. However, we are blocked by compilation errors with our CoffeeScript. All CS modules are failing to compile with this error:

ERROR in ./app/webpacker/javascripts/app/accidents.js.coffee Module build failed (from ./node_modules/coffee-loader/dist/cjs.js): CoffeeScriptError: /dev/app/webpacker/javascripts/app/accidents.js.coffee:1:1: error: reserved word 'function' function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } ^^^^^^^^ at Object.loader (/dev/node_modules/coffee-loader/dist/index.js:45:14)

This error suggests that the Babel loader is being run before the CoffeeScript loader, and treating the CS files like JS.

In our prior Webpacker v5 configuration, we used the environment's "loaders" property to prepend the CoffeeScript loader to the beginning of all loaders so that CS would be translated into JS before any other transpilations occurred.

We have tried adding a custom configuration as follows, with the "use" array specifying coffee-loader at the bottom (to run first) and babel-loader (to run second):

const { webpackConfig, merge } = require('shakapacker')

const config = merge({
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery']
        }
      },
      {
        test: /\.coffee(\.erb)?$/,
        use: [
          "babel-loader",
          "coffee-loader",
        ]
      },
    ],
  },

... however this does not appear to work. When printing the generated webpackConfig, we see:

Loading ENV specific webpack configuration file /dev/config/webpack/development.js
{
  "module": {
    "rules": [
      {
        "test": "/dev/node_modules/jquery/dist/jquery.js",
        "loader": "expose-loader",
        "options": {
          "exposes": [
            "$",
            "jQuery"
          ]
        }
      },
      {
        "test": {},
        "use": [
          "babel-loader",
          "coffee-loader"
        ]
      },
      {
        "test": [
          {}
        ],
        "exclude": [
          {}
        ],
        "type": "asset/source"
      },

Interestingly, all "test" objects appear empty in the final config.

Any suggestions appreciated!

[bj-cmi]

Solved by discovering that it is not necessary to add coffee-loader as part of the custom configuration -- by doing so we were compiling the coffee script twice.

Looking at how Shakapacker works... it's smart enough to recognize that when coffee-loader is included, it automatically includes coffee-loader in the right place within the configuration.