Failed to compile: TypeError: Cannot read properties of undefined (reading 'startsWith') [daisyUI]

Question

Hello everyone.
I'm newer using NextJs. I am getting this error when I try to 'npm run dev'. It has being an issue since I created a tailwindcss app supported in intial create-next-app wizard. Any idea how I figured it out?

OS:

Ubuntu 22.04
Node v18.19.1
NPM v10.2.4

package.json:

{
  "name": "webportifolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "daisyui": "^4.7.3",
    "next": "14.1.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "^14.1.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }
}

tailwind.config.js:

const { default: daisyui } = require('daisyui');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require(daisyui)],
};

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

page.js:

import Image from "next/image";

export default function Home() {
  return (
    <button className="btn btn-primary m-2">Subscribe</button>)
}

Lilac · Accepted Answer

Solution found! It works for me.Installation:npm i -D daisyui@latesttailwind.config.js:/** @type {import('tailwindcss').Config} */

import daisyui from 'daisyui'

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
  plugins: [daisyui],
};

Failed to compile: TypeError: Cannot read properties of undefined (reading 'startsWith') [daisyUI]

1 Reply