global is not defined when trying to connect with wallet connect (Nuxt3 + Vite)

[SpiritusDeos]

Current Behavior

Can't open wallet connect with the neversion of web3-onboard in local (other environment looks to work correctly)

"@web3-onboard/injected-wallets": "^2.8.5",
"@web3-onboard/vue": "^2.7.0",
"@web3-onboard/walletconnect": "^2.3.6",

Expected Behavior

To be able to open web3-onboard with wallet connect

Steps To Reproduce

Install Nuxt 3.4.3 project + Vite with this configuration, and you can't connect using wallet connect

  vite: {
    plugins: [
      development &&
        nodePolyfills({
          include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js')],
          http: true,
          crypto: true
        })
    ],
    resolve: {
      alias: {
        crypto: 'crypto-browserify',
        stream: 'stream-browserify',
        assert: 'assert'
      }
    },
    build: {
      minify: 'esbuild',
      target: 'esnext',
      rollupOptions: {
        plugins: [nodePolyfills({ crypto: true, http: true })]
      },
      commonjsOptions: {
        transformMixedEsModules: true
      }
    }
  },

What package is effected by this issue?

@web3-onboard/vue

Is this a build or a runtime issue?

Runtime

Package Version

2.7.0

Node Version

16.14

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

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.

[Adamj1232]

@SpiritusDeos have a look at the issue resolved here for Vite as it may provide a solution. Let me know if this works for you - #1568 (comment)

[SpiritusDeos]

Just look into your resolved issue - looks to work with svelte but in Nuxt 3 you don't deal with any app.html @Adamj1232

[SpiritusDeos]

Didn't success to make it works until now, even with the issue linked...

@Adamj1232, do you have any proper config working with Vite/Nuxt 3 ?

[Adamj1232]

@SpiritusDeos we haven't had a chance to look into this yet but will update here when we do.

[SpiritusDeos]

Hey @Adamj1232 - still no news ?

[Adamj1232]

@SpiritusDeos we have been a little buried with new projects and features to get to this. We always welcome PR. You may also want to check with the walletconnect team as whatever settings to get their packages working in this environment would extend here - give this a look and let me know if it happens to work for you - WalletConnect/walletconnect-monorepo#655

[ricky-barnett]

I was able to solve this issue by adding the following to my vite config.

optimizeDeps: {
	esbuildOptions: {
		define: {
			global: "globalThis",
		}
	}
}

Hope this helps 😄

[Adamj1232]

@SpiritusDeos please let us know if @ricky-barnett solution above works for you! We will add this to our documentation if so!