Vite build error: __dirname from deeply nested dependency

[jam-fran]

Hi there,

I have a remix app within a turborepo monorepo, and am I'm importing a local package that has @google-cloud/pubsub as a dependency.

When migrating to Vite, the app appears to build successfully, but fails when I start the app with a ReferenceError: __dirname is not defined in ES module scope.

After some digging, it appears that @google-cloud/pubsub has a dependency called google-gax that is causing the error. Sure enough, I can find a few references to __dirname in my build/server/index.js output file related to this sub-dependency.

I've created a minimal repro here that highlights the error: https://github.com/jam-fran/vite-dirname-example

I've tried adding google-gax, @google-cloud/pubsub, and the local monorepo package to ssr.external, ssr.noExternal, optimizeDeps.include, optimizeDeps.exclude, etc. If possible, I'd like to avoid patching the sub-dependency. I would it absolutely necessary, but I'm not even sure what I would change.

Any help would be very much appreciated. Thank you!

[hi-ogawa]

When migrating to Vite

I think it might be interesting and helpful if you can show how you're building the app before moving to Vite. For example, were you using CJS at the time (i.e. without "type": "module" in your remix app)?

Your setup looks a bit tricky to me. Especially packages/pubsub is not a traditional npm package since it only provides typescript ./src/index.ts for main app to bundle it together.
I wasn't expecting that but it seems Remix/Vite is bundling entire @google-cloud/pubsub together with packages/pubsub in this scenario.
If there is a comparison with previous Remix/Esbuild, then that might give some hint about the issue.

Then one peculiar thing I found is that, if I install @google-cloud/pubsub in app/remix package, then @google-cloud/pubsub is externalized when building remix app and this avoids bundling @google-cloud/pubsub into Remix server build build/server/index.js.

This is what I was expecting as a default behavior (without adding anything to ssr.optimizeDeps/noExternal/etc...), but I'm not sure if there's something wrong with what Vite or Remix is doing with this particular setup.
Here is an updated reproduction to install @google-cloud/pubsub in app/remix. Would this change work for you?

https://stackblitz.com/edit/github-g5lbb8?file=apps%2Fremix%2Fpackage.json

[jam-fran]

Thanks for the thoughtful reply, @hi-ogawa.

Adding @google-cloud/pubsub as a direct dependency to my remix app does work!

And yes, I was previously using CJS (no "type": "module") in my package.json. Here was my original remix.config.js:

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

module.exports = {
  serverDependenciesToBundle: [
    '@my-app/constants',
    '@my-app/common',
    '@my-app/db',
    '@my-app/pubsub',
    '@my-app/ui',
  ],
  serverModuleFormat: 'cjs',
  watchPaths: ['../../packages/**/*'],
}

I should note that I've also tried added serverModuleFormat: 'cjs' to my remix plugin config in vite.config.ts with no luck.

ESM/CJS issues still make my head spin -- are there any changes you'd recommend I make to my pubsub package.json (or anything else) to make this setup simpler?

[hi-ogawa]

ESM/CJS issues still make my head spin -- are there any changes you'd recommend I make to my pubsub package.json (or anything else) to make this setup simpler?

I'm not sure I can say something definitely from the context so far. The particular issue you had here is probably in a category of dev/prod inconsistency of Vite SSR where @google-cloud/pubsub is unintentionally bundled during build while it was properly "externalized" during dev. This could be a Vite bug, like maybe at least some sort of warnings could be appropriate.

Or maybe this is a configuration issue (missing @google-cloud/pubsub in app/remix dependency) since if you're only bundling app/pubsub code into app/remix/build/server/index.js, then non-bundled import "@google-cloud/pubsub" wouldn't work from app/remix/build/server/index.js.

I think this wasn't technically an esm/cjs issue, but dev/prod inconsistency issue got manifested thanks to the runtime error form esm/cjs incompatibility.

[sixers]

Try adding the following to your Vite config:

{
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }