chore(deps): bump esbuild to latest, remove shim

.changeset/gold-mice-pretend.md

@@ -0,0 +1,10 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+use esbuild's new automatic jsx transform
+
+there are no code changes from your end, but by using the new transform, we can prevent duplicate React imports from appearing in your build (#2987)
+
+the automatic jsx transform was introduced in React 17 and allows you to write your React code without ever needing to import React to just write jsx, if you used `useState` or other hooks, you still needed it. However up until now, esbuild didnt support this and instead recommended you to use a "shim" to add `import React from 'react'` to your files to get the same affect. This unfortantely has caused some pain points with some external libraries resulting in React being declared multiple times, but no more! (Chance said so himself, so... go tell him if it's busted)

packages/remix-dev/compiler.ts

@@ -26,11 +26,6 @@ import { serverRouteModulesPlugin } from "./compiler/plugins/serverRouteModulesP
 import { writeFileSafe } from "./compiler/utils/fs";
 import { urlImportsPlugin } from "./compiler/plugins/urlImportsPlugin";
 
-// When we build Remix, this shim file is copied directly into the output
-// directory in the same place relative to this file. It is eventually injected
-// as a source file when building the app.
-const reactShim = path.resolve(__dirname, "compiler/shims/react.ts");
-
 interface BuildConfig {
   mode: BuildMode;
   target: BuildTarget;
@@ -366,7 +361,6 @@ async function createBrowserBuild(
     platform: "browser",
     format: "esm",
     external: externals,
-    inject: config.serverBuildTarget === "deno" ? [] : [reactShim],
     loader: loaders,
     bundle: true,
     logLevel: "silent",
@@ -387,6 +381,8 @@ async function createBrowserBuild(
         config.devServerPort
       ),
     },
+    jsx: "automatic",
+    jsxDev: options.mode !== BuildMode.Production,
     plugins,
   });
 }
@@ -459,7 +455,6 @@ function createServerBuild(
         ? ["module", "main"]
         : ["main", "module"],
       target: options.target,
-      inject: config.serverBuildTarget === "deno" ? [] : [reactShim],
       loader: loaders,
       bundle: true,
       logLevel: "silent",
@@ -475,6 +470,8 @@ function createServerBuild(
           config.devServerPort
         ),
       },
+      jsx: "automatic",
+      jsxDev: options.mode !== BuildMode.Production,
       plugins,
     })
     .then(async (build) => {

packages/remix-dev/package.json

@@ -31,7 +31,7 @@
     "chalk": "^4.1.2",
     "chokidar": "^3.5.1",
     "dotenv": "^16.0.0",
-    "esbuild": "0.14.22",
+    "esbuild": "0.14.51",
     "exit-hook": "2.2.1",
     "express": "^4.17.1",
     "fast-glob": "3.2.11",