SyntaxError: Cannot use import statement outside a module (Nuxt 3 + heroicons/vue + headlessui/vue)

Hello ! 👋

Environment

E:\WindowsData\Bureau\portfolio-v3>npx nuxi info

Nuxt CLI v3.0.0-27234417.10170da                                                                                                                                                                                                                                
RootDir: E:\WindowsData\Bureau\portfolio-v3                                                                                                                                                                                                                     
Nuxt project info:                                                                                                                                                                                                                                             

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v16.6.1`
- Nuxt Version:     `3-3.0.0-27234417.10170da`
- Package Manager:  `Yarn`
- Bundler:          `Webpack`
- User Config:      `ssr`, `srcDir`, `plugins`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Describe the bug and expected behavior

I have tried to integrate a component from Tailwindui which exploits the disclosure component.

(so I have the same problem with the icons of heroicons)

Steps to reproduce

Juste clone this repository Then install all dependancies and execute yarn dev

[kstraszewski]

I have also notice that error, when trying to integrate headless ui to Nuxt 3.

I have the same error:

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async __instantiateModule__ (file:///Users/xxx/WebstormProjects/nuxt3-app/.nuxt/dist/server/server.mjs:5115:3)
(node:83321) UnhandledPromiseRejectionWarning: /Users/xxx/WebstormProjects/nuxt3-app/node_modules/@headlessui/vue/dist/headlessui.esm.js:1
import { cloneVNode, h, onUnmounted, ref, watchEffect, onUpdated, inject, provide, defineComponent, Teleport, reactive, computed, unref, onMounted, nextTick, toRaw, watch } from 'vue';

[Patrick-Remy]

Just fyi, in #940 there’s a temporary fix that works around the issue

In short, you can add this to your nuxt.config.ts to use headlessui with nuxt3.

vite: {
    ssr: {
      noExternal: [
        '@headlessui/vue'
      ]
    }
  },

Unfortunately there still needs some work in the @headlessui/vue package so that Prerendering/SSR doesn’t fail. In my case

[Vue warn]: Unhandled error during execution of setup function 
  at <Menu>
Server Side Rendering Error: ReferenceError: window is not defined