Vue 3.5+Vite 6.0.3部署Vercel遇Tailwind配置错误求助

云上老周

2026-6-15

Vercel部署Vue3.5+Vite6项目时Tailwind配置的模块语法错误解决

问题背景

基于Vue 3.5 Composition API、Vite v6.0.3的项目，本地运行正常，Netlify可正常部署，但在Vercel部署时因Tailwind配置文件的模块语法冲突报错：

使用require语法时，触发ReferenceError: require is not defined
改为ES6 import语法后，触发ReferenceError: module is not defined

错误日志

require语法报错

ReferenceError: require is not defined
    at file:///vercel/path0/tailwind.config.js:1:17
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Object..js (node:internal/modules/cjs/loader:1677:16)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
Node.js v22.12.0
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1

ES6 import语法报错

ReferenceError: module is not defined
    at file:///vercel/path0/tailwind.config.js:5:1
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Object..js (node:internal/modules/cjs/loader:1677:16)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
Node.js v22.12.0
error: script "build" exited with code 1
Error: Command "npm run build" exited with 1

解决方案

问题根源是Vercel的Node.js环境对ES模块与CommonJS的语法兼容性要求更严格，需统一Tailwind配置文件的模块格式：

方案1：使用CommonJS格式（推荐，无需修改package.json）

将tailwind.config.js重命名为tailwind.config.cjs
配置内容保持CommonJS语法，补充缺失的animate导入：

const tailwindHamburgers = require("tailwind-hamburgers");
const animate = require("tailwindcss-animate");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  safelist: ["dark"],
  prefix: "",
  content: [
    "./pages/**/*.{ts,tsx,vue}",
    "./components/**/*.{ts,tsx,vue}",
    "./app/**/*.{ts,tsx,vue}",
    "./src/**/*.{ts,tsx,vue}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        "main-black": "#141522",
        "main-purple": {
          100: "#DCE4FF",
          200: "#BAC8FF",
          300: "#98ABFF",
          400: "#7E95FF",
          500: "#546FFF",
          600: "#3D53DB",
          700: "#2A3BB7",
          800: "#1A2793",
          900: "#10197A",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        skeleton: "calc(var(--radius) + 12px)",
        xl: "calc(var(--radius) + 4px)",
        "lg-max": "calc(var(--radius) + 2px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "collapsible-down": {
          from: { height: 0 },
          to: { height: "var(--radix-collapsible-content-height)" },
        },
        "collapsible-up": {
          from: { height: "var(--radix-collapsible-content-height)" },
          to: { height: 0 },
        },
        spin: {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
      },
      animation: {
        spin: "spin 1s linear infinite",
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "collapsible-down": "collapsible-down 0.2s ease-in-out",
        "collapsible-up": "collapsible-up 0.2s ease-in-out",
      },
    },
  },
  plugins: [animate, tailwindHamburgers],
};

方案2：使用ES模块格式

修改tailwind.config.js为ES模块语法，替换require和module.exports：

import animate from "tailwindcss-animate";
import tailwindHamburgers from "tailwind-hamburgers";

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  safelist: ["dark"],
  prefix: "",
  content: [
    "./pages/**/*.{ts,tsx,vue}",
    "./components/**/*.{ts,tsx,vue}",
    "./app/**/*.{ts,tsx,vue}",
    "./src/**/*.{ts,tsx,vue}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        "main-black": "#141522",
        "main-purple": {
          100: "#DCE4FF",
          200: "#BAC8FF",
          300: "#98ABFF",
          400: "#7E95FF",
          500: "#546FFF",
          600: "#3D53DB",
          700: "#2A3BB7",
          800: "#1A2793",
          900: "#10197A",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        skeleton: "calc(var(--radius) + 12px)",
        xl: "calc(var(--radius) + 4px)",
        "lg-max": "calc(var(--radius) + 2px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "collapsible-down": {
          from: { height: 0 },
          to: { height: "var(--radix-collapsible-content-height)" },
        },
        "collapsible-up": {
          from: { height: "var(--radix-collapsible-content-height)" },
          to: { height: 0 },
        },
        spin: {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
      },
      animation: {
        spin: "spin 1s linear infinite",
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "collapsible-down": "collapsible-down 0.2s ease-in-out",
        "collapsible-up": "collapsible-up 0.2s ease-in-out",
      },
    },
  },
  plugins: [animate, tailwindHamburgers],
};

若项目package.json未设置"type": "module"，需将文件名改为tailwind.config.mjs；或在package.json中添加"type": "module"（此操作会使项目中所有.js文件默认按ES模块处理）。

原因说明

Netlify与本地开发环境对混合使用ES模块和CommonJS语法的兼容性容忍度更高，而Vercel使用的Node.js v22.12.0严格遵循模块规范：

当项目配置为ES模块（如tsconfig中module: "ESNext"或package.json含"type": "module"），.js文件会被解析为ES模块，禁止使用require和module.exports
若为CommonJS环境，.js文件禁止使用import/export语法

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

Vue 3.5+Vite 6.0.3部署Vercel遇Tailwind配置错误求助

问题背景 #

错误日志 #

require语法报错

ES6 import语法报错

解决方案 #

方案1：使用CommonJS格式（推荐，无需修改package.json） #

方案2：使用ES模块格式 #