使用Vite搭建TypeScript+React+daisyUI时遇require未定义错误求助

云原生阿岚

2026-7-12

解决Vite+TS+React+daisyUI项目中require is not defined错误

原因分析

Vite 默认采用 ES 模块规范，require 是 CommonJS 专属语法。当 Tailwind 配置文件为 .js 后缀时，Vite 会将其识别为 ES 模块，此时调用 require 就会触发报错；另外 tsconfig.json 里的 moduleResolution: "node" 是 Node.js 的模块解析逻辑，和 Vite 的 ES 模块环境不兼容，也会间接引发该问题。

解决方案

方案1：将Tailwind配置改为CommonJS格式

把 tailwind.config.js 重命名为 tailwind.config.cjs
配置文件内可正常使用 require 语法引入依赖，示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

方案2：改用ES模块语法替代`require`

保留 tailwind.config.js 后缀，将 require 替换为 import：

/** @type {import('tailwindcss').Config} */
import daisyui from 'daisyui';

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [daisyui],
}

同步调整 tsconfig.json，让模块解析适配 Vite 的 ES 模块环境：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ESNext",
    // 保留其他原有配置
  }
}

方案3：确保Vite配置正确识别Tailwind

检查 vite.config.ts 的 PostCSS 配置，确保 Tailwind 正常生效：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
});