Why preset-react uses unexisted React.createElement when runtime is classic?

[krutoo]

Hi, I use this config:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: {
          node: true,
        },
      },
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'classic', // for both of react 17 and 18 
      },
    ],
    '@babel/preset-typescript',
  ],
};

And in result files there is no import of reactElement function from react package

Example of unexpected behavior: babel try it out

export function MyComponent() {
  return /*#__PURE__*/React.createElement("div", null, "Hello!");
}

How can i fix this and add valid imports to result files?

From:

export function MyComponent () {
  return <div>Hello!</div>
}

To:

import { createElement } from 'react';

export function MyComponent() {
  return createElement("div", null, "Hello!");
}

[nicolo-ribaudo]

Because classic React compilation (in every JSX compiler, not just Babel) expected you to manually add import React from "react" in your file whenever you want to use JSX.

This has been "fixed" with runtime: "automatic", that automatically adds imports for you.

[krutoo]

@nicolo-ribaudo but i want to use automatic runtime in source code and classic in result code

is it possible to do with babel reset react?

[krutoo]

I use custom transformation after build that looks like:

import fs from 'node:fs/promises';
import glob from 'fast-glob';

async function prependFile(path, content) {
  const data = await fs.readFile(path);
  const handle = await fs.open(path, 'w+');
  const insert = Buffer.from(content);

  await handle.write(insert, 0, insert.length, 0);
  await handle.write(data, 0, data.length, insert.length);
  await handle.close();
}

const react = `import * as React from 'react';\n`;

glob('./dist/esm/**/*.js')
  .then(items =>
    Promise.all(
      items.map(item => fs.readFile(item, 'utf-8').then(content => ({ filename: item, content }))),
    ),
  )
  .then(files => files.filter(item => item.content.includes('React.createElement')))
  .then(files => Promise.all(files.map(file => prependFile(file.filename, react))));