title: Esbuild with ReactJS.NET?
body: <p><strong>TL;DR</strong> How can I use <a href="https://esbuild.github.io/" rel="nofollow noreferrer">esbuild</a> with <a href="https://reactjs.net/bundling/webpack.html#for-existing-projects" rel="nofollow noreferrer">ReactJS.NET</a>?</p>
  <hr />
  <p><strong>Long version</strong></p>
  <p>ReactJS.NET expects the following from a &quot;bundle&quot;:</p>
  <pre><code>React.Exceptions.ReactNotInitialisedException: 'React has not been loaded correctly: missing (React, ReactDOM, ReactDOMServer). Please expose your version of React as global variables named 'React', 'ReactDOM', and 'ReactDOMServer'
  </code></pre>
  <p>What Webpack actually does is always quite unclear to me, but looking at the ReactJS.NET Webpack tutorial <a href="https://reactjs.net/bundling/webpack.html#for-existing-projects" rel="nofollow noreferrer">here</a>, this is the setup:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactDOMServer from 'react-dom/server';
  
  import RootComponent from './home.jsx';
  
  global.React = React;
  global.ReactDOM = ReactDOM;
  global.ReactDOMServer = ReactDOMServer;
  
  global.Components = { RootComponent };
  </code></pre>
  <p>Further at the sample webpack-config <a href="https://github.com/reactjs/React.NET/blob/main/src/React.Template/reactnet-webpack/webpack.config.js" rel="nofollow noreferrer">here</a>, there is this output-setting:</p>
  <pre><code>{
    [...]
    globalObject: 'this',
  }
  </code></pre>
  <p>Mirroring this in esbuild would be using <code>iife</code> and <code>esbuild.globalName = 'this'</code>, but it throws an error:</p>
  <pre><code> &gt; (global name):1:0: error: Expected identifier but found &quot;this&quot;
      1 │ this
  </code></pre>
  <p>Esbuild is quite stern on that it is a bundler (not a transpile-and-concatenator), so how would I tweak Esbuild to have the bundle mutate the <code>global</code> object to what React.NET expects? - And is it even possible?</p>
  <p>Thanks,
  Flemming</p>