cant install/import @sengrid/mail package into resource route

[znwhite]

What is the location of your example repository?

Private company repository.

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.9

What version of Remix are you using?

2.10.1

Steps to Reproduce

Install @sendgrid/mail package into app, and import and use it in a resource route action (routes/contact.tsx).

Run npm run dev

Vite will add @sendgrid.mail package to optimizeDeps.include in vite.config.js

And so then it throws this error:

Cannot bundle Node.js built-in "fs" imported from "node_modules/@sendgrid/helpers/classes/attachment.js". Consider disabling ssr.noExternal or remove the built-in dependency

No way to prevent Vite from doing this. Error every time you try to run npm run dev

Expected Behavior

@sendgrid/mail should be able to be imported and used inside of a resource route action without issue. Vite maybe shouldnt have deprecated their disabled feature in the config, that prevents me from keeping from being automatically added to optimizeDeps.include every time I run npm run dev

Actual Behavior

Vite will add @sendgrid/mail package to optimizeDeps.include config. And it throws this error:

Cannot bundle Node.js built-in "fs" imported from "node_modules/@sendgrid/helpers/classes/attachment.js". Consider disabling ssr.noExternal or remove the built-in dependency

[wizardlyhel]

Mmm .. @sendgrid/mail is written in commonjs and is requiring fs in that helpers/classes/attachment.js. I check that this lib doesn't offer a ESM alternative either.

Could you try adding this in your vite.config and see if it work.

optimizeDeps: {
    exclude: ["fs"],
},

In either case, this isn't an issue that would be specific to Hydrogen. Other than that, I am not sure what else you can try since there isn't much coming up in search about this issue.

[znwhite]

It doesnt matter how I configure my vite.config.js, I always get this line in the server console ("Added @sendgrid..."), followed by an error:

Also: Cannot optimize dependency: @sendgrid/mail, present in 'ssr.optimizeDeps.include'

So basically, "Hey, your vite.config.js was fine, now let me break it for you!" And no way to shut it off/prevent it from doing that.

[wizardlyhel]

You can disable the vite dep optimizer we have in hydrogen when running dev so that dependencies are not automatically added to your vite config. Run npm run dev -- --disable-deps-optimizer

[znwhite]

That created this error:

I am losing my mind here 🤣

Here is my contact.tsx file:

[wizardlyhel]

This sendgrid package is build in commonjs. In order for vite to run commonjs packages, it needs to put the package in ssr.optimizeDep. However, that doesn't always work.

There is an outstanding issue on the sendgrid package itself to support ESM build sendgrid/sendgrid-nodejs#743