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]

• [ ] https://github.com/tailwindlabs/headlessui/issues/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.

https://github.com/vitejs/vite/pull/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 ?

https://github.com/productdevbook/nuxt3-app/pull/18 We are still waiting for @headlessui updates.