Bug: require is not defined using Remix Vite

[areichman]

Summary

I'm trying to migrate an app from the Classic Remix Compiler (CommonJS) to their newer Remix Vite plugin (ESM). Our Remix config file defines the polyfills and globals that we are currently using:

  ...
  browserNodeBuiltinsPolyfill: {
    modules: {
      zlib: true,
      buffer: true,
      path: true,
      process: true,
    },
    globals: {
      Buffer: true,
      process: true,
    },
  },
  ...

As expected, upon moving to Remix Vite, we encounter the following error without any polyfill logic defined in our Vite config file:

Uncaught Error: Module "zlib" has been externalized for browser compatibility. Cannot access "zlib.createGzip" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details. at Object.get (__vite-browser-external:zlib:3:11) at _index.tsx:2:26

However, adding this Vite plugin produces a require is not defined error.

plugins: [
    nodePolyfills({
      include: ['zlib'],
      globals: {Buffer: true, process: true},
    })
  ]

If I simply try to add all polyfills without any plugin options, e.g. nodePolyfills(), I get the following error instead:

[ERROR] Could not read from file: /Users/aaron/Git/my-app/node_modules/node-stdlib-browser/esm/mock/empty.js/promises ../../node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:17:23: 17 │ var promises = require('node:fs/promises');

Is there another step or configuration option I'm missing?

TypeScript 5.4.3 Remix 2.8.1 vite-plugin-node-polyfills 0.22.0

[fjuren]

[ERROR] Could not read from file: /Users/aaron/Git/my-app/node_modules/node-stdlib-browser/esm/mock/empty.js/promises

Running into this issue as well when migrating Remix to use Vite.

[MarkusTrb]

Same issue here

[ricky-harrys]

I'm seeing this issue as well. Specifically, when running shopify hydrogen codegen

In my Vite config:

   nodePolyfills({
      include: ['util'],
    }),

Error message: Cannot find module './mock/empty.js'

Shopify CLI is also using node-stdlib-browser which could be causing a compatibility issue?

[NicolasPL64]

Same issue here using Tauri + Vue. Error occurs in the built app, not in the development environment, though. I tried using this but the error changed to

ReferenceError: Cannot access 'Wb' before initialization

In my case it's due to the require("path") package.

[dror-weiss]

I'm using Vite + Sveltekit and had the same issue. Downloading to vite 4.x from 5.x solved it.

[milamer]

I wrote a mini plugin for remix, but you have to install the polyfill yourself

function remixBrowserPolyfill(alias: Record<string, string>) {
  return {
    name: 'remix-browser-polyfill',
    enforce: 'pre',
    async resolveId(source, importer, options) {
      if (options.ssr) return null
      if (importer?.endsWith('index.html')) return null
      if (source in alias) {
        const resolution = await this.resolve(alias[source]!, importer, {
          skipSelf: true,
        })
        if(!resolution) {
          throw new Error(`Could not resolve ${alias[source]} module`)
        }
        return resolution.id
      }
      return null
    },
  } satisfies Plugin
}

...
plugins: [
    remix(),
    remixBrowserPolyfill({ path: 'path-browserify' }),
    tsconfigPaths(),
  ],
...