Module not found, Can't Resolve despite adding a polyfill

Question

I am trying to create a form that sends an email via using a send grid module however it does not seem to be compatible with my web browser because I get this error :

"Failed to compile.

Module not found: Error: Can't resolve 'fs' in '/Users/parisvinuya/RARYA - GDSC WEBSITE/gdsc-website/main/node_modules/@sendgrid/helpers/classes' ERROR in ./node_modules/@sendgrid/helpers/classes/attachment.js 12:11-24 Module not found: Error: Can't resolve 'fs' in '/Users/parisvinuya/RARYA - GDSC WEBSITE/gdsc-website/main/node_modules/@sendgrid/helpers/classes'

ERROR in ./node_modules/@sendgrid/helpers/classes/attachment.js 14:13-28 Module not found: Error: Can't resolve 'path' in '/Users/parisvinuya/RARYA - GDSC WEBSITE/gdsc-website/main/node_modules/@sendgrid/helpers/classes'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }

webpack compiled with 2 errors"

Here is my code for indexfirebase.ts:

import * as sgMail from "@sendgrid/mail";
import { resolve, require } from "path-browserify";

sgMail.setApiKey(
  "******"
);

const msg = {
  to: "*****@gmail.com",
  from: "[email protected]",
  subject: "Example Subject",
  text: "Example plain text content",
  html: "<p>Example HTML content</p>",
};

sgMail
  .send(msg)
  .then(() => {
    console.log("Email sent successfully");
  })
  .catch((error) => {
    console.error(error.toString());
  });

resolve.fallback = { path: require.resolve("path-browserify") };

The thing is, I already put "resolve.fallback = { path: require.resolve("path-browserify") };" in my code but it is still not working and I'm not sure why...

This seems like a node.js module, you shouldn't be trying to load it into the browser. — Barmar
– Barmar, Commented Jun 18, 2023 at 10:57
Additionally, it seems you exposed your API key. If this is, in fact, your real key, please delete it from the console and generate a new one. — IObert
– IObert, Commented Jun 19, 2023 at 8:54

Giuliano Gostinfini · Accepted Answer · 2023-07-03 06:32:51Z

0

This is a pretty annoying ( and known ) error that often comes out when using some of the npm and npx create-something-app that preload webpack configuration, which excludes native modules when it compiles if there is no polyfill or they are not explicitly installed. If you've started the project since not so long, I would suggest re-init it with Vite, which never ends up with this error. Otherwise, try to install & require browserify-fs, like shown here:

https://feixie1980.medium.com/fixing-node-js-modules-pollyfill-in-webpack-5-9e7979125aac

Hope this helps

answered Jul 3, 2023 at 6:32

Giuliano Gostinfini

1125 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Module not found, Can't Resolve despite adding a polyfill

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related