My Tailwind CSS Intellisense extension is giving me this error in the output: [Error - 7:41:37 PM] Tailwind CSS: Object.hasOwn is not a function TypeError: Object.hasOwn is not a function
Tailwind Config file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
plugins: [require('daisyui')],
daisyui: {
themes: [
{
lightTheme: {
primary: "#f4aa3a",
secondary: "#f4f4a1",
accent: "#1be885",
neutral: "#272136",
"base-100": "#ffffff",
info: "#778ad4",
success: "#23b893",
warning: "#f79926",
error: "#ea535a",
body: {
"background-color": "#e3e6e6",
},
},
},
],
},
};
package.json:
{
"name": "nextjs-ecommerce",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@auth/prisma-adapter": "^1.0.3",
"@prisma/client": "^5.4.2",
"daisyui": "^3.9.2",
"eslint-config-prettier": "^9.0.0",
"next": "13.5.4",
"next-auth": "^4.23.2",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.5.6",
"prisma": "^5.4.2",
"react": "^18",
"react-dom": "^18",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"eslint": "^8",
"eslint-config-next": "13.5.4",
"postcss": "^8",
"tailwindcss": "^3",
"typescript": "^5"
}
}
Things I tried:
- Reinstalling Tailwind CSS Intellisense extension
- Upgrading NodeJS from V18.16.0 to 20.9.0 (both versions are well above DaisyUI's requirement as per their documentation)
- Reinstalling NodeJS completely
- Disabling Tailwind CSS Intellisense extension and re-enabling it
- Restarting VS code
- Removing all daisyui packages and reinstalling them with npm
If I remove the 'require(daisyui)' from the plugins, everything works fine.
Any help would be appreciated.
Issue resolved after reinstalling VS code and setting up the dev environment completely from scratch.