Negative effects when compiling on M1 Macbook

Is it me, or is the new M1 chip causing issues in the developer world?

Yesterday I was working on my Macbook Pro with the new M1 chip and after running npm run dev and it compiled successfully, I was getting a ton of errors in the console and my site was broken. So, I did what most of us do and started doing some research online to see if I could get to the bottom of it.

Let me explain what I was working on...

I recently added a feature to my Saas business that allowed users to generate a Profit & Loss Statement based on filtered criteria for a start and end date. Once their statement was generated they could download it to PDF. This is where the issue began.

To accomplish this, I decided I would use the jsPDF and html2canvas packages. Once I installed these two packages and compiled my code base, I came across this error:

ERROR in ./node_modules/canvg/lib/index.es.js 1933:16-23
Module not found: Error: Can't resolve 'process/browser' in '/Users/jringeisen/www/esm/node_modules/canvg/lib'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

A quick Google search led me to here. Which suggested that I add the following to my webpack.mix.js file:

mix.options({
  legacyNodePolyfills: false,
})

Once I did that, I recompiled my code and the error was gone, yay! Hold on now, let's not celebrate just yet. I visited my website and in the console was a ton of red error messages and portions of my site were broken. I spent the next 3 hours trying to resolve this issue, with no luck. I decided I would go to bed and try to solve it again in the morning.

The next morning...

I woke up, made some coffee and sat down at my desk and started to figure out a solution to the problem I was having. The first thing I did was recompiled my code. Success! No error. Ok, then I checked my website. No errors in the console and the website wasn't broken. Hmmmm.... this is when a lightbulb went off in my head and I realized everything is working as expected on my Intel based iMac. I'm only having the above issue on my M1 Macbook Pro. Now to be clear the code is exactly the same on both computers, it was pulled down from Github. Both machines are running the exact same environments and have the exact same Node versions. The only difference is the M1 vs the Intel CPU.

Anyone else having weird issues like this? I still haven't been able to narrow down exactly what's causing this issue. The only thing I can think is it has something to do with the M1 chip. Let me know your thoughts in the comments below.