MetaMask throws error when used via SDK via ESM (JsDelivr)

[paylinkprotocol]

Current Behavior

Our issue in a nutshell: When relying just on the injected wallets like this:

const wallets = [injectedModule()]

we can easily connect via chrome browser on desktop, but on smartphone, no MM is shown.

When importing the web3-onboard MM module and extending the wallets by

const wallets = [metamask, injectedModule()]

We get this Error: Uncaught (in promise) SyntaxError: The requested module '/npm/eventemitter2@6.4.9/+esm' does not provide an export named 'EventEmitter2' (at jsdelivr-header.js:7:1)

Beside of that, my code is like the Get Started ()

Important note: I import all these libraries via ESM (jsdelivr.com, the latest versions)

Due to the fact i can connect with MM, even with smartphone, when using this Example: , is assume the reason is a misconfigured/mis-bundled ESM

Expected Behavior

It works like in the example of Blocknative

Steps To Reproduce

No response

What package is effected by this issue?

@web3-onboard/injected-wallets

Is this a build or a runtime issue?

Runtime

Package Version

the latest (2.23.0)

Node Version

No response

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught (in promise) SyntaxError: The requested module '/npm/eventemitter2@6.4.9/+esm' does not provide an export named 'EventEmitter2' (at jsdelivr-header.js:7:1)

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[paylinkprotocol]

To make it better understandable - you can find our "prod" code below:

✅ Works with Chrome (MetaMask extension installed)
❌ Doesn't work with Chrome on Smartphone although MetaMask App is installed
❌ Doesn't work with Chrome Ikognito Mode

When clicking "Connect" on this example here: https://onboard.blocknative.com/examples/connect-wallet :

✅ Works with Chrome (MetaMask extension installed)
✅ Works with Chrome on Smartphone -> MetaMask App is being recognized and triggered as expected
✅ Works with Chrome Ikognito Mode somehow, at least the typical MetaMask SDK window is being shown

(Maybe interesting) side info: When the page itself is populated (using the code below), i instantly get this errors logged:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
at Ln. (inpage.js:247:166515)
at Generator.next ()
at ae (inpage.js:247:165403)

**-> The line at inpage.js:247:166515 is: this.hardware = N.type === hu.HARDWARE**

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$$')
at vn (index-94d40e1f.js:1840:50)
at new Ae (Index-d8463bd4.js:1440:3)
at bt (index-94d40e1f.js:1002:12)
at index-94d40e1f.js:10218:21
at zi (index-94d40e1f.js:10169:39)
at o (index-94d40e1f.js:1602:47)
at index-94d40e1f.js:1637:13

**-> The line at index-94d40e1f.js:1840:50 is: root: options.target || parent_component.$$.root**

So, now the "prod" code:

import Onboard from 'https://cdn.jsdelivr.net/npm/@web3-onboard/core@2.21.6/+esm'
import injectedModule from 'https://cdn.jsdelivr.net/npm/@web3-onboard/injected-wallets@2.11.2/+esm'
import { ethers } from 'https://cdn.jsdelivr.net/npm/ethers@6.13.4/+esm'

const wallets = [ 
		injectedModule()
	]

	const chains = [
	  {
		id: '0x1',
		token: 'ETH',
		label: 'Ethereum Mainnet',
		rpcUrl: 'https://ethereum-rpc.publicnode.com'
	  },
	  {
		id: '0xaa36a7',
		token: 'ETH',
		label: 'Sepolia',
		rpcUrl: 'https://rpc.sepolia.org/'
	  }
	]

	const appMetadata = {
	  name: 'PayLink Protocol',
	  icon: '<svg></svg>',
	  description: 'Connect your wallet to make purchases over PayLink.'
	}

	const onboard = Onboard({
		wallets,
		chains,
		appMetadata
	})
	
	const wallet = await onboard.connectWallet();
	
	let ethersProvider
	try {
		ethersProvider = new ethers.BrowserProvider(wallet[0].provider, 'any')
	} catch (exception) {
		console.log(exception)
		resetButton(button, originalText)
		return;
	}
		
    const signer = await ethersProvider.getSigner()
	

[crypto-smoke]

I am also hitting this issue now, did you find a solution or work around @paylinkprotocol ?