React: Tailwind CSS with DaisyUI Error: Object.hasOwn is not a function

249 views Asked by At

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:

  1. Reinstalling Tailwind CSS Intellisense extension
  2. Upgrading NodeJS from V18.16.0 to 20.9.0 (both versions are well above DaisyUI's requirement as per their documentation)
  3. Reinstalling NodeJS completely
  4. Disabling Tailwind CSS Intellisense extension and re-enabling it
  5. Restarting VS code
  6. 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.

1

There are 1 answers

0
Chris On BEST ANSWER

Issue resolved after reinstalling VS code and setting up the dev environment completely from scratch.