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

This issue has been tracked since 2022-11-17.

Version

@nuxtjs/tailwindcss: 5.3.3
nuxt: 2.15.8
platform: Windows 11.

Reproduction Link

https://github.com/PawFV/platform-portal

Steps to reproduce

yarn install && yarn dev

What is Expected?

Project should start in development mode

What is actually happening?

 FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.                                                        11:14:20  

  at postcss8Module (node_modules\@nuxt\postcss8\dist\index.js:16:10)
  at installModule (/C:/Users/paujo/platform-portal/node_modules/@nuxt/kit/dist/index.mjs:416:9)
  at async setup (/C:/Users/paujo/platform-portal/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
  at async ModuleContainer.normalizedModule (/C:/Users/paujo/platform-portal/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                                                            │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

error Command failed with exit code 1.

PawFV wrote this answer on 2022-11-18

My solution for now:

Downgrade to version 4.2.1.

yarn add @nuxtjs/[email protected]

yshrsmz wrote this answer on 2022-11-20

relevant issue in nuxt/framework: nuxt/nuxt#15489

Sym313 wrote this answer on 2022-11-20

Same issue with:

@nuxtjs/tailwindcss: 5.3.5
nuxt: 2.15.8
platform: Mac (M1)

As pointed by a coworker, this line in @nuxt/postcss8/dist/index...:

const {nuxt} = this;

...crashes due to "this" being undefined:

Nuxt Fatal Error
TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.

The crash is not in Tailwind itself, but coming from a dependency. And not happening in previous verisons of Tailwind.

chamyeongdo wrote this answer on 2022-11-20

temporarily solved by using overrides property.

npm version >= 8.3

// package.json
...
  "overrides": {
    "@nuxtjs/tailwindcss": {
      "@nuxt/kit": "3.0.0-rc.13"
    }
  },
...

> npm list @nuxt/kit
└─┬ @nuxtjs/[email protected]
  └── @nuxt/[email protected] overridden

vahid-bagh3ri wrote this answer on 2022-11-25

I have this Issue using v5.3.2 with [email protected] @danielroe

misternian wrote this answer on 2022-11-25

My solution for now:

Downgrade to version 4.2.1.

yarn add @nuxtjs/[email protected]

good idea

vahid-bagh3ri wrote this answer on 2022-11-25

My solution for now:
Downgrade to version 4.2.1.
yarn add @nuxtjs/[email protected]

good idea

By this action you will downgrade to tailwind v2, and it may cause some error, as it did in my project.

lowbits wrote this answer on 2022-11-25

For yarn users please use in your package.json

"resolutions": {
    "@nuxt/kit": "3.0.0-rc.13"
  }

HuanDoan wrote this answer on 2022-11-25

My solution for now:

Downgrade to version 4.2.1.

yarn add @nuxtjs/[email protected]

It works for me:

OS: Mac 12.6
Node version: v14.21.1
Nuxt version: 2.15.8

fahmiegerton wrote this answer on 2022-12-06

Got same problem, i'm using npm, if i use yarn other errors thrown. Tried every suggestion in here but still same. Any other way?

TuanHarry wrote this answer on 2022-12-06

Because @nuxtjs/tailwindcss: 5.3.3 using nuxt/kit :3.0.0
reslove nuxt/kit 3.0.0 to 3.0.0-rc.10

"resolutions": {
    "@nuxt/kit": "3.0.0-rc.10"
  }

it work for me

Sym313 wrote this answer on 2022-12-10

My solution for now:

Downgrade to version 4.2.1.

yarn add @nuxtjs/[email protected]

This is the only workaround working for me too.

yshrsmz wrote this answer on 2022-12-22

Just for confirmation, this error still exists in v6.2.0 when used with Nuxt2

tuannguyenminh2086 wrote this answer on 2022-12-24

For yarn users please use in your package.json
"resolutions": {
    "@nuxt/kit": "3.0.0-rc.13"
  }

thanks. it's working

StevenGrether wrote this answer on 2023-01-05

For yarn users please use in your package.json
"resolutions": {
    "@nuxt/kit": "3.0.0-rc.13"
  }

In case anyone needs the npm equivalent. It resolves the issue for now (nuxt 2.15.8, tailwind 6.2.0)

"overrides": {
    "@nuxt/kit": "3.0.0-rc.13"
}

Aybee5 wrote this answer on 2023-01-11

Even after doing the following steps, I am still getting error

rm -rf node_modules
Deleting yarn.lock + .nuxt
Adding resolutions for yarn
Installing fresh packages

I got the following error from Cannot read properties of undefined (reading 'length') from composition/api

mercs600 wrote this answer on 2023-01-27

This is workaround and works, but this is not a solution.
"overrides" is easy to setup in when you have access to package.json, but what about libraries that use nuxt/tailwind module as dependency ? There is no way to setup overrides.
Even if we force "@nuxt/kit": "3.0.0-rc.13" as dependency in the library.
According to the documentation this module should works with nuxt2, but the problem is still there.

gbyesiltas wrote this answer on 2023-01-30

This is still an issue after @nuxt/kit 3.1.1 for me. Which, assuming it worked with 3.0.0-rc.13, isn't good news

Your Name

Your Comment

More Details About Repo

Owner Name	nuxt-modules
Repo Name	tailwindcss
Full Name	nuxt-modules/tailwindcss
Language	TypeScript
Created Date	2019-04-04
Updated Date	2023-03-29
Star Count	1285
Watcher Count	12
Fork Count	157
Issue Count	57

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date