CODEWITHSUNDEEP
dockernuxt.jsyarnpkg
xirehat
xirehat

Reputation: 1649

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

When I try to build docker image get this error after run yarn build.

#0 0.496 yarn run v1.22.19                                                                                                                                                                                         
#0 0.531 $ nuxt build
#0 1.538 ℹ️ Using Tailwind CSS from ~/assets/css/tailwind.css
#0 1.543 
#0 1.543  FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.
#0 1.543 
#0 1.543   at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10)
#0 1.543   at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
#0 1.543   at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
#0 1.543   at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5)
#0 1.543   at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
#0 1.543   at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
#0 1.543   at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)
#0 1.543 
#0 1.548 
#0 1.548 ╭──────────────────────────────────────────────────────────────────────────────╮│                                                                              ││   ✖️ Nuxt Fatal Error                                                         ││                                                                              ││   TypeError: Cannot destructure property 'nuxt' of 'this' as it is           ││   undefined.                                                                 ││                                                                              │╰──────────────────────────────────────────────────────────────────────────────╯
#0 1.548 
#0 1.574 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#0 1.574 error Command failed with exit code 1.

Dockerfile:

FROM node:16-slim

ARG AXIOS_BASEURL

WORKDIR /usr/src/app

RUN npm install yarn

COPY package*.json ./
RUN yarn install

COPY . .

ENV NUXT_HOST=0.0.0.0

ENV AXIOS_BASEURL=https://example.com

ENV NUXT_ENV_BACKEND="TEST"

RUN yarn build

CMD yarn start

package.json:

{
  "name": "Project-Front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.2.0",
    "cookie-universal-nuxt": "^2.1.5",
    "core-js": "^3.23.3",
    "jalali-moment": "^3.3.11",
    "nuxt": "^2.15.7",
    "v-mask": "^2.3.0",
    "vue-js-modal": "^2.0.1",
    "vue-toasted": "^1.1.28",
    "vue2-touch-events": "^3.2.2",
    "vuelidate": "^0.7.6",
    "vuex-map-fields": "^1.4.1"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/color-mode": "^2.1.1",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/tailwindcss": "^5.0.4",
    "autoprefixer": "^10.4.6",
    "postcss": "^8.4.20",
    "sass": "~1.32.6",
    "sass-loader": "10.1.1",
    "tailwindcss-dir": "^4.0.0"
  }
}

Thank you for helping me

Upvotes: 2

Views: 8329

Answers (4)

Solar
Solar

Reputation: 1015

I encountered this error while I am trying to upgrade an existing project to the latest version (Nuxt 3).

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

I found that the culprit was the '@nuxt/postcss8' in my module/buildModules property in the nuxt.config.js file because my project is using Tailwind CSS.

What I did was

  1. uninstall all tailwind dependent packages by running npm uninstall tailwindcss postcss autoprefixer.
  2. Remove the '@nuxt/postcss8' from the module in my nuxt.config.js
  3. Followed the official Tailwind installation instruction for Nuxt3.

This solved my problem for this.

Upvotes: 0

Nii Attram Mensah
Nii Attram Mensah

Reputation: 1

Add this to your package.json:

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

and re-run dev or build

Upvotes: 0

mengyi YOENG
mengyi YOENG

Reputation: 117

if you just set up the new project with Tailwind CSS, of course, it will alert an error, so the solution for me is:

go to -> nuxt.config.js -> replace this

'@nuxtjs/tailwindcss'

with

'@nuxt/postcss8'.

enter image description here

Upvotes: 8

xirehat
xirehat

Reputation: 1649

I found a solution.

Add it to package.json and build it again

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

Upvotes: 8

Related Questions