Webpack and Babel issues when migrating to V2

[sebastiandelgado]

I am migrating my repo to web3modal v2 and am having several bundling and transpiling issues, with errors such as:

Unhandled Rejection (TypeError): Failed to resolve module specifier '@web3modal/ui'

Every time I resolve one error by adding a babel plugin or updating version numbers, I land on a different bundling/transpiling error, which makes me think that its likely an issue with the versions of webpack and babel that I have installed. Some more details about my configuration:

• The repo was laid out using create-react-app from react-scripts 4.0.3.
• It was also using a 4.x version of typescript until I updated it to 5.1.6 in order to install web3modal v2.
• My react application continues to work well after upgrading to typescript 5 when I remove the web3modal v2 code and only starts to produce the bundling and transpiling issues once I import and use web3modal v2.

My theory is that web3modal relies on a later version of webpack/babel than the ones that come default with react-scripts 4.0.3.

My question is whether there is a known issue integrating web3modal v2 with projects that were laid out using react-scripts 4 instead of react-scripts 5. I'd like to figure this out before I spend a significant amount of time upgrading to react-scripts 5, which seems to be a pretty involved process.

Thanks for reading through this!

[sebastiandelgado]

I've managed to replicate this issue. Below is a working repository that uses react-scripts 5.0.1 and was laid out with the same version of create-react-app and another repo that did the same with version 4.0.3 and is showing the same errors that my code is showing:

Basic Web3Modal integration using create-react-app and react-scripts @5.0.1 (WORKING)

Basic Web3Modal integration using create-react-app and react-scripts @4.0.3 (BROKEN bc of babel/webpack issues)

Will be attempting to upgrade react-scripts in the repo using version 4.0.3 to version 5.0.1 to see if that fixes the issue. If it doesn't work, I will need to lay out a new repo using create-react-app @ 5.0.1 and then move all of my code into that and do the migration that way. Hopefully it doesn't come to that.

Will continue to post here in hopes that someone that has gone through the same process reads this and can give advice on which direction to take.

[sebastiandelgado]

Turns out it was the react-scripts version that was obstructing me from building the packages. Upgrading to 5.xx fixed the issue