Module parse failer due to an inappropriate loader when I'm trying to use optional chaining in Next.js

Question

I'm creating some new feature in an app that is built with Next. I need to use optional chaining in some of my logic. When I introduce optional chaining I get the following error.

Module parse failed: Unexpected token (371:52) You may need an appropriate loader to handle this file type.

I searched the codebase and optional chaining is not used anywhere else.

Based on other suggestions, I've tried adding a Babel config as well as modifying the current Next config.

The current Next.config.js looks like:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.node = {
        fs: "empty"
      };
    }
    return config;
  }

I tried modifying it to look like this:

module.exports = {
  webpack: (config, { isServer }) => {
    // Include Babel configuration for both client and server
    config.module.rules.push({
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-optional-chaining']
        }
      }
    });

    if (!isServer) {
      config.node = {
        fs: 'empty'
      };
    }

    return config;
  }
};

I installed the relevant dependencies but these additions just produced more errors.