🐛 Bug: Node 22 breaks react/webpack example

[ksmithut]

Bug Report Checklist

• I have read and agree to Mocha's Code of Conduct and Contributing Guidelines
• I have searched for related issues and issues with the faq label, but none matched my issue.
• I have 'smoke tested' the code to be tested by running it outside the real test suite to get a better sense of whether the problem is in the code under test, my usage of Mocha, or Mocha itself.
• I want to provide a PR to resolve this

Expected

I expect to be able to run mocha and webpack with the same code using babel to transpile the code.

Actual

mocha runs the tests but the @babel/register isn't working properly

Minimal, Reproducible Example

I used the react-webpack example in the mocha-examples repo.

https://github.com/mochajs/mocha-examples/tree/main/packages/react-webpack

Versions

> ./node_modules/.bin/mocha --version
11.0.1

> node --version
v22.12.0

Additional Info

If I change the "type" in the package.json to commonjs, the tests start working, but webpack starts failing.

It's possible there's a solution that doesn't involve changing mochajs and it's just a configuration that's missing. In that case, this is more of an issue with the examples not working anymore.

[JoshuaKGoldberg]

Thanks for filing! I transferred this over to the right repo.

Could you please post the error messages you're seeing? Just a note that "it doesn't work" isn't quite enough to go off of.

When I try with Node 22.12.0, I get:

$ npm run test

> example-react-webpack-app@1.0.0 test
> mocha


 Exception during run: SyntaxError[ @/Users/josh/repos/mocha-examples/packages/react-webpack/test/app.spec.js ]: Unexpected token '<'
    at compileSourceTextModule (node:internal/modules/esm/utils:338:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:102:18)
    at #translate (node:internal/modules/esm/loader:437:12)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:484:27)
    at async ModuleJob._link (node:internal/modules/esm/module_job:115:19)

[ksmithut]

I apologize. Yes, here is the message (pretty much the same one you got there:

 Exception during run: SyntaxError[ @/Users/ksmithut/Code/local/mocha-examples/packages/react-webpack/test/app.spec.js ]: Unexpected token '<'
    at compileSourceTextModule (node:internal/modules/esm/utils:338:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:103:18)
    at #translate (node:internal/modules/esm/loader:437:12)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:484:27)
    at async ModuleJob._link (node:internal/modules/esm/module_job:115:19)

Then if I set "type": "commonjs", npm test starts working, but npm run build fails with:

> example-react-webpack-app@1.0.0 build
> webpack

asset index_bundle.js 1.58 KiB [emitted] (name: main)
./src/index.js 180 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import React from 'react';
| import ReactDOM from 'react-dom';
| import App from './app';

webpack 5.97.1 compiled with 1 error in 245 ms

I believe this is related to mocha/webpack/babel/node attempting to parse files in a different way or order now. Node 22 tries to parse the file in both ESM and CommonJS and falls back to one with the other fails. This might be an issue with webpack, babel, or mocha not handling the errors node is throwing at it, or something else because it seems to work fine in previous versions of node.