[esbuild] Error with Remix esbuild

[redbugz]

Environment

Standard Remix template, latest Linaria, and remix-esbuild-override to allow the Linaria plugin to be injected into the Remix esbuild config.

• Linaria version: 4.5.4
• Bundler (+ version): esbuild (0.17.6 from Remix 1.19.3 )
• Node.js version: 20.6.0
• OS: latest Mac & Codesandbox VM

Description

Using the @linaria/esbuild plugin with Remix results in ReferenceError: React is not defined

I added some logs to node_modules/@linaria/esbuild/dist/index.js and discovered this error occurs because the input to the linaria esbuild plugin looks like this:

import type { V2_MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { css } from '@linaria/core';

import { useOptionalUser } from "~/utils";

export const meta: V2_MetaFunction = () => [{ title: "Remix Notes" }];

const linariatest = css`
  text-transform: uppercase;
  font-family: monospace;
  font-size: 32;
`;

export default function Index() {
  const user = useOptionalUser();
  return (
    <main className="relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center">
      <div className="relative sm:pb-16 sm:pt-8">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">

Which the Linaria esbuild plugin transforms to this:

import "_index_s37cb9.linaria.css"; import { Link } from "@remix-run/react";
import { useOptionalUser } from "~/utils";
export const meta = () => [{
  title: "Remix Notes"
}];
const linariatest = "qnip5ad";
export default function Index() {
  const user = useOptionalUser();
  return /* @__PURE__ */React.createElement("main", {
    className: "relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center"
  }, /* @__PURE__ */React.createElement("div", {
    className: "relative sm:pb-16 sm:pt-8"
  }, /* @__PURE__ */React.createElement("div", {
    className: "mx-auto max-w-7xl sm:px-6 lg:px-8"
  }, /* @__PURE__ */React.createElement("div", {
    className: "relative shadow-xl sm:overflow-hidden sm:rounded-2xl"

However React has not been imported so it fails to compile If I add an import for React, then the code works:

import "_index_s37cb9.linaria.css"; import React from 'react'; import { Link } from "@remix-run/react";

I'm not sure the best way to resolve this as I am not that familiar with esbuild nor Remix, just exploring some options, but we use Linaria heavily in our current webpack build on a different project so I'm familiar with the general ways Linaria works with bundlers.

Reproducible Demo

https://codesandbox.io/p/sandbox/affectionate-bardeen-24zhgm?file=%2FREADME.md