Node JSX Loader

jsx-loader.js

import { pathToFileURL } from 'url';
import { transformAsync } from '@babel/core';

const baseURL = pathToFileURL(`${process.cwd()}/`).href;
const extensionsRegex = /\.jsx$/;
const supportedModuleFormats = ['module', 'commonjs'];
const babelOptions = {
  presets: [
    ['@babel/preset-react']
  ]
};

export async function resolve(specifier, context, nextResolve) {
  if (extensionsRegex.test(specifier)) {
    const { parentURL = baseURL } = context;

    // Node.js normally errors on unknown file extensions, so return a URL for
    // specifiers ending in the CoffeeScript file extensions.
    return {
      shortCircuit: true,
      format: 'module',
      url: new URL(specifier, parentURL).href
    };
  } else {
    return nextResolve(specifier);
  }
}

export async function load(url, context, nextLoad) {
  if (!/node_modules/.test(url) && !/node:/.test(url)) {
    const { source, format } = await nextLoad(url, context, nextLoad);

    if (!source || (format && !supportedModuleFormats.includes(format))) {
      return { source, format };
    }

    const result = await transformAsync(source, babelOptions);

    return {
      source: result.code,
      format: 'module'
    };
  } else {
    return nextLoad(url);
  }
}