JSX Loader for node esm experimental loaders

Feature Request

I’ve been trying to use node.js new esm loader by adding "type": "module", in package.json and running script using node --es-module-specifier-resolution=node myScript.js

The script includes some import to React component :

import MyReactComponent from '../components/MyReactComponent';

Yet I get the following exception :

(node:11964) ExperimentalWarning: The ESM module loader is experimental. file:///D:/…/components/MyReactComponent.js:58 <div className="col-lg-6 col-md-12 ^ SyntaxError: Unexpected token ‘<’ at Loader.moduleStrategy (internal/modules/esm/translators.js:122:18)

Untill now I was able to use :

require('@babel/register')({
    presets: [
        ['@babel/env', { targets: { node: true } }],
        '@babel/react',
    ],
});

But now, with the new node esm loader, require does not exist and its irrelevant. How can I load JSX loader while using nodejs ES Modules ?

Node.js does say they support loaders : https://nodejs.org/api/esm.html#esm_experimental_loaders with --experimental-loader ./loader-name.mjs

But I could not find one for React.

[joeldenning]

I have created an ESM NodeJS loader for babel at https://github.com/node-loader/node-loader-babel.

I think the best approach would be to add a similar implementation to @babel/node. @nicolo-ribaudo would you be open to a pull request adding this to @babel/node?

[callumgare]

@JLHwung Ah, bummer. Looks like I misunderstood what ESM loaders meant. Back to waiting I guess.