Docker构建Nuxt项目时遇TypeError解构错误求解决

错误日志 #

#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"
  }
}

解决方案 #

核心原因 #

@nuxtjs/tailwindcss v5.x版本是为Nuxt3设计的，而当前项目使用的是Nuxt2.15.7，版本不兼容导致模块初始化时上下文异常，无法解构nuxt属性。

修复步骤 #

1. 修改package.json中的@nuxtjs/tailwindcss版本为适配Nuxt2的^4.2.1，保持@nuxt/postcss8版本不变（^1.1.3适配Nuxt2）：

"devDependencies": {
  "@nuxt/postcss8": "^1.1.3",
  // ...其他依赖
  "@nuxtjs/tailwindcss": "^4.2.1",
  // ...其他依赖
}

2. 本地测试时，删除node_modules和yarn.lock后重新执行yarn install；直接构建Docker镜像时，重新执行docker build即可（镜像构建过程会自动重新安装依赖）。
3. 再次执行yarn build即可正常完成构建。

内容的提问来源于stack exchange，提问作者xirehat