aiji42 / remix-esbuild-override Goto Github PK

This is a library that makes it possible to change the configuration values of the Remix compiler (esbuild).

License: MIT License

JavaScript 5.83% TypeScript 92.90% Shell 1.27%

remix-esbuild-override's Introduction

💽 remix-esbuild-override

⚠️ While I believe you will most likely get a lot of benefit from using this library, it can sometimes destroy your product. Please be sure to verify it and make sure it is safe before releasing it to production.

What is this?

This is a library that makes it possible to change the configuration values of the Remix compiler (esbuild).

For example, Next.js allows you to control webpack option values from a configuration file (next.config.js). Remix does not have that functionality. A member of the development team says in a PR comment that this is because exposing the configuration values would lock in the compiler's choices and also risk breaking the application. I support that argument, but in actual use cases, I often want to change the settings. So I decided to provide that functionality outside of Remix (in this 3rd-party library).

Install

# npm
npm install -D remix-esbuild-override

# yarn
yarn add -D remix-esbuild-override

Add remix-esbuild-override to scripts.postinstall in package.json.

"scripts": {
  "postinstall": "remix-esbuild-override"
}

Run npm install or yarn install again to run postinstall

How to use

You can define function properties in remix.config.js that can override esbuild configuration values.

// remix.config.js
const { withEsbuildOverride } = require("remix-esbuild-override");

/**
 * Define callbacks for the arguments of withEsbuildOverride.
 * @param option - Default configuration values defined by the remix compiler
 * @param isServer - True for server compilation, false for browser compilation
 * @param isDev - True during development.
 * @return {EsbuildOption} - You must return the updated option
 */
withEsbuildOverride((option, { isServer, isDev }) => {
  // update the option
  option.plugins = [someEsbuildPlugin, ...option.plugins];

  return option;
});

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  // ...
};

📝 NOTE: Compilation is executed twice, once for the server and once for the browser.

Examples

If you have other example requests, please create an issue. Additional pull requests for examples are also welcome.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE file for details

remix-esbuild-override's People

Contributors

Stargazers

Watchers

Forkers

marcus-sa ekerik220 ronnylt jbovenschen barklund silverandroid elibates apaleslimghost richardhunghhw hanayashiki

remix-esbuild-override's Issues

CSS Modules

Example using CSS Modules

Issue with importing css files

Hello. I am having trouble using this package and the Chakra UI example provided in conjunction with importing CSS.

Log:

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

✘ [ERROR] [plugin css-file] Build failed with 2 errors:
error: Could not read from file: /workspaces/codespaces-blank/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:10:26:
      10 │ import mapboxStyles  from 'mapbox-gl/dist/mapbox-gl.css';
         ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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

    at setup (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/compiler/plugins/cssFilePlugin.js:58:13)
    at handlePlugins (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1277:21)
    at buildOrServeImpl (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:966:5)
    at Object.buildOrServe (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:774:5)
    at /workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:2113:17
    at new Promise (<anonymous>)
    at Object.build (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:2112:14)
    at build (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1959:51)
    at Object.<anonymous> (/workspaces/codespaces-blank/node_modules/remix-esbuild-override/dist/index.js:27:28)

 ✘ [ERROR] [plugin css-file] Build failed with 2 errors:
error: Could not read from file: /workspaces/codespaces-blank/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:11:24:
      11 │ import localStyles from "./styles.css"
         ╵                         ~~~~~~~~~~~~~~

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

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

    at setup (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/compiler/plugins/cssFilePlugin.js:58:13)
    at handlePlugins (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1277:21)
    at buildOrServeImpl (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:966:5)
    at Object.buildOrServe (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:774:5)
    at /workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:2113:17
    at new Promise (<anonymous>)
    at Object.build (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:2112:14)
    at build (/workspaces/codespaces-blank/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1959:51)
    at Object.<anonymous> (/workspaces/codespaces-blank/node_modules/remix-esbuild-override/dist/index.js:27:28)


Build failed with 2 errors:
app/root.tsx:10:26: ERROR: [plugin: css-file] Build failed with 2 errors:
error: Could not read from file: /workspaces/codespaces-blank/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:11:24: ERROR: [plugin: css-file] Build failed with 2 errors:
error: Could not read from file: /workspaces/codespaces-blank/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"
Error
    at Object.onCompileFailure (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/cli/commands.js:179:13)
    at Object.compile (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/compiler/remixCompiler.js:33:134)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.build (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/compiler/build.js:33:3)
    at async Object.build (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/cli/commands.js:174:3)
    at async Object.run (/workspaces/codespaces-blank/node_modules/@remix-run/dev/dist/cli/run.js:448:7)

I encountered this issue first with importing styles from react-map-gl, but it also occurs with importing any css files. I thought it was a pnpm issue, but when the packages are installed using npm the issue still occurs.

Reproduction repo: https://github.com/repository/remix-esbuild-override-css-import/blob/4cb370c7ff53808197cd3ab8494b9145aee5c9a4/app/root.tsx#L10-L11

how to use plugins with import syntax

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?

ReferenceError: __linariaStyle is not defined

./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)

Detect changes in lib/main.js of esbuild

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

Self-restart process after replacing esbuild

https://stackoverflow.com/questions/40835187/node-js-process-restart

Increase test coverage

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

Does not work with pnpm

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

Example doesn't work

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! 💯

Node.js compatibility for Cloudflare Workers

https://blog.cloudflare.com/workers-node-js-asynclocalstorage/

Today it was announced that node-compatible polyfill has been included in the Cloudflare Workers runtime.
This means that the role of this library is nearing its end. I am very happy about this. The edge runtime is definitely evolving.

I haven't tried it out yet, but if the polyfill bundle is no longer needed at build time, I will archive this repository and deprecate the npm package.

If anyone tries nodejs_compat, please report whether remix-esbuild-override is likely to continue to be needed to run certain libraries, or whether it can be confirmed to work without it.

compatibility_flags = [ "nodejs_compat" ]

Broken in 1.11.0

Not sure the best way to verify but it seems my changes are no longer working in remix 1.11.0

Error: Cannot find module 'esbuild'

Error: Cannot find module 'esbuild'
Require stack:
- /Users/uejima.aiji/git/common-brand/node_modules/remix-esbuild-override/dist/bin/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Object.<anonymous> (/Users/uejima.aiji/git/common-brand/node_modules/remix-esbuild-override/dist/bin/index.js:6:6)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/uejima.aiji/git/common-brand/node_modules/remix-esbuild-override/dist/bin/index.js'
  ]

Linaria example is outdated

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:

create-remix with basic setup
Follow steps from linaria example
Try to start

patch file doesn't work on Prisma v2.14.0

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.

Builds fail with ERROR: Could not resolve "_node-buffer-polyfill_.js" from plugin css-file

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.

Documentation for functions by jsDoc

withEsbuildOverride
esbuildOverrideOption

alternative solution by patching @remix-run/dev

Hi, I was previously using your package to modify the eslint config in my project, but I had issues with getting it to work reliably. Sometimes it worked, other times it didn't at all. I am in a somewhat complex environment (monorepo w/ pnpm workspaces), so I think that may be part of the issue.

I tried looking at other issues people had and debugging the issue myself, but was not successful. The defineProperty was being run properly and everything, but the override function did not run. So, I came up with another (and hopefully more reliable) solution by patching the @remix-run/dev package directly using pnpm patch.

https://gist.github.com/repository/c92c99e097dec0d33c97c9e8b8cb17bc

And it's used like this:

I don't know how, or even if, it can be implemented as an npm package, but I hope you are able to find some use out of it.

`options.logOverride` is being ignore

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.

Not working with Remix Run 1.7.6

trying to get esBuildDecorators or esbuildPluginTsc to work with remix using this plugin

I'm trying to use typeORM in a new remix project. However esbuild doesn't support emitDecoratorMeta so I'm using this plugin along with esbuildDecorators to try and get it working. For some reason however when accessing a model I'm still getting the error:

No metadata for "User" was found.

Wondering if there's anything I may be missing here.

const esbuildPluginTsc = require("esbuild-plugin-tsc");
const { esbuildDecorators } = require('@anatine/esbuild-decorators');
const { withEsbuildOverride } = require("remix-esbuild-override");

/**
 * Define callbacks for the arguments of withEsbuildOverride.
 * @param option - Default configuration values defined by the remix compiler
 * @param isServer - True for server compilation, false for browser compilation
 * @param isDev - True during development.
 * @return {EsbuildOption} - You must return the updated option
 */
withEsbuildOverride((option, { isServer, isDev }) => {
  // update the option
  option.plugins = [...option.plugins, esbuildDecorators({tsx:true, force:true})];

 //or option.plugins = [...option.plugins, esbuildPluginTsc()];

  return option;
});

Provide examples for practical use.

If you have other needs, let me know.

Refactors

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

How to set this up in a monorepo

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 🙏

setup lint-staged

Consider the case when esbuild override fails

Have it check if remix-esbuild-override has been executed.
Prompt to add to postinstall
Prompt to create and report an Issue

Can the example be refactored to handle JS & JSX for styled components?

Took me about 2 days to find the source of why this module wasn't seeming to work for our specific repo but works fine in the example. It appears as though the styled-components-esbuild-plugin.js file doesn't take into account projects that have *.js files that contain JSX. I tried changing the onLoad filter, but then it seemed to want to process even files in node_modules.

Any ideas? I'd rather not have to rename all out custom lib files to jsx.

Produce safer override methods

Instead of overriding esbuild, enter part of the build pipeline to pre-build

Issues with style imports of vanilla-extract for route

I'm trying to import a style that was created using vanilla-extract for a page but it doesn't seem to be working. The component style import works properly which leads me to believe there's some edge case for pages that need to be solved?

Minimal repro: https://codesandbox.io/p/github/silverAndroid/remix-esbuild-override/test?file=%2Fexamples%2Fvanilla-extract%2Fapp%2Froutes%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A7%2C%22endLineNumber%22%3A9%2C%22startColumn%22%3A7%2C%22startLineNumber%22%3A9%7D%5D
Stacktrace:

Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/setup
    at Object.getFileScope (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:33:11)
    at generateIdentifier (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:176:49)
    at composedStyle (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:349:19)
    at style (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:396:12)
    at Object.<anonymous> (/project/home/silverandroid/workspace/examples/vanilla-extract/app/routes/index.css.ts:5:26)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/@remix-run/serve/index.js:43:17
    at Layer.handle [as handle_request] (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/express/lib/router/layer.js:95:5)
    at next (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/express/lib/router/route.js:137:13)
    at next (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/express/lib/router/route.js:131:14)
    at next (/project/home/silverandroid/workspace/examples/vanilla-extract/node_modules/express/lib/router/route.js:131:14)

Can you give an example about Linaria in Remix ?

like title
Can sir give an example about linaria in remix run app ??

Loading Macros with Emotion

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:

I tried using decky but it looks like I need to generate the build asynchronously and I don't think that's supported.
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?