Cannot use import statement outside a module

[Neewd]

Environment

npx nuxi info -->

Nuxt CLI v3.0.0-27238235.a1bcc53 09:48:49
RootDir: C:\Users\Windows\Developpement\hiddengems\nuxt3-app 09:48:50
Nuxt project info: 09:48:50

---

• Operating System: Windows_NT
• Node Version: v14.17.3
• Nuxt Version: 3-3.0.0-27238235.a1bcc53
• Package Manager: Yarn
• Bundler: Webpack
• User Config: buildModules, build
• Runtime Modules: -
• Build Modules: -

---

http://localhost:3000/modal reload page

Describe the bug

After cloning a TailwindUI template inside the app.vue, running the npm i and npm run dev, here is the result I have ...

(node:13788) Warning: To load an ES module, set "type": "module" in the package.json or
use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
Server Side Rendering Error: C:\Users\Windows\Developpement\hiddengems\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';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at ModuleWrap. (internal/modules/esm/translators.js:199:29)
at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
at async Loader.import (internal/modules/esm/loader.js:177:24)

Not sure it's linked to your repo or nuxt3 but I'll post it anyway :)
I can give further info if you want :)

Additional context

No response

Logs

No response

[Neewd]

Haha that's definetely on the heroicons side though

[productdevbook]

Haha that's definetely on the heroicons side though

:D sorry headlessui problem

[productdevbook]

http://localhost:3000/modal reload page and see problem thats true ?

[productdevbook]

• [Bug]: Cannot use import statement outside a module tailwindlabs/headlessui#866

[productdevbook]

https://github.com/tailwindlabs/headlessui/blob/main/jest/create-jest-config.js

I think this place needs to be updated, I don't have full knowledge of these issues, but I will try to find out. Please have a look, if you find a solution, you will return.

I think the library needs to be updated. Seems like it's not related to nuxt.

vitejs/vite#2157

[MinSomai]

had same issue with headlessui
the fix will come in next release
here's the temp fix

npm install @headlessui/vue@dev
get the latest dev build of headlessui

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
    transpile: ["@headlessui/vue"],
  },
});

the transpile part is important.

[Neewd]

The issue is still up on this repo ?

[productdevbook]

The issue is still up on this repo ?

#18 We are still waiting for @headlessui updates.