Conflicts with newer Nuxt3 rc-3 with newly nuxt/content

[robertoshimizu]

What package within Headless UI are you using?

"@headlessui/vue": "^1.5.0",

What browser are you using?

Chrome

Describe your issue

Started all of sudden to get warnings and errors in build after having upgraded nuxt3 to "nuxt": "3.0.0-rc.3" AND added "@nuxt/content": "^2.0.0", which is a recently newer version of nuxt/content.

The warnings and errors have not been spotted in the yarn dev, but yes they have appeared during a yarn build. There has been 23 warning messages just like below, one for each element of headless: TransitionRoot, Dialog, TransistionChild, ... and so on.

 WARN  Ambiguous external namespace resolution: "node_modules/@headlessui/vue/dist/headlessui.esm.js" re-exports "TransitionRoot" from one of the external modules "./components/combobox/combobox.js", "./components/dialog/dialog.js", "./components/disclosure/disclosure.js", "./components/focus-trap/focus-trap.js", "./components/listbox/listbox.js", "./components/menu/menu.js", "./components/popover/popover.js", "./components/portal/portal.js", "./components/radio-group/radio-group.js", "./components/switch/switch.js", "./components/tabs/tabs.js" and "./components/transitions/transition.js", guessing "./components/combobox/combobox.js".

At the end there was also an ERROR, apparently in a comobobox.js, although in my application I have not used combobox at all.

 ERROR  [nuxt] [request error] Cannot find module '/Users/rober/GitRepo/nuxt3-app/.nuxt/prerender/chunks/app/components/combobox/combobox.js' imported from /Users/rober/GitRepo/nuxt3-app/.nuxt/prerender/chunks/app/server.mjs
  at new NodeError (node:internal/errors:371:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:416:11)  
  at moduleResolve (node:internal/modules/esm/resolve:932:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)  
  at link (node:internal/modules/esm/module_job:75:36)

  ├─ /api/_content/cache (40ms) (Error: [500] Internal Server Error) 

Other users have reported same issue in the Nuxt3 discord, so I took the liberty to register here, so you can take a look.
Cheers

[robertoshimizu]

Hi,

found a fix for the problem above, described in the nuxt/framework issues: https://github.com/nuxt/framework/issues/4747

The solution is to add the '@headlessui/vue' in the build.transpile at the nuxt.config.tsfile:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  srcDir: 'src/',
  buildModules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
  modules: ['nuxt-jsonld', '@nuxt/content'],
  plugins: [],
 
  build: {
    extractCSS: true,
    transpile: ['@headlessui/vue'],
  },
})

Hope it helps, but I think it isadvisable to take a look into it to prevent this WARN to occur.
RS

[PeteJStewart]

Thanks!! That was spot on, and not exactly obvious from the error. 🥳

[roelmagdaleno]

Thank you. I had the same problem when running the npx nuxi generate command, and it's working now.