配置NextUI至tailwind.config.js时遇TypeError错误求助

我的tailwind.config.js配置 #

import {nextui} from "@nextui-org/react";
/** @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}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  darkMode: "class",
  plugins: [nextui()]
}

报错日志 #

Ready in 3.4s
 ○ Compiling / ...
 ⨯ ./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]!./app/globals.css
TypeError: Cannot read properties of undefined (reading 'toLowerCase')
Import trace for requested module:
./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]!./app/globals.css
./app/globals.css
 ⨯ ./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]!./app/globals.css
TypeError: Cannot read properties of undefined (reading 'toLowerCase')
Import trace for requested module:
./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]!./app/globals.css
./app/globals.css
 ✓ Compiled /favicon.ico in 385ms (323 modules)

问题描述 #

我在Next.js项目中搭建NextUI，严格按照官方文档步骤配置tailwind.config.js，但始终触发上述TypeError: Cannot read properties of undefined (reading 'toLowerCase')错误，求分析原因及解决办法。

解决办法 #

这个错误大多由语法混用、版本不兼容或样式引入问题导致，可按以下步骤排查：

1. 统一配置文件语法 #

你当前混用了ES模块的import和CommonJS的module.exports，会导致加载异常，二选一即可：

• 纯CommonJS语法：

const {nextui} = require("@nextui-org/react");
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其余配置保持不变
}

• 纯ES模块语法（需确保package.json中有"type": "module"）：

import {nextui} from "@nextui-org/react";
/** @type {import('tailwindcss').Config} */
export default {
  // 其余配置保持不变
}

2. 校验版本兼容性 #

NextUI v2要求Next.js 13+、Tailwind CSS 3.3+，执行命令更新依赖：

npm install next@latest tailwindcss@latest postcss@latest autoprefixer@latest @nextui-org/react@latest

3. 检查全局样式引入 #

确保app/globals.css中正确引入Tailwind和NextUI样式：

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

@import "@nextui-org/theme/dist/styles.css";

4. 清除缓存重启项目 #

执行以下命令清理缓存后重启开发服务器：

rm -rf .next node_modules package-lock.json
npm install
npm run dev

内容的提问来源于stack exchange，提问作者Dixit Kumawat