[bug] Production Build with Qwik Framework - Uncaught TypeError

[neotheprogramist]

Link to minimal reproducible example

https://github.com/neotheprogramist/web3modal-bug

Summary

Description

I am currently developing a web3 app using Qwik as the framework. I have encountered a peculiar issue related to the production build when creating the defaultWagmiConfig. It seems to be a problem with the minification process, as everything works fine when running with npm run dev.

To Reproduce

1. Run npm run build.
2. Run npm run serve.
3. Open localhost:3000.
4. Open the console.

Issue

The following error is thrown:

Uncaught (in promise) TypeError: b is not a function
at f ((index):4:143)

Upon investigation, it appears that the variable b is undefined and not being initialized. It is created using let.

Further Steps

1. Comment out the creation of defaultWagmiConfig.
2. Observe that the issue disappears.

Expected Behavior

The production build should not result in the Uncaught TypeError when creating defaultWagmiConfig. The behavior should be consistent with running in development mode (npm run dev), where everything works fine.

Additional Information

• Framework: Qwik
• Build command: npm run build
• Serve command: npm run serve

This issue is impacting the functionality of my web3 app, and I would appreciate assistance in resolving this issue. Thank you.

List of related npm package versions

"@builder.io/qwik": "1.4.5",
"@builder.io/qwik-city": "1.4.5",
"@fastify/compress": "^7.0.0",
"@fastify/static": "^7.0.1",
"@types/eslint": "8.56.2",
"@types/node": "20.11.19",
"@typescript-eslint/eslint-plugin": "7.0.2",
"@typescript-eslint/parser": "7.0.2",
"dotenv": "^16.4.5",
"eslint": "8.56.0",
"eslint-plugin-qwik": "1.4.5",
"fastify": "^4.26.1",
"fastify-plugin": "^4.5.1",
"prettier": "3.2.5",
"typescript": "5.3.3",
"undici": "6.6.2",
"vite": "5.1.3",
"vite-tsconfig-paths": "4.3.1"
"@wagmi/connectors": "4.1.14",
"@wagmi/core": "2.6.5",
"@web3modal/wagmi": "4.0.6",
"viem": "2.7.11"

[glitch-txs]

Mmm, I'm not 100% sure, but this seems to come from a code that the Qwik compiler is creating during build and not from Web3Modal execution.

You can try this by skipping any execution but console logging (so it's not tree shaked)

  useVisibleTask$(() => {
    console.log(defaultWagmiConfig)
  });

I would try luck opening an issue in the Qwik repo

Qwik pakcages versions are up to date right?

[neotheprogramist]

@glitch-txs I've tried just console log and the error is the same. Changes pushed so you can check. I'm using npx npm-check-updates -u to update all packages and they are all latest versions.

Could you please check that, it seems like a problem with web3modal and maybe vite minification.| I remember when working with web2modal v3 there was no issue

[glitch-txs]

I think the issue is on how Qwik is compiling, not Web3Modal directly related because it works in other frameworks.

The issue still persists when console loging, this means that the error is most likely not in our library, we don't trigger any JavaScript on page load besides declarations.

[neotheprogramist]

solved here

[glitch-txs]

Awesome! If you're down to collab feel free to open a PR here, might be useful for other devs :)

https://github.com/WalletConnect/web-examples/tree/main/dapps%2Fweb3modal