Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError

user_17407506 0
Viewed 3865

Been having this issue for a week now and haven't been able to find a solution, but I figured out some things to narrow down the issue. I'm attempting to run yarn build in my Next.js application but it fails with an error that I'll post below.

The program app compiles fine with yarn dev and all the styles work. I used the standard setup from the TW docs.

Could bad style names cause errors with building? For example className="BadStyleName h-10 w-10"

Error:

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at makeWebpackError (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:47168:9)
    at C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:31056:12
    at eval (eval at create (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:141512:10), <anonymous>:34:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tailwind.config.js:

module.exports = {
    content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: true, // or 'media' or 'class'
  theme: {
    extend: {
            flex: {
                basis: '0 0 100%',
            },
            colors: {
                primary: { mint: "#18BCFF" },
                slate: {
                    50: "#f8fafc",
                    100: "#f1f5f9",
                    200: "#e5e5e5",
                    300: "#d4d4d4",
                    400: "#a3a3a3",
                    500: "#737373",
                    600: "#525252",
                    700: "#404040",
                    800: "#262626",
                    900: "#171717"
                }
            },
        }
        
  },

  plugins: [
        require('daisyui'),
        require('@tailwindcss/line-clamp'),
        require('tailwind-scrollbar'),
    ],
    variants: {
        scrollbar: ['rounded']
    }
}

next.config.js:

module.exports = {
  reactStrictMode: true,
    images: {
    domains: ['firebasestorage.googleapis.com'],
  },
}

_app.js:

import "../styles/globals.css"
import 'tailwindcss/tailwind.css'
import Layout from "../components/layout/layout"
import "../firebase/clientApp"
import { SessionProvider } from "next-auth/react"
import MintBG from "../components/layout/mintBG"

function MyApp({ Component, pageProps }) {
  return (
        <div className="text-white overflow-hidden">
            <AnimatedBG />
            <SessionProvider session={pageProps.session}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>    
            </SessionProvider>
        </div>
    )
}

export default MyApp

postcss.config.js

console.log("Testing Postcss")

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

package.json

{
  "name": "project",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.2",
    "@tailwindcss/line-clamp": "^0.3.0",
    "daisyui": "^1.16.2",
    "dotenv": "^10.0.0",
    "embla-carousel-react": "^6.0.2",
    "firebase": "^9.4.1",
    "firebase-admin": "^10.0.0",
    "firebaseui": "^6.0.0",
    "formik": "^2.2.9",
    "lodash": "^4.17.21",
    "next": "latest",
    "next-auth": "^4.0.0-beta.7",
    "react": "17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "svg-react-loader": "^0.4.6",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.5",
    "react-svg-loader": "^3.0.3",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.6"
  }
}

Notes:

  • The console.log() from postcss.config.js edit: IS PRINTED
  • C:\Users\project\static\css\b0067dc6dc66c8dc doesn't seem to resolve to a file when I alt+click it.
  • The app will build fine when "./components/**/*.{js,ts,jsx,tsx}", is removed from content: [] in tailwind.config.js. /components/ jsx won't receive any TW styling, but the jsx in /pages/ work as expected.
  • removing plugins: [] & variants: {} doesn't fix it.
  • @tailwind base; @tailwind components; @tailwind utilities; are imported in globals.css.
tailwind-css next.js reactjs javascript
3 Answers

Had the same problem today. Recheck all of your components styles. Check if you are passing dynamic value to the tailwind's custom className like w-[${width}px]. And change it to the inline react style like style={{ width }}. It causes the error during build time.

user_175840460

In my case, I had a line in the block of a component like this:

function Foo({ givenListPaperWidth = 200 }) {
    // ...
    // The below line was commented
    // const listPaperWidth = `w-[${givenListPaperWidth}px]`;  (**)
    
    return "Foo component";
}

Even though "(**) line" was commented, it was causing build error. After deleting the line, build was done successfully.

user_106175180

I deleted the comments at the end of my file (not even inside the component) and the build command worked successfully. Sometimes code is just unbelievable.

user_74210410
Related