0

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"
  }
}
Wongjn
  • 8,544
  • 2
  • 8
  • 24
Shahriyar Ahmed
  • 510
  • 5
  • 9

1 Answers1

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.
Wongjn
  • 8,544
  • 2
  • 8
  • 24