Nuxt项目添加@nuxt/ui模块时触发Pre-transform Error

原本运行正常的Nuxt项目，执行npx nuxi@latest module add ui命令添加@nuxt/ui模块后，出现以下预转换错误：

Pre-transform error: Failed to resolve import "#tailwind-config/theme/colors" from "node_modules/.pnpm/@nuxt+ui@2.16.0_focus-trap@7.5.4_nuxt@3.11.2_@opentelemetry+api@1.8.0_@parcel+watcher@2.4.1_@_sixng7mtxzjwvb5hrwzhbdkxzi/node_modules/@nuxt/ui/dist/runtime/plugins/colors.mjs?v=bcf8a7ff". Does the file exist?

当前项目配置 #

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@pinia/nuxt", "@nuxtjs/tailwindcss", "@nuxt/ui"],
  css: ['~/assets/css/main.css'],
  devServer:{
    host: 'localhost',
  }
})

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^2.16.0",
    "@pinia/nuxt": "^0.5.1",
    "highlight.js": "^11.9.0",
    "jquery": "^3.7.1",
    "marked": "^12.0.2",
    "marked-highlight": "^2.1.1",
    "mysql2": "^3.9.7",
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195",
  "devDependencies": {
    "@nuxt/devtools": "^1.3.1",
    "@nuxtjs/tailwindcss": "^6.12.0"
  }
}

解决步骤 #

• 调整模块加载顺序：@nuxt/ui依赖Tailwind的配置，需要在@nuxtjs/tailwindcss之前加载。修改nuxt.config.ts的modules数组：

  export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: ["@pinia/nuxt", "@nuxt/ui", "@nuxtjs/tailwindcss"], // 调换@nuxt/ui和@nuxtjs/tailwindcss的顺序
    css: ['~/assets/css/main.css'],
    devServer:{
      host: 'localhost',
    }
  })
  

• 清理依赖缓存并重装：执行以下命令清除pnpm缓存，删除现有依赖和锁文件后重新安装：

  pnpm store prune
  rm -rf node_modules
  rm pnpm-lock.yaml
  pnpm install
  

• 重新生成配置：运行pnpm run postinstall触发nuxt prepare，确保Tailwind配置文件正确生成。
• 检查Tailwind配置文件：如果项目根目录没有tailwind.config.js或tailwind.config.ts，手动创建基础配置：

  export default {
    content: [
      "./components/**/*.{js,vue,ts}",
      "./layouts/**/*.vue",
      "./pages/**/*.vue",
      "./plugins/**/*.{js,ts}",
      "./app.vue",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

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