构建时触发TypeError: Cannot read properties of undefined (reading 'future')

执行yarn build构建时抛出异常：TypeError: Cannot read properties of undefined (reading 'future')

当前环境：

• TailwindCSS v3.4.14
• Node.js v20.19.0

经排查，错误来自外部NPM库swiper，且仅在React文件中引入swiper相关CSS时触发，相关代码示例：

import { useAppContext } from '~/context';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import './ProductSlider.scss';

export function ProductSlider({... })

完整错误栈：

../../node_modules/swiper/modules/navigation.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!../../node_modules/swiper/modules/navigation.css
    TypeError: Cannot read properties of undefined (reading 'future')
        at flagEnabled (C:\git\VirtualSelection\packages\applicationroom-ui\node_modules\tailwindcss\lib\featureFlags.js:51:23)
        at C:\git\MyProject\packages\applicationroom-ui\node_modules\tailwindcss\lib\util\getAllConfigs.js:44:97
        at Array.filter (<anonymous>)
        at getAllConfigs (C:\git\MyProject\packages\applicationroom-ui\node_modules\tailwindcss\lib\util\getAllConfigs.js:44:49)
        at C:\git\MyApplication\packages\applicationroom-ui\node_modules\tailwindcss\lib\util\getAllConfigs.js:22:44
        at Array.flatMap (<anonymous>)
        at getAllConfigs (C:\git\MyApplication\packages\applicationroom-ui\node_modules\tailwindcss\lib\util\getAllConfigs.js:22:26)
        at resolveConfig (C:\git\MyApplication\packages\applicationroom-ui\node_modules\tailwindcss\lib\public\resolve-config.js:19:60)
        at getTailwindConfig (C:\git\MyApplication\packages\applicationroom-ui\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:71:88)
        at C:\git\MyApplication\packages\applicationroom-ui\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:100:92
       Creating an optimized production build ...
    Failed to compile.

1. 配置PostCSS排除swiper的CSS文件 #

Tailwind的PostCSS处理器处理swiper CSS时出现配置读取错误，需让PostCSS跳过对swiper CSS的处理：

• 修改postcss.config.js，确保Tailwind的content不包含node_modules下的swiper文件：

module.exports = {
  plugins: {
    tailwindcss: {
      content: [
        './src/**/*.{js,ts,jsx,tsx,mdx}',
      ],
    },
    autoprefixer: {},
  },
};

• 若使用Next.js，在next.config.js中调整webpack规则，排除swiper的CSS：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test && oneOfRule.test.toString().includes('css')) {
            oneOfRule.exclude = /node_modules\/swiper\/.*\.css$/;
          }
        });
      }
    });
    return config;
  },
};

module.exports = nextConfig;

2. 升级swiper到兼容版本 #

部分swiper版本与TailwindCSS v3.4.x存在兼容性问题，升级到最新稳定版：

yarn upgrade swiper@latest

也可指定已知兼容的版本（如v11.x系列）。

3. 检查Tailwind配置文件完整性 #

确保tailwind.config.js结构完整，若涉及future字段需正确定义：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  future: {
    hoverOnlyWhenSupported: true,
    // 其他按需配置项
  },
};

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