CODEWITHSUNDEEP
vue.jsnpmnuxt.jstailwind-css
Conner Christ
Conner Christ

Reputation: 63

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

I want to create a new Nuxt project and followed their instructions here: https://nuxtjs.org/docs/get-started/installation. Basically just running npm init nuxt-app@latest <project-name>.

After going through the setup (in which I choose Tailwind as my UI of choice), I run npm run dev and it crashes while trying to build saying "Cannot destructure property 'nuxt' of 'this' as it is undefined."

Here is the full stack:

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

  at postcss8Module (node_modules\@nuxt\postcss8\dist\index.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\@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)

I found not including '@nuxtjs/tailwindcss' in the buildModules in nuxt.config.js removes the error, but it does not create the tailwind config files I need. Also, the line causing the error in postcss8Module's index.js is const { nuxt } = this. For some reason this is undefined.

Upvotes: 5

Views: 2784

Answers (4)

Json P
Json P

Reputation: 11

I found vstollen solution only partially worked for me, so had to make additional installs:

npm install nuxt@latest vue-router@latest vue@latest --save-dev

This will probably cause index.vue to complain about vue.extend so will need to update the script section.

I found the solution here: Uncaught TypeError: Cannot read properties of undefined (reading 'extend') after upgrade vue to 3.x

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'IndexPage'
})
</script>

Your new project should then start correctly without errors.

Upvotes: 0

xirehat
xirehat

Reputation: 1629

I found a solution

add it to your package.json

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

Upvotes: 0

Soul Spark
Soul Spark

Reputation: 56

Hi sorry doesn't have enough rep to comment on this, but just wanted to say this issue is also being tracked at https://github.com/nuxt/framework/issues/9115 for Nuxt 2

Upvotes: 2

vstollen
vstollen

Reputation: 425

The error comes from the recent Nuxt 3 Release and is being tracked on the create-nuxt-app Github.

Create-nuxt-app is not compatible with Nuxt 3 yet. Therefore, for now, you have to 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 app as expected:

npm run dev

Upvotes: 3

Related Questions