NextUI + Next.js 14.0.3 Collision: TypeError When Using nextui() Plugin

Question

Fellow Next.js and NextUI enthusiasts, I'm encountering a perplexing error that's halting my development journey. I'm seeking your collective wisdom to guide me through this impasse.

Here's the scenario:

Next.js version: 14.0.3 NextUI version: 2.2.9 Tailwind CSS version: 3.3.3

The challenge:

Upon integrating the nextui() plugin into my Tailwind configuration, I'm confronted with this error: ./src/app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/app/globals.css TypeError: Cannot read properties of undefined (reading 'toLowerCase').

Here's my Tailwind configuration:

/* eslint-disable @typescript-eslint/no-var-requires */
import { nextui } from "@nextui-org/react"

const colors = require("tailwindcss/colors")
/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: "class",
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
        "./public/**/*.html",
        "./node_modules/flowbite-react/**/*.js",
        "./node_modules/flowbite-react/lib/esm/**/*.js",
        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            primary: colors.indigo,
        },
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
        require("@tailwindcss/container-queries"),
        require("flowbite/plugin"),
        nextui(),
    ],
    future: {
        hoverOnlyWhenSupported: true,
    },
}

My globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ! Other CSS styling for customised components. */

---

I've attempted the following:

1. Reinstalling NextUI in case of any installation errors, ended up witht the same issue.
2. Removed the nextui() plugin for the tailwind.config.js file, the issue disappeared, but with no syling for NextUI components when used in the app.

---

I'm seeking guidance on:

• Identifying the root cause of this error.
• Rectifying the configuration to achieve harmonious coexistence between Next.js 14.0.3 and NextUI.
• Unveiling any potential compatibility issues or known workarounds.

Solution: Upgrading Node.js to the latest version rectified the problem. It appears the underlying issue was tied to a bug present in Node 21, which impacted the compatibility with NextUI when integrated into a Next.js project using Tailwind CSS.

Answer 1

I had this exact error -- the answer is to update your node version! There is a bug in Node 21. It has been fixed in the latest version:

the issue is fixed with 21.1.0