autoimport Nuxt eventemitter3 does not provide an export named 'default'

[reslear]

Describe the bug

If you delete imports, Nuxt auto-imports do not work:

for example works:

<script setup lang="ts">
import { useAccount, useDisconnect } from '@wagmi/vue';

const { address, chainId, status } = useAccount();
const { disconnect } = useDisconnect();
</script>

not working:

<script setup lang="ts">
const { address, chainId, status } = useAccount();
const { disconnect } = useDisconnect();
</script>

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/eventemitter3/index.js?v=2c858a2b' 
does not provide an export named 'default' (at index.mjs:1:8)

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/reslear/nuxt-wagmi-starter

Steps To Reproduce

stackblitz also not working because metask sdk issues.

1. clone repo github.com/reslear/nuxt-wagmi-starter

2. install and run dev:

pnpm install
pnpm dev

4. go to components/Account.vue and comment import line:

5. see result

Wagmi Version

latest

Viem Version

latest

TypeScript Version

latest

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[Utilitycoder]

I would like to work on this issue and contribute the necessary changes.

[reslear]

maybe @danielroe can take a quick professional look and help?

https://github.com/wevm/wagmi/blob/main/packages/vue/src/nuxt/module.ts

[danielroe]

This is likely because without the explicit import, vite doesn't know to optimize the dep. You can manually add it to optimize-deps: https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-include.

[reslear]

like ?

      nuxt.hook('vite:extendConfig', (config) => {
        config.optimizeDeps ??= {}
        config.optimizeDeps.include = config.optimizeDeps.include || []
        config.optimizeDeps.include.push('@wagmi/vue')
      })

[danielroe]

Exactly that kind of thing!

Note that this requires the end user to have installed the dep. If it is a dependency of your module you would do something like your-module > @wagmi/vue, or it won't work without shamefully-hoist.

[yulafezmesi]

hey, adding eventemitter3 to optimizeDeps will solve the issue.

kudos @danielroe

[dej10]

hey @yulafezmesi

was this how you added it ?

//nuxt.config.ts

  vite: {
    optimizeDeps: {
      include: ['eventemitter3']
    }
  }

[nwingt]

I referred to the pnpm create wagmi and selected the Nuxt template. This seems to be working for me:

// wagmi.ts
import { http, cookieStorage, createConfig, createStorage } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'

export function getConfig() {
  return createConfig({
    chains: [mainnet, sepolia],
    connectors: [
      injected(),
      coinbaseWallet(),
      walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [mainnet.id]: http(),
      [sepolia.id]: http(),
    },
  })
}

declare module 'wagmi' {
  interface Register {
    config: ReturnType<typeof getConfig>
  }
}

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@wagmi/vue/nuxt'],
})

// plugins/wagmi.ts
import { VueQueryPlugin } from '@tanstack/vue-query'
import { WagmiPlugin } from '@wagmi/vue'
import { defineNuxtPlugin } from 'nuxt/app'

import { config } from '../wagmi'

// TODO: Move to @wagmi/vue/nuxt nitro plugin
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(WagmiPlugin, { config }).use(VueQueryPlugin, {})
})

[kristiegiles]

The same error intermittently breaks my builds in Vercel but works on redeploy