NextJS project can't install @tronweb3/walletconnect-tron module

[jeancarrie-kima]

I am using these modules on my NextJS project to have tron wallet integration

    "@tronweb3/tronwallet-abstract-adapter": "^1.1.0",
    "@tronweb3/tronwallet-adapter-ledger": "^1.1.1",
    "@tronweb3/tronwallet-adapter-react-hooks": "^1.0.0",
    "@tronweb3/tronwallet-adapters": "^1.1.1",

But getting ERR_REQUIRE_ESM error to use @tronweb3/tronwallet-adapters

Please help me to fix this issue.

[way2ex]

The error "[ERR_REQUIRE_ESM]: require() of ES Module not supported. Instead change the require of index.js to a dynamic import() which is available in all CommonJS modules" occurs because a package you are importing has been converted to an ESM-only package, which means that the package cannot be imported with require() anymore.

Here you are using commonjs format of @tronweb3/walletconnect-tron, please check that if you are using require('@tronweb3/tronwallet-adapters') in your project. Instead change it to import {} from '@tronweb3/tronwallet-adapters'

[jeancarrie-kima]

import { BitKeepAdapter, LedgerAdapter, OkxWalletAdapter, TokenPocketAdapter, TronLinkAdapter } from '@tronweb3/tronwallet-adapters' I am using import {} not require()

[jeancarrie-kima]

@way2ex I am using @tronweb3 module inside my npm module, and I used microbundle-crl to build the module.

microbundle-crl --no-compress --format modern,es --css-modules false

This is what I was using to build my module and it could be the reason why @tronweb3/tronwallet-adapters is referenced by required(). So I have changed the build command as --format modern,es to build as es module, but now I am getting different error.

[way2ex]

It seems that you didn't export TronLinkAdapter correctly. Please check your configration. Some build tools will convert import to require. Also check your build target and ensure that it's ESM format.

[jeancarrie-kima]

@way2ex Here's my module structure, as you can see it builds in several formats - es and cjs. Inside the module, I use only import {} for tron modules.

[way2ex]

Could you confirm that which format of your npm package file nextjs is using ?
Also you can try the following code to import TronLinkAdapter:

import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters/lib/esm/index.js';

[jeancarrie-kima]

I will try your recommendation. My nextjs project using import {} format to use my own module.

[jeancarrie-kima]

@way2ex Tried the way you recommended but here's the result.

[way2ex]

This way doesn't work for node esm. If you want to use TronLinkAdapter only, you can install the @tronweb3/tronwallet-adapter-tronlink and import from it:

import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

[jeancarrie-kima]

@way2ex Thanks for your reply, I will prepare a repository for reproduce the issue. Please reach me out here, if you want to discuss in details. https://t.me/jean_carrie

[jeancarrie-kima]

@way2ex I have created a repo for reproducing the issue. Please check your invitation to this repo. https://github.com/jeancarrie-kima/kima-demo-ref

[jeancarrie-kima]

This way doesn't work for node esm. If you want to use TronLinkAdapter only, you can install the @tronweb3/tronwallet-adapter-tronlink and import from it:

import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

I am using several adapters that @tronweb3 module supports, not only tronlink.

[jeancarrie-kima]

@way2ex Thanks for your great support, really appreciate your advices.

In conclusion, I have replaced @tronweb3/tronwallet-wallet-adapters to @tronweb3/tronwallet-wallet-tronlink and other individual wallet adapter modules. This is the solution, 👍