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

[beppek]

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.

[ncrmro]

I'm seeing the same issue in mine when trying to import a css file

https://github.com/ncrmro/remix-walletconnect

[jdnichollsc]

I can confirm this issue while using the below patch @remix-run+dev+1.10.1.patch to support process.env variables from Browser for Web3 packages:

diff --git a/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js b/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js
index 1fa83a5..d5493f1 100644
--- a/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js
+++ b/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js
@@ -16,6 +16,7 @@ var path = require('path');
 var module$1 = require('module');
 var esbuild = require('esbuild');
 var nodeModulesPolyfill = require('@esbuild-plugins/node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var assets = require('./assets.js');
 var dependencies = require('./dependencies.js');
 var loaders = require('./loaders.js');
@@ -80,7 +81,17 @@ const createEsbuildConfig = (config, options) => {
   let plugins = [deprecatedRemixPackagePlugin.deprecatedRemixPackagePlugin(options.onWarning), cssFilePlugin.cssFilePlugin({
     mode: options.mode,
     rootDirectory: config.rootDirectory
-  }), urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), browserRouteModulesPlugin.browserRouteModulesPlugin(config, /\?browser$/), emptyModulesPlugin.emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/), nodeModulesPolyfill.NodeModulesPolyfillPlugin()];
+  }),
+    urlImportsPlugin.urlImportsPlugin(),
+    mdx.mdxPlugin(config),
+    browserRouteModulesPlugin.browserRouteModulesPlugin(config, /\?browser$/),
+    emptyModulesPlugin.emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/),
+    nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({
+      buffer: true,
+      process: true
+    }),
+    nodeModulesPolyfill.NodeModulesPolyfillPlugin()
+  ];
   return {
     entryPoints,
     outdir: config.assetsBuildDirectory,
diff --git a/node_modules/@remix-run/dev/dist/compiler/compilerServer.js b/node_modules/@remix-run/dev/dist/compiler/compilerServer.js
index 21cbad7..356e3c0 100644
--- a/node_modules/@remix-run/dev/dist/compiler/compilerServer.js
+++ b/node_modules/@remix-run/dev/dist/compiler/compilerServer.js
@@ -16,6 +16,7 @@ var path = require('path');
 var esbuild = require('esbuild');
 var fse = require('fs-extra');
 var nodeModulesPolyfill = require('@esbuild-plugins/node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var loaders = require('./loaders.js');
 var cssFilePlugin = require('./plugins/cssFilePlugin.js');
 var deprecatedRemixPackagePlugin = require('./plugins/deprecatedRemixPackagePlugin.js');
@@ -68,6 +69,10 @@ const createEsbuildConfig = (config, assetsManifestChannel, options) => {
     rootDirectory: config.rootDirectory
   }), urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), emptyModulesPlugin.emptyModulesPlugin(config, /\.client(\.[jt]sx?)?$/), serverRouteModulesPlugin.serverRouteModulesPlugin(config), serverEntryModulePlugin.serverEntryModulePlugin(config), serverAssetsManifestPlugin.serverAssetsManifestPlugin(assetsManifestChannel.read()), serverBareModulesPlugin.serverBareModulesPlugin(config, options.onWarning)];
   if (config.serverPlatform !== "node") {
+    plugins.unshift(nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({
+      buffer: true,
+      process: true
+    }));
     plugins.unshift(nodeModulesPolyfill.NodeModulesPolyfillPlugin());
   }
   return {

Any help is really appreciated! <3

[aiji42]

I am currently initiating an investigation into this issue.

I have found the cause of the problem, but am still looking for a permanent fix.

Disabling the cssFilePlugin may be a workaround for this problem.

withEsbuildOverride((option, { isServer }) => {
  option.plugins = [
    ...option.plugins.filter(({ name }) => name !== 'css-file'),
    GlobalsPolyfills({ buffer: true }),
  ];

  return option;
});

cssFilePlugin is a plugin to resolve url() paths in css files, so if you are not using url(), disabling this plugin should not be a problem.

[aiji42]

I've successfully worked around the problem by inserting @esbuild-plugins/node-globals-polyfill directly into the inject instead of inserting it into the plugin list.

withEsbuildOverride((option, { isServer }) => {
  if (isServer)
    option.inject = [
      ...(option.inject ?? []),
      require.resolve('@esbuild-plugins/node-globals-polyfill/Buffer.js'),
      require.resolve('@esbuild-plugins/node-globals-polyfill/process.js')
    ]

  return option;
});

It is possible to insert both process and buffer as in the example above, but remove the ones you do not need as appropriate.

There is nothing more that remix-esbuild-override can support, so this issue is closed.