The application suddenly started throwing up the below exception during the build process.

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

yarn build

I could see, the error comes from a external NPM library:

• swiper -

I noticed the issue is happening for the classes where there is a

import css statement in React file

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.

The application suddenly started throwing up the below exception during the build process.

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

yarn build

I could see, the error comes from a external NPM library:

• swiper - https://www.npmjs/package/swiper

I noticed the issue is happening for the classes where there is a

import css statement in React file

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.

• tailwind-css
• swiper.js
• tailwind-ui
• tailwind-css-3

1 Answer 1

The most likely cause is that Tailwind 3.4.x has changes that affect how external CSS is processed. I've seen this before with other packages. Try these fixes:

Downgrade Tailwind to a slightly older version:

[email protected]

This version is more stable with external CSS libraries like Swiper. I had to do this on my last project too.

Or you could exclude Swiper CSS from Tailwind processing. You'll need to modify your build config to tell it not to run Swiper's CSS through the Tailwind processor.

The error is happening because Tailwind is trying to process Swiper's CSS files and can't find some property it expects (future). Either solution should fix it - I'd try the downgrade first since it's quicker.