gatsby-plugin-google-fonts | Bring Google Fonts to Gatsby https | Frontend Framework library

I've tried deploying my Gatsby site to Netlify, but I keep getting these errors for various node modules whenever I try to deploy. I've tried making a webpack.config.js file and including both of the suggested solutions to no avail. I've also tried using alias instead of fallback, adding a browser section to the package.json file which sets the modules to false, and adding a target property in the webpack.config.js file as some other stackoverflow answers have suggested, but I'm still pretty stuck. I don't have any prior experience to webpack and have been doing my best to look for answers. Is there some sort of special configuration for this with Gatsby that I'm missing?

Error message

This app was originally built using react, however we have decided to convert everything over and use Gatsbyjs. I am new to Gatsby and I am trying to get my images to render correctly using the artist data. Here is how this part of the data was originally built:

My main font in gatsby is defined in the index.scss folder like this in a body tag.

I'm getting the diagnostic on PageSpeed Insights

WebpackError: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an provider

I am using stripe to collect donations for a gatsby website I am developing. It uses firebase as the backend. I'm successfully accepting donations with stripe locally. But get a webpack error when I push to github so my changes will be on my live netlify link. Here is a part of the error message: