Vue3集成Tailwind与DaisyUI编译报错：Object.hasOwn is not a function

问题详情 #

添加DaisyUI插件后项目编译失败，报错信息：

in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css

Syntax Error: TypeError: Object.hasOwn is not a function
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)


ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Object.hasOwn is not a function

当前tailwind.config.js配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
}

环境版本：Node v19.9.0、DaisyUI 4.11.1、Tailwind 3.4.3，已升级Node至16+版本但问题依旧。

解决方案 #

1. 修正Tailwind配置字段冲突 #

Tailwind v3+已用content替代purge，同时配置两个字段会引发逻辑冲突，且content为空会导致Tailwind无法正确扫描文件。修改配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

2. 升级postcss-loader版本 #

旧版postcss-loader可能存在API兼容问题，执行命令升级到最新版：

npm install postcss-loader@latest --save-dev

3. 清除缓存后重新构建 #

缓存可能导致版本兼容异常，执行以下命令清理缓存并重新编译：

rm -rf node_modules/.cache
npm run build

4. 确认Node版本一致性 #

检查当前终端使用的Node版本是否为v19.9.0，避免版本管理工具（如nvm）导致的版本切换问题：

node -v

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