Nuxt build error: TypeError: Cannot destructure 'this' of property 'nuxt' because it is undefined

Question

I want to create a new Nuxt project and follow the instructions here: https://nuxtjs.org/docs/get-started/installation. Basically just run npm init nuxt-app@latest .

After completing the setup (I chose Tailwind as my UI of choice), I ran npm run dev and it crashed when trying to build with "Unable to destructure properties of 'this' as is'nuxt" '" is not defined. ”

This is the complete stack:

FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.                                                                                                                                                      15:22:52  

  at postcss8Module (node_modules@nuxtpostcss8distindex.js:15:10)
  at installModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxt/kit/dist/index.mjs:416:9)
  at async setup (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
  at async ModuleContainer.normalizedModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxt/kit/dist/index.mjs:167:5)
  at async ModuleContainer.addModule (node_modules@nuxtcoredistcore.js:239:20)
  at async ModuleContainer.ready (node_modules@nuxtcoredistcore.js:51:7)
  at async Nuxt._init (node_modules@nuxtcoredistcore.js:478:5)

I found that not including '@nuxtjs/tailwindcss' in the buildModules of nuxt.config.js eliminated the error, but it did not create the tailwind configuration file I needed. Also, the line in index.js of postcss8Module that causes the error is const { nuxt } = this. For some reason this is undefined.

Answer 1

This error comes from a recent Nuxt 3 version and is being create-nuxt-app Github.

Create-nuxt-app is not yet compatible with Nuxt 3. Therefore, currently you must install Nuxt 3 and Tailwind CSS manually:

npx nuxi init <project-name>
cd <project-name>
npm install
npm install @nuxtjs/tailwindcss --save-dev

Now you should be able to run your application as expected:

npm run dev

Answer 2

Hi, sorry there aren't enough reps to comment on this, but just wanted to say this issue is being tracked as well https://github.com/nuxt/framework/issues/9115 For Nuxt 2