Cannot destructure property 'nuxt' of 'this' as it is undefined

[kindred heath]

Just started a new project to try out Nuxt 3.
The setup process went well, but after running npm run dev, the app doesn't start and throws the following error:

> [email protected] dev
> nuxt

ℹ Using default Tailwind CSS file from runtime/tailwind.css                               nuxt:tailwindcss 21:30:39

 FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.                                   21:30:39

  at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
  at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
  at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)


   ╭─────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                 │
   │   ✖ Nuxt Fatal Error                                                            │
   │                                                                                 │
   │   TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.   │
   │                                                                                 │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

Node version: v16.13.2
NPM version: 8.19.1

Thanks

[lapis vector]

Having the same issue here.

[split merlin]

postcss8 module hasn't been updated in two years, and is not nuxt3 ready

[lapis vector]

It worked using the minimal starter: npx nuxi init nuxt-app

And then added Tailwind.

https://nuxt.com/modules/tailwindcss

[cursive cradle]

I would recommand unocss instead of tailwind

[brittle python]

That does not really help 😂

[brittle python]

It is, but @nuxtjs/tailwindcss was not updated to be stable with Nuxt 3.0.0.

[split merlin]

it's not on the official modules list for nuxt3, maybe with a hack, but it's not been updated

[brittle python]

It's on the list of modules, but not official.
Official modules are only by the Nuxt Team, like the image module.

And as I know its maintained by @potent frigate

But was not created by him

(Correct me if I am wrong)

[split merlin]

https://github.com/nuxt/postcss8 not updated in 2 years 🙂

[cursive cradle]

more feature than tw, better perf, work without issue
do your choice 😉

[brittle python]

https://github.com/nuxt-modules/tailwindcss/blob/48411632e2544cfba9234a655d8fc6b8fd5ead13/src/module.ts#L222

@nuxt/postcss8 is only used at Nuxt 2

So thats not the problem here

[potent frigate]

It works with 3.0

But I shall make a major bump to drop Nuxt 2 to remove postcss8 dependency

[brittle python]

👍

[kindred siren]

How did people solve this? I just created a fresh nuxt application with no modifications and I am getting this error.