🐛 Bug: react/webpack example breaks on JSX syntax in a .js file

[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.

[rschristian]

Is this really an issue for the examples rather than Mocha proper? We're seeing the same issue in the Preact repo, requiring that we add "type": "commonjs" (as noted) for Node 22+ which feels like a bug? Explicitly setting what is meant to be the default state feels odd.

[JoshuaKGoldberg]

Is this really an issue for the examples rather than Mocha proper?

Good question. I think at least this specific instance of the error is a problem in the example: #108 fixes it. IMO using JSX syntax in a .js file, not .jsx, is a "bug" for the examples repo. It might be a use case folks want but it's an odd syntax point that I don't think we want to recommend.

As for the general case of using Babel to test files with JSX syntax in Mocha, my hunch is this not specific to Mocha. Mocha generally tries not to be opinionated on how to configure tools like Babel. I'd look first to how Babel is acting. But if you have a reproduction that shows an issue in Mocha itself, we'd happily take an issue on the Mocha repo!

[rschristian]

Gotcha, I missed the .jsx bit (and generally happy to make that change anyhow).

Can try to get something together for a repro, but for us, using @babel/register alongside mocha in Node v22+ (as of the time of writing this) seems to not use the Babel config. Seemed to work in other contexts though, will have to get something proper together.