Trying to get this to run with my Cloudflare Pages + Remix + Emotion + Chakra-UI app. After following the README.md guide, I'm encountering the following error:

$ npm run dev
Building Remix app in development mode...
Error: Error loading Remix config in /Users/.../remix.config.js
    at Object.readConfig (/Users/.../node_modules/@remix-run/dev/config.js:67:11)
    at Object.build (/Users/.../node_modules/@remix-run/dev/cli/commands.js:151:31)
    at Object.run (/Users/.../node_modules/@remix-run/dev/cli/run.js:351:22)
    at Object.<anonymous> (/Users/.../node_modules/@remix-run/dev/cli.js:16:11)

First I thought this was a misconfiguration problem (or possibly an incompatibility with CF Pages), but it turns out that your /example runs into the same problem. I see that this package was just freshly upgraded 5 hours ago, so I'll downgrade to v1 for now. Thank you for investing your time in maintaining this publically, can't wait to have this fixed! 💯

• [x] emotion(styled) x cloudflare
• [x] emotion(css props) x cloudflare
• [x] chakra-ui x cloudflare
• [ ] preact x Runtime is anywhere
• [x] ~~supabase-js x cloudflare~~
  • With the next release of remix, changes to mainFields will no longer be necessary. https://github.com/remix-run/remix/pull/1977
• [x] mantine x cloudflare
• [ ] stylus x Runtime is anywhere
• [x] linaria x Runtime is anywhare https://github.com/remix-run/remix/issues/1619
• [x] vanilla-extract x Runtime is anywhere https://github.com/seek-oss/vanilla-extract/discussions/178
• [ ] ~~Buffer polyfill (using @magic-sdk/admin v1.3.4)~~

If you have other needs, let me know.

Thanks for creating this packages, with this package I was able to make vanilla-extract and remix.run working together with a custom esbuild plugin. So I decided to contribute the code to your examples.

Let me know if you want me to change something?

It seems like the patching doesn't work properly when using pnpm as the package manager. Should be fairly easy to re-produce - take one of the samples you have (we're using mantine). Steps to reproduce:

• Remove node_modules folder
• Install pnpm globally
• Run pnpm install

I also reproduced the problem in this repo: https://github.com/eshaham/remix-esbuild-override-pnpm

Hi AijiUejima,

Thanks much for this great plugin, I have a silly question, for some of the esbuild it is using import rather than requires to import the plugins. Eg. I am interested in using this one - node-globals-polyfill

const GlobalsPolyfills = require("@esbuild-plugins/node-globals-polyfill")
withEsbuildOverride((option, { isServer, isDev }) => {
  // update the option
  console.log(option)
  option.plugins = [
    GlobalsPolyfills({
      process: true,
      buffer: true,
      define: { "process.env.var": '"hello"' }, // inject will override define, to keep env vars you must also pass define here https://github.com/evanw/esbuild/issues/660
    }),
    ...option.plugins,
  ]
  return option
})

then it says GlobalsPolyfills is not a function

any hint on how to use the plugins with import directive?

We're using NX as our monorepo framework, and have a couple of remix apps set up and running from within the repo. We also use Mantine 😅 We've been running into the same issues this project is trying to solve, specifically, trying to deploy one of the apps to Cloudflare produces Buffer is not defined errors. Since all of our dependencies are in the monorepo root package.json (that's the recommended way of working with NX), I've tried doing a few different things setting up what's described in your mantine-cloudflare readme, but unfortunately, nothing worked - still getting the Buffer error. Would appreciate your help 🙏

I was very annoyed at finding out, that the "official" example for using Styled-Components with Remix doesn't actually work. To get proper hydration, you need the serverside rendered styles to use the same ID generation seed as the client-side ones.

This is possible using an official Babel plugin, and I found a wrapper for that Babel plugin as an esbuild plugin. Putting these things together, I managed to get this working, and I'm extremely happy that it does in fact work.

It supports all the things, that the Babel plugin for Styled-Components does including deterministic class name generation and display names included in class names while in debug. Though I didn't work on adding support for config, so that's left as an exercise for the reader.

This example is build on the vanilla-extract example.

package.json

{
  "name": "app",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev:remix": "remix watch",
    "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public",
    "dev": "remix build && run-p dev:*",
    "start": "cross-env NODE_ENV=production npm run dev:wrangler",
    "typecheck": "tsc --noEmit",
    "postinstall": "patch-package && remix-esbuild-override",
    "generate": "cross-env PRISMA_CLIENT_ENGINE_TYPE=dataproxy prisma generate",
    "seed": "ts-node -r tsconfig-paths/register"
  },
  "dependencies": {
    "@emotion/css": "^11.9.0",
    "@mantine/core": "^4.2.1",
    "@mantine/dropzone": "^4.2.1",
    "@mantine/hooks": "^4.2.1",
    "@mantine/notifications": "^4.2.2",
    "@mantine/rte": "^4.2.1",
    "@mantine/ssr": "^4.2.1",
    "@nishanths/zoom.js": "^3.1.0",
    "@prisma/client": "^3.12.0",
    "@remix-run/cloudflare": "^1.5.1",
    "@remix-run/cloudflare-pages": "^1.5.1",
    "@remix-run/node": "^1.5.1",
    "@remix-run/react": "^1.5.1",
    "@remix-run/serve": "^1.5.1",
    "@remix-run/server-runtime": "^1.5.1",
    "@tabler/icons": "^1.67.1",
    "axios": "^0.27.2",
    "bcrypt": "^5.0.1",
    "cloudinary": "^1.29.1",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "geoip-lite": "^1.4.5",
    "highlight.js": "^11.5.1",
    "isbot": "^3.5.0",
    "jsonwebtoken": "^8.5.1",
    "marked": "^4.0.14",
    "nodemailer": "^6.7.3",
    "prisma": "^3.14.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-portal": "^4.2.2",
    "remix": "^1.5.1",
    "remix-utils": "^3.2.0",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^3.10.0",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@remix-run/dev": "^1.5.1",
    "@types/bcrypt": "^5.0.0",
    "@types/geoip-lite": "^1.4.1",
    "@types/jsonwebtoken": "^8.5.8",
    "@types/marked": "^4.0.3",
    "@types/node": "^17.0.36",
    "@types/nodemailer": "^6.4.4",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "@types/react-portal": "^4.0.4",
    "@types/styled-components": "^5.1.25",
    "cross-env": "^7.0.3",
    "esbuild-plugin-alias": "^0.2.1",
    "npm-run-all": "^4.1.5",
    "patch-package": "^6.4.7",
    "remix-esbuild-override": "^3.0.4",
    "ts-node": "^10.7.0",
    "tsconfig-paths": "^4.0.0",
    "typescript": "^4.1.2",
    "wrangler": "^2.0.7"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "platform": "node",
  "engines": {
    "node": ">=14"
  }
}

when i run yarn install it show error like this👇

patch-package 6.4.7
Applying patches...

**ERROR** Failed to apply patch for package @prisma/client at path
  
    node_modules/@prisma/client

  This error was caused because @prisma/client has changed since you
  made the patch file for it. This introduced conflicts with your patch,
  just like a merge conflict in Git when separate incompatible changes are
  made to the same piece of code.

  Maybe this means your patch file is no longer necessary, in which case
  hooray! Just delete it!

  Otherwise, you need to generate a new patch file.

  To generate a new one, just repeat the steps you made to generate the first
  one.

  i.e. manually make the appropriate file changes, then run 

    patch-package @prisma/client

  Info:
    Patch file: patches/@prisma+client+3.12.0.patch
    Patch was made for version: 3.12.0
    Installed version: 3.14.0

---
patch-package finished with 1 error(s).
💽 esbuild patch by remix-esbuild-override is complete.

when i run yarn dev it got error like 👇

Building Remix app in development mode...
💽 Override esbuild. Your custom config can be used to build for Remix.

✘ [ERROR] Could not resolve "async_hooks"

    node_modules/@prisma/client/runtime/index.js:67:45:
      67 │ var import_async_hooks = __toModule2(require("async_hooks"));
         ╵                                              ~~~~~~~~~~~~~

  The package "async_hooks" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

 ✘ [ERROR] Could not resolve "stream/web"

    node_modules/@prisma/client/runtime/index.js:27978:33:
      27978 │         ReadableStream = require("stream/web").ReadableStream;
            ╵                                  ~~~~~~~~~~~~

  The package "stream/web" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

 ✘ [ERROR] Could not resolve "perf_hooks"

    node_modules/@prisma/client/runtime/index.js:33032:34:
      33032 │     var { performance } = require("perf_hooks");
            ╵                                   ~~~~~~~~~~~~

  The package "perf_hooks" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

 ✘ [ERROR] Could not resolve "util/types"

    node_modules/@prisma/client/runtime/index.js:33546:35:
      33546 │     var { isUint8Array } = require("util/types");
            ╵                                    ~~~~~~~~~~~~

  The package "util/types" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


Build failed with 4 errors:
node_modules/@prisma/client/runtime/index.js:67:45: ERROR: Could not resolve "async_hooks"
node_modules/@prisma/client/runtime/index.js:27978:33: ERROR: Could not resolve "stream/web"
node_modules/@prisma/client/runtime/index.js:33032:34: ERROR: Could not resolve "perf_hooks"
node_modules/@prisma/client/runtime/index.js:33546:35: ERROR: Could not resolve "util/types"
Error
    at Object.onBuildFailure (/work/app/node_modules/@remix-run/dev/cli/commands.js:157:13)
    at buildEverything (/work/app/node_modules/@remix-run/dev/compiler.js:281:13)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.build (/work/app/node_modules/@remix-run/dev/compiler.js:106:3)
    at async Object.build (/work/app/node_modules/@remix-run/dev/cli/commands.js:152:3)
    at async Object.run (/work/app/node_modules/@remix-run/dev/cli/run.js:470:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

• Periodic monitoring of UNPKG with scheduled tasks in github actions
  • https://unpkg.com/esbuild@latest/lib/main.js
• Raise an Issue when a change occurs that cannot be adapted by patch
  • Keep a list of checked versions on file to avoid duplicates

• Fixed value for ["@remix-run/dev/node_modules/esbuild", "esbuild"]
• unnecessary https://github.com/aiji42/remix-esbuild-override/blob/main/src/index.ts#L2

• [ ] When the pattern cannot be found and patched from the esbuild code
• [ ] Cases where Object.defineProperty fails (not patched) #13
• [ ] When an unintended argument is passed to withEsbuildOverride
  • Display appropriate error messages

I've added this override to my Remix project deploying to Cloudflare Pages, but my builds fail with the following error

✘ [ERROR] [plugin css-file] Build failed with 2 errors:
error: Could not read from file: /path-to-project/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js
node_modules/@esbuild-plugins/node-globals-polyfill/_buffer.js:1:23: ERROR: Could not resolve "_node-buffer-polyfill_.js"

    app/root.tsx:15:19:
      15 │ import styles from "./styles/app.css";
         ╵                    ~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssFilePlugin.js:61:12:
      61 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/path-to-project/node_modules/@remix-run/dev/dist/compiler/plugins/cssFilePlugin.js:61:13)
    at handlePlugins (/path-to-project/node_modules/esbuild/lib/main.js:853:23)
    at Object.buildOrServe (/path-to-project/node_modules/esbuild/lib/main.js:1147:7)
    at /path-to-project/node_modules/esbuild/lib/main.js:2104:17
    at new Promise (<anonymous>)
    at Object.build (/path-to-project/node_modules/esbuild/lib/main.js:2103:14)
    at build (/path-to-project/node_modules/esbuild/lib/main.js:1950:51)
    at Object.<anonymous> (/path-to-project/node_modules/remix-esbuild-override/dist/index.js:27:28)
    at Object.compile (/path-to-project/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js:126:43)

I'm using Tailwind which might have something to do with this. Trying to use this lib to help with Stripe error Buffer is not defined when verifying webhook signatures.

Thanks for maintaining this project! I was able to able to setup theme-ui with Cloudflare pages. The only annoying thing is that I keep getting this warning:

▲ [WARNING] Top-level "this" will be replaced with undefined since this file is an ECMAScript module [this-is-undefined-in-esm]

    functions/[[path]].js:16698:15:
      16698 │             }, this),
            │                ~~~~
            ╵                undefined

After some googling I was able to find a similar issue in esbuild repo however it doesn't seem to work. I will appreciate if you can point me in the right direction. Reproduction repo.

In linaria folder:

• if using with provided deps from lockfile everything is ok
• using with latest @remix-run/* (currently 1.4.0 -> 1.7.0) deps breaks application with following error:

Unexpected Server Error

ReferenceError: React is not defined

• updating linaria deps to latest (pnpm up "@linaria/*" -L) breaks build

Alternative str:

1. create-remix with basic setup
2. Follow steps from linaria example
3. Try to start

I am trying to figure out how to load macros so I don't get this error using emotion:

Error: Component selectors can only be used in conjunction with @emotion/babel-plugin.
    at handleInterpolation (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:92:13)
    at Object.serializeStyles (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:272:15)
    at /Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.dev.js:124:34
    at /Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:66:16
    at processChild (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at handleRequest (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/app/entry.server.tsx:22:16)

This happens when you try to use a component selector like this:

const Item1 = styled("div")`
  background-color: green;
`;


const Item2 = styled("div")`
  ${Item1} {
    color: red;
  }
`;

None of the remix + emotion examples I've seen have component selectors and whenever I try to use it, I get the same error.

I tried two different solutions:

1. I tried using decky but it looks like I need to generate the build asynchronously and I don't think that's supported.
2. I tried to use esbuild-plugin-babel so I could use @emotion/babel-plugin but I get the following error trying to use it in my remix.config.js file:

Error: Error loading Remix config at /Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/remix.config.js
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/esbuild-plugin-babel/src/index.js from /Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/remix.config.js not supported.
Instead change the require of index.js in /Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/remix.config.js to a dynamic import() which is available in all CommonJS modules.
    at Object.readConfig (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@remix-run/dev/dist/config.js:84:13)
    at Object.dev (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@remix-run/dev/dist/cli/commands.js:278:18)
    at dev (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@remix-run/dev/dist/cli/run.js:184:3)
    at Object.run (/Users/scefali/Fun/remix/remix-esbuild-override/examples/remix-with-emotion/node_modules/@remix-run/dev/dist/cli/run.js:517:7)

I don't think I can use an ES module for remix.config.js. So is there any way I can do this?

./libre-billboardoo-frontend/build/index.js:522
var RankHeaderStyle = __linariaStyle, headerStyle = import_core.css`
                      ^
ReferenceError: __linariaStyle is not defined
    at Object.<anonymous> (./libre-billboardoo-frontend/build/index.js:522:23)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:834:12)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (./libre-billboardoo-frontend/node_modules/@remix-run/serve/dist/cli.js:48:13)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1166:10)

remix-esbuild-override not working with linaria 4.x (working with linaria 3.0.0-beta.x)