Question

0

2.5K

Views

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

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.

over 4 years ago · Santiago Trujillo

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-04-06T00:46:40.976Z

Had the same problem today. Double check all your component styles. Check if you are passing a dynamic value to the tailwind's custom className like w-[${width}px] . And change it to inline react style like style={{ width }} . Raises the error at compile time.

Answer 2 · 2022-04-06T00:46:41.228Z

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.

Answer 3 · 2022-04-06T00:46:41.529Z

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.

0

2.5K

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

3 answers

0

0

0

Find remote jobs

Andres GPT