index.mjs:151 Uncaught (in promise) TypeError: destr__WEBPACK_IMPORTED_MODULE_0__ is not a function

[HTR2747]

// Facing this error "Uncaught (in promise) TypeError: destr__WEBPACK_IMPORTED_MODULE_0__ is not a function" on this EthereumProvider.init when I am adding this code in my existing application. If I create a new react template application it works fine!
// See my react hook component code usage

import { EthereumProvider } from '@walletconnect/ethereum-provider'

// 2. Initialize sign client
async function onInitializeProviderClient() {
const client = await EthereumProvider.init({
projectId: 'my-app-id',
showQrModal: true,
qrModalOptions: { themeMode: 'light' },
chains: [1],
methods: ['eth_sendTransaction', 'personal_sign'],
events: ['chainChanged', 'accountsChanged'],
metadata: {
name: 'My App',
description: 'My App Description',
url: 'https://my.app.com',
icons: ['https://my.app.com/logo.png'],
},
})
setProviderClient(client)
}

useEffect(() => {
    onInitializeProviderClient()
}, [])
// Function to handle connection
// 3. Enable / connect with provider, will open web3modal
async function onConnect() {
    if (providerClient) {
        await providerClient.connect()
    } else {
        throw new Error('providerClient is not initialized')
    }
}

[HTR2747]

I fixed this issue.

1. installed destr module by running yarn add destr
2. My application based on react typescript instead vite so I added this alias in my webpack.congif.js file.
   resolve: { alias: { destr: require.resolve('../node_modules/destr/dist/index.mjs'), // Use ESM version explicitly }, },