Context

I'm following the web3.js guide on how to use web3.js with create-react-app. The setup seems clear. I installed the missing modules via npm, created the config-overrides.js file in my project root and made the adjustments, but I'm now having issues.

Problem

I can use the web3 library just fine, but react throws this error:

First off, It's worth noting that a similar post to fix this same error exists, claiming it is a case error in the file path that is Windows specific. As far as I cant tell, this problem is different! I'm on Mac, and I cannot find the case discrepancies that post mentions.

Now I've tried a few things to resolve this. First, I followed another post that recommended I uninstall the eslint extension (I'm using Atom). This actually worked for about 10 minutes, but then the same error reappeared after I created a few components.

Then, I noticed that the error points to two node_modules folders, one outside of my create-react-app project folder along with the normal one inside. And oddly enough, I do have a node_modules outside the project folder, complete with a package and package-lock json files:

I changed the name of each folder to see if one of them was redundant and could be deleted, but react threw the same compile errors if one of the node_modules wasn't found.

At this point, I'm in over my head. I have no idea where that folder came from or why react placed it there. I'm not sure how to resolve the two node_modules and thus the conflict between the base.js files. It might be worth noting that the two node_modules folders have different module contents. The one outside the project folder holds no web3 modules, while the folder inside does.

Looking at the folder's get info shows that it was created at 10:43am, about the same time I was following the guide I mentioned first. I hope this post was clear. If not, I'll happily provide any extra info. Thanks.