Nuxt 致命错误 TypeError：无法解构“this”的属性“nuxt”，因为它未定义

Question

当我尝试构建 docker 映像时，在运行后出现此错误yarn build。

\n

#0 0.496 yarn run v1.22.19                                                                                                                                                                                         \n#0 0.531 $ nuxt build\n#0 1.538 \xe2\x84\xb9\xef\xb8\x8f Using Tailwind CSS from ~/assets/css/tailwind.css\n#0 1.543 \n#0 1.543  FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.\n#0 1.543 \n#0 1.543   at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10)\n#0 1.543   at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)\n#0 1.543   at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)\n#0 1.543   at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5)\n#0 1.543   at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)\n#0 1.543   at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)\n#0 1.543   at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)\n#0 1.543 \n#0 1.548 \n#0 1.548 \xe2\x95\xad\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xae\xe2\x94\x82                                                                              \xe2\x94\x82\xe2\x94\x82   \xe2\x9c\x96\xef\xb8\x8f Nuxt Fatal Error                                                         \xe2\x94\x82\xe2\x94\x82                                                                              \xe2\x94\x82\xe2\x94\x82   TypeError: Cannot destructure property 'nuxt' of 'this' as it is           \xe2\x94\x82\xe2\x94\x82   undefined.                                                                 \xe2\x94\x82\xe2\x94\x82                                                                              \xe2\x94\x82\xe2\x95\xb0\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xaf\n#0 1.548 \n#0 1.574 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n#0 1.574 error Command failed with exit code 1.\n

\n

Dockerfile：

\n

FROM node:16-slim\n\nARG AXIOS_BASEURL\n\nWORKDIR /usr/src/app\n\nRUN npm install yarn\n\nCOPY package*.json ./\nRUN yarn install\n\nCOPY . .\n\nENV NUXT_HOST=0.0.0.0\n\nENV AXIOS_BASEURL=https://example.com\n\nENV NUXT_ENV_BACKEND="TEST"\n\nRUN yarn build\n\nCMD yarn start\n

\n

包.json：

\n

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

\n

感谢你们对我的帮助

\n

Answer 1

我找到了解决方案。

将其添加到 package.json 并再次构建

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

Answer 2

如果你只是使用 Tailwind CSS 设置新项目，当然，它会提示错误，所以我的解决方案是：

转到 -> nuxt.config.js-> 替换它

'@nuxtjs/tailwindcss' 

和

'@nuxt/postcss8'.