Bug: polyfill of path doesn't work with remix

[nikolailehbrink]

Summary

Hi there, I tried to polyfill the "path" module I get the following error:

module is not defined
at eval (.../node_modules/.pnpm/path-browserify@1.0.1/node_modules/path-browserify/index.js:531:1)

Steps to reproduce

• Create a new remix project with pnpm create remix

• Add the join function in a client code.

• Add this plugin with the following config:

  nodePolyfills({
    include: ["path"],
  }),

• See the error message

  

[gabrielferreiraa]

Yeah! I'm facing the same problem.

[nikolailehbrink]

Quick update: We've implemented a custom remixBrowserPolyfill plugin in our project, which should integrate smoothly with Remix.

Here's the relevant section of our vite.config.ts:

// vite.config.ts
import { defineConfig, type Plugin } from 'vite'

function remixBrowserPolyfill(alias: Record<string, string>) {
  return {
    name: 'remix-browser-polyfill',
    enforce: 'pre',
    async resolveId(source, importer, options) {
      if (options.ssr || 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
}

export default defineConfig({
  plugins: [
    remix(),
    remixBrowserPolyfill({
      path: 'path-browserify',
    }),
  ],
})

To complete setup, remember to manually install the required packages, in our case path-browserify."

[ranlix]

@nikolailehbrink I have met another polyfill issue like this:

vitejs/vite#20397

It's about module is not defined with stream-browserify