Getting PostCSS error when I add DaisyUI in the React Vite Project

Question

I'm getting an issue when I try to add DaisyUI to my React Vite project.

This is in the terminal:

[vite] Internal server error: [postcss] Object.hasOwn is not a function

This is in the browser:

[plugin:vite:css] [postcss] Object.hasOwn is not a function

If I remove DaisyUI from the tailwind.config file then everything is perfect.

How can I solve this?

My package.json file:

{
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.14",
    "daisyui": "^3.5.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

Answer 1

It seems like you could be running a version of Node.js that is not supported by Daisy UI. If we look at Daisy UI's package.json for the newest version, v3.5.0:

"engines": {
  "node": ">=16.9.0"
},

This may be because Object.hasOwn does not exist in Node.js in versions lower than 16.9.0, according to MDN.

To solve your problem, you could consider:

• Upgrading your version of Node.js to one greater than or equal to 16.9.0.
• Using an older version of Daisy UI that supports your version of Node.js.