Vite-React项目集成Material Tailwind遇Hook及ESLint错误求助

问题根源 #

Vite默认使用**ES模块(ESM)**语法，你修改后的tailwind.config.js使用了CommonJS的require和module.exports，这既触发ESLint的未定义错误，也会导致Material Tailwind无法正确加载，进而引发运行时组件解析错误。

步骤1：修正tailwind.config.js为ES模块语法 #

将原配置替换为ESM格式：

import withMT from "@material-tailwind/react/utils/withMT";

/** @type {import('tailwindcss').Config} */
export default withMT({
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

• 移除const require和module.exports，改用import和export default
• 保留类型注释以获得IDE语法提示

步骤2：验证PostCSS配置（可选） #

如果postcss.config.js也出现ESLint错误，同样改为ESM格式：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

步骤3：重启开发服务器 #

修改配置文件后，必须停止当前npm run dev进程，重新执行启动命令，确保新配置生效。

步骤4：验证组件运行 #

此时重新运行你的Button组件代码：

import './App.css'
import {Button} from "@material-tailwind/react";

export default function App() {
  return <Button>Button</Button>;
}

控制台错误会消失，Material Tailwind组件能正常渲染。

额外说明：WebStorm ESLint配置 #

如果仍有ESLint提示，可在WebStorm中操作：

• 打开Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
• 确保ESLint版本与项目依赖一致，且启用自动修复功能

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