Dynamic require of "xxx" is not supported

[noBaldAaa]

it's my code:

import * as ReactDOM from "react-dom";
import React from "react";

const App = () => {
  return (
    <div>
        hello world
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

it's my config:

import { htmlPlugin } from "@craftamap/esbuild-plugin-html";

const options = {
  bundle: true,
  external: ["react", "react-dom"],
  plugins: [
    htmlPlugin({
      files: [
        {
         xxx,
          extraScripts: [
             {
               src: "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js",
             },
             {
               src: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js",
             },
          ],
        },
      ],
    }),
};

code run error：

Error: Dynamic require of "react" is not supported
Error: Dynamic require of "react-dom" is not supported

I want to why?
how can fix?

[evanw]

Typically this happens when you bundle code that does something like require('react'), you mark react as external (i.e. telling esbuild to exclude it from the bundle), and then run the bundled code in an environment that doesn't implement the require function (such as in a web browser).

To fix this, you need to either not mark react as external, in which case it will be bundled, or you need to implement a require function to tell esbuild where it can find the external dependencies. For example:

<script>
window.require = function(name) {
  if (name === "react") {
    return window.globalReactObjectFromSomewhere
  }
  throw Error("Don't know how to require " + name)
}
</script>

[noBaldAaa]

Thank you for your reply。I understand its working principle，This is my solution：

    {
      name: "external-plugin",
      setup(build) {
        build.onResolve({ filter: /^react$/ }, (args) => {
          return { path: args.path, namespace: "react" };
        });
        build.onLoad({ filter: /.*/, namespace: "react" }, (args) => {
          return {
            contents: "module.exports=window.React",
          };
        });

        build.onResolve({ filter: /^react-dom/ }, (args) => {
          return { path: args.path, namespace: "react-dom" };
        });
        build.onLoad({ filter: /.*/, namespace: "react-dom" }, (args) => {
          return {
            contents: "module.exports=window.ReactDOM",
          };
        });
      },
    },

[noBaldAaa]

but I think this is esbuild should solve，this make me very uncomfortable