Nextjs production build throwws `HookWebpackError` & `Unclosed block`. Local dev works fine #16040

dimitrisnl · 2025-01-30T07:31:36Z

dimitrisnl
Jan 30, 2025

Hello!

I've ran the the script npx @tailwindcss/upgrade@next and I get normal output

│ Searching for CSS files in the current directory and its subdirectories…
│ ↳ Linked `./tailwind.config.ts` to `./src/styles/global.css`
│ Migrating JavaScript configuration files…
│ ↳ Migrated configuration file: `./tailwind.config.ts`
│ Migrating templates…
│ ↳ Migrated templates for configuration file: `./tailwind.config.ts`
│ Migrating stylesheets…
│ ↳ Migrated stylesheet: `./src/styles/global.css`
│ Migrating PostCSS configuration…
│ ↳ Installed package: `@tailwindcss/postcss`
│ ↳ Removed package: `autoprefixer`
│ ↳ Migrated PostCSS configuration: `./postcss.config.mjs`
│ Updating dependencies…
│ ↳ Updated package: `prettier-plugin-tailwindcss`
│ ↳ Updated package: `tailwindcss`

Then I tried it locally, and it works like a charm. But when I try to build my project (locally & Netlify) I get

HookWebpackError: <REDACTED>/static/css/2debee323827dbd3.css:2:45286: Unclosed block
    at makeWebpackError (<REDACTED>/node_modules/next/dist/compiled/webpack/bundle5.js:28:314608)
    at <REDACTED>/node_modules/next/dist/compiled/webpack/bundle5.js:28:106402
    at eval (eval at create (<REDACTED>/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:44:1)
-- inner error --
CssSyntaxError: <REDACTED>/static/css/2debee323827dbd3.css:2:45286: Unclosed block
    at Input.error (<REDACTED>/node_modules/next/node_modules/postcss/lib/input.js:106:16)
    at ScssParser.unclosedBlock (<REDACTED>/node_modules/next/node_modules/postcss/lib/parser.js:574:22)
    at ScssParser.endFile (<REDACTED>/node_modules/next/node_modules/postcss/lib/parser.js:336:35)
    at ScssParser.parse (<REDACTED>/node_modules/next/node_modules/postcss/lib/parser.js:475:10)
    at scssParse (<REDACTED>/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
    at new LazyResult (<REDACTED>/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (<REDACTED>/node_modules/next/node_modules/postcss/lib/processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (<REDACTED>/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:48:12)
    at <REDACTED>/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:79:55
    at async Span.traceAsyncFn (<REDACTED>/node_modules/next/dist/trace/trace.js:153:20)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: <REDACTED>/static/css/2debee323827dbd3.css:2:45286: Unclosed block
    at Input.error (<REDACTED>/node_modules/next/node_modules/postcss/lib/input.js:106:16)
    at ScssParser.unclosedBlock (<REDACTED>/node_modules/next/node_modules/postcss/lib/parser.js:574:22)
    at ScssParser.endFile (<REDACTED>/node_modules/next/node_modules/postcss/lib/parser.js:336:35)
    at ScssParser.parse (<REDACTED>/node_modules/next/node_modules/postcss/lib/parser.js:475:10)
    at scssParse (<REDACTED>/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
    at new LazyResult (<REDACTED>/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (<REDACTED>/node_modules/next/node_modules/postcss/lib/processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (<REDACTED>/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:48:12)
    at <REDACTED>/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:79:55
    at async Span.traceAsyncFn (<REDACTED>/node_modules/next/dist/trace/trace.js:153:20)

What I've tried

Removed all the CSS content => still fails
Keep a single javascript file with Tailwind class => fails
Keep a single javascript file without Tailwind class => works

I only have a single CSS file, so I'm surprised that I read scss in the logs

Any ideas on where to look?

Answered by dimitrisnl

Jan 30, 2025

This makes zero sense but here's what broke

![https://res.cloudinary.com/ds9pd4ywd/image/upload/v1675781730/blog-images/posts/building-browser-extension/content-script-setup_terc19.png](https://res.cloudinary.com/ds9pd4ywd/image/upload/v1675781730/blog-images/posts/building-browser-extension/content-script-setup_terc19.png)

updated to

![image](https://res.cloudinary.com/ds9pd4ywd/image/upload/v1675781730/blog-images/posts/building-browser-extension/content-script-setup_terc19.png)

cc @wongjn

View full answer

wongjn · 2025-01-30T07:54:11Z

wongjn
Jan 30, 2025

Consider providing a project that reproduces the unexpected behavior.

1 reply

dimitrisnl Jan 30, 2025
Author

This is not as easy as it sounds. The nextjs tailwindui templates I downloaded don't have problem.

dimitrisnl · 2025-01-30T08:22:45Z

dimitrisnl
Jan 30, 2025
Author

Tried without the migration script.

installed 4.0.1 versions
single CSS file with @import 'tailwindcss';
updated postcss.config.mjs

same error

0 replies

dimitrisnl · 2025-01-30T08:41:02Z

dimitrisnl
Jan 30, 2025
Author

I've traced it to my content/*.mdx files. So that's some progress

0 replies

dimitrisnl · 2025-01-30T09:05:11Z

dimitrisnl
Jan 30, 2025
Author

Looking further it's a post about Lit which might have weird syntax

0 replies

dimitrisnl · 2025-01-30T09:17:37Z

dimitrisnl
Jan 30, 2025
Author

This makes zero sense but here's what broke

![https://res.cloudinary.com/ds9pd4ywd/image/upload/v1675781730/blog-images/posts/building-browser-extension/content-script-setup_terc19.png](https://res.cloudinary.com/ds9pd4ywd/image/upload/v1675781730/blog-images/posts/building-browser-extension/content-script-setup_terc19.png)

updated to

![image](https://res.cloudinary.com/ds9pd4ywd/image/upload/v1675781730/blog-images/posts/building-browser-extension/content-script-setup_terc19.png)

cc @wongjn

3 replies

mikker Jan 30, 2025

Insane. I would've never figured this out without this. Thanks!

wongjn Jan 30, 2025

Yea, the [https://res.clo…] is the same syntax as an arbitrary property class ([property:value]), but then when Tailwind compiles it to a CSS rule, it is probably invalid CSS and thus the error.

dimitrisnl Jan 31, 2025
Author

happy to help @mikker !

gengjiawen · 2025-02-01T07:25:43Z

gengjiawen
Feb 1, 2025

I use both tailwindcss and scss same time. Also local dev fine. prod build failed. This is my workaround

    "@tailwindcss/postcss": {
      optimize: { minify: false },
    },

1 reply

1000ship Mar 9, 2025

It works!

luudv · 2025-02-01T09:25:15Z

luudv
Feb 1, 2025

I have the same problem when running the RUN yarn build command inside the dockerfile. I don't get this error if I remove this command and run it standalone inside the container. Also, my app was working fine on Tailwindcss V3. The issue only occurred when I migrated to V4.

2 replies

tomekwlod Feb 25, 2025

I have exactly the same problem

pavsidhu Mar 12, 2025

Having the same issue, setting tailwind minify to false works but increases bundle size so isn't an ideal solution

karansethia · 2025-03-31T19:00:57Z

karansethia
Mar 31, 2025

Im facing the same issue, could you tell me a bit more about this error, for I dont have any of that cloudinary integration but I am getting images from server, and where exactly in the code did it break?

2 replies

dimitrisnl Apr 1, 2025
Author

I had the URL in the alt-text as well.

karansethia Apr 2, 2025

Thanks for the reply, I believe I didnt have any alt text with link in the Image component, I had to set minify to false for addressing this issue

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nextjs production build throwws `HookWebpackError` & `Unclosed block`. Local dev works fine #16040

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Nextjs production build throwws HookWebpackError & Unclosed block. Local dev works fine #16040

Replies: 8 comments · 9 replies

dimitrisnl Jan 30, 2025 Author

dimitrisnl Jan 30, 2025 Author

dimitrisnl Jan 30, 2025 Author

dimitrisnl Jan 30, 2025 Author

dimitrisnl Jan 30, 2025 Author

dimitrisnl Jan 31, 2025 Author

dimitrisnl Apr 1, 2025 Author

Nextjs production build throwws `HookWebpackError` & `Unclosed block`. Local dev works fine #16040

Replies: 8 comments 9 replies

dimitrisnl Jan 30, 2025
Author

dimitrisnl
Jan 30, 2025
Author

dimitrisnl
Jan 30, 2025
Author

dimitrisnl
Jan 30, 2025
Author

dimitrisnl
Jan 30, 2025
Author

dimitrisnl Jan 31, 2025
Author

dimitrisnl Apr 1, 2025
Author