aiji42/remix-esbuild-override

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

beppek opened this issue · 4 comments

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.

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

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

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

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.

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.