Build failed because of webpack errors - Unknown word - CssSyntaxError

Question

I am using NextJS 14 with Tailwind. The project works fine in dev mode but I got an error during deployment. I got this error.

 ▲ Next.js 14.2.8

   Creating an optimized production build ...
Failed to compile.

HookWebpackError: C:\Users\sahil\OneDrive\Desktop\stickerly\static\css\8ad8cd16a8552442.css:1022:83: Unknown word
    at makeWebpackError (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\compiled\webpack\bundle5.js:28:312635)
    at C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\compiled\webpack\bundle5.js:28:106060
    at eval (eval at create (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\compiled\webpack\bundle5.js:13:28858), <anonymous>:44:1)
-- inner error --
CssSyntaxError: C:\Users\sahil\OneDrive\Desktop\stickerly\static\css\8ad8cd16a8552442.css:1022:83: Unknown word
    at Input.error (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\input.js:106:16)
    at ScssParser.unknownWord (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\parser.js:594:22)
    at ScssParser.other (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\parser.js:436:12)
    at ScssParser.parse (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\parser.js:471:16)
    at scssParse (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:322)
    at new LazyResult (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\lazy-result.js:133:16)
    at Processor.process (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:48:12)
    at C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:79:55
    at async Span.traceAsyncFn (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\trace\trace.js:154:20)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: C:\Users\sahil\OneDrive\Desktop\stickerly\static\css\8ad8cd16a8552442.css:1022:83: Unknown word
    at Input.error (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\input.js:106:16)
    at ScssParser.unknownWord (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\parser.js:594:22)
    at ScssParser.other (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\parser.js:436:12)
    at ScssParser.parse (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\parser.js:471:16)
    at scssParse (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:322)
    at new LazyResult (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_mod    at Processor.process (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\node_modules\postcss\lib\processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:48:12)
    at C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:79:55
    at async Span.traceAsyncFn (C:\Users\sahil\OneDrive\Desktop\stickerly\node_modules\next\dist\trace\trace.js:154:20)


> Build failed because of webpack errors

package.json

{
    "name": "stickify",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@uidotdev/usehooks": "^2.4.1",
        "lucide-react": "^0.438.0",
        "next": "^14.2.8",
        "react": "^18",
        "react-dom": "^18",
        "swiper": "^11.1.12",
        "uuid": "^10.0.0"
    },
    "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "@types/uuid": "^10.0.0",
        "eslint": "^8",
        "eslint-config-next": "14.2.0",
        "postcss": "^8.4.45",
        "prettier": "^3.3.3",
        "prettier-plugin-tailwindcss": "^0.6.6",
        "tailwindcss": "^3.4.10",
        "typescript": "^5"
    }
}

I search on google but could NOT found any solution. I saw a similar question on StackOverflow but it was unanswered. Build failed because of webpack errors (Next build failing)

If would be a great help if you could help me fix this issue.

Answer 1

How a semicolon can ruin developers whole day. Yes, I copy paste code from CSS to tailwind and forget to remove semicolon ;.

boxShadow: {
   box: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;", // <--- Here was semicolon, which cause CSS syntax issue during build
},

Fixed Code

boxShadow: {
   box: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px", // <--- Just remove semicolon 😎
},

If you are facing this issue. May be due to misplace of ;, ,, or :.