Import error when using @walletconnect/ethereum-provider - CommonJs/ES modules related

[thedevbirb]

Describe the bug
I installed and imported EthereumProvider as suggested in the npm package info, using import { EthereumProvider } from "@walletconnect/ethereum-provider. However, my TS project cannot compile and I get the following error:

Error: require() of ES Module /home/lorenzo/work/tide-protocol/frontend/node_modules/@web3modal/standalone/dist/index.js from /home/lorenzo/work/tide-protocol/frontend/node_modules/@walletconnect/ethereum-provider/dist/index.cjs.js not supported.
Instead change the require of index.js in /home/lorenzo/work/tide-protocol/frontend/node_modules/@walletconnect/ethereum-provider/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

To Reproduce
My package.json is just a list of dependencies and scripts. No configurations. This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Expected behavior
Should import as expected with no compile errors.

Desktop:

• OS: Linux, Fedora 36

[jierlich]

I'm seeing this same issue, also using node module resolution

[GabrielBuragev]

Same issue here. In my scenario, it fails inside my test suite.

I found a workaround though for anyone that wants to bypass this error.

Instead of importing like:
import EthereumProvider from '@walletconnect/ethereum-provider';

try importing
import EthereumProvider from '@walletconnect/ethereum-provider/dist/index.umd.js';

For me, this is not the most convenient way because then i lose the TS support and it requires some more workarounds for mapping the TS declarations to this object. Its just nasty.

I assume its some misconfiguration in the package.json and closely related to this issue:
#341

[glitch-txs]

I’m closing this issue because it has been inactive for a few months.

Please reopen if you still encounter this issue with the latest version :)