Next.js 14.0.3集成NextUI nextui()插件触发TypeError错误求助

环境信息 #

• Next.js版本：14.0.3
• NextUI版本：2.2.9
• Tailwind CSS版本：3.3.3

问题详情 #

将nextui()插件添加到Tailwind配置文件后，构建时触发以下错误：

./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').

移除nextui()插件后错误消失，但NextUI组件无法加载样式。

相关配置代码 #

Tailwind配置文件（tailwind.config.js） #

/* 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,
    },
}

全局样式文件（src/app/globals.css） #

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

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

已尝试的排查动作 #

• 重新安装NextUI依赖，问题未解决
• 移除Tailwind配置中的nextui()插件，错误消失但NextUI组件无样式

解决方案 #

升级Node.js到最新稳定版本即可解决该问题。

错误原因 #

该错误源于Node.js 21版本中的已知bug，此bug会干扰NextUI在搭配Tailwind CSS的Next.js项目中的正常运行，升级Node.js到修复该bug的版本即可消除兼容性问题。

内容的提问来源于stack exchange，提问作者Yassine Chettouch