Tailwind CSS v3: HookWebpackError: Missed semicolon #6336

theoludwig · 2021-12-10T07:46:06Z

What version of Tailwind CSS are you using?

Tailwind CSS v3.0.0

What build tool (or framework if it abstracts the build tool) are you using?

Next.js v12.0.7, autoprefixer v10.4.0, postcss v8.4.4

What version of Node.js are you using?

Node.js v 16.13.1

What browser are you using?

N/A

What operating system are you using?

GNU/Linux Ubuntu 21.10

Describe your issue

When doing npm run build to build my Next.js application, I've got a webpack error, saying :

HookWebpackError: /home/divlo/Documents/Divlo/static/css/c28bcdcab3eb5a01.css:747:56: Missed semicolon
    at makeWebpackError (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/webpack/bundle5.js:47168:9)
    at /home/divlo/Documents/Divlo/node_modules/next/dist/compiled/webpack/bundle5.js:31056:12
    at eval (eval at create (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/webpack/bundle5.js:141512:10), <anonymous>:48:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: /home/divlo/Documents/Divlo/static/css/c28bcdcab3eb5a01.css:747:56: Missed semicolon
    at Input.error (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/input.js:123:16)
    at ScssParser.checkMissedSemicolon (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:555:22)
    at ScssParser.decl (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:253:12)
    at ScssParser.other (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:115:18)
    at ScssParser.parse (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
    at scssParse (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:335)
    at new LazyResult (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/lazy-result.js:122:16)
    at Processor.process (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (/home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
    at /home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /home/divlo/Documents/Divlo/static/css/c28bcdcab3eb5a01.css:747:56: Missed semicolon
    at Input.error (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/input.js:123:16)
    at ScssParser.checkMissedSemicolon (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:555:22)
    at ScssParser.decl (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:253:12)
    at ScssParser.other (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:115:18)
    at ScssParser.parse (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
    at scssParse (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:335)
    at new LazyResult (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/lazy-result.js:122:16)
    at Processor.process (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (/home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
    at /home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55

It seems like the generated CSS file from Tailwind is broken.

See the CI run (and source code): https://github.com/Divlo/Divlo/runs/4480558963

The text was updated successfully, but these errors were encountered:

theoludwig · 2021-12-10T07:46:44Z

Similar issue, closed without further information: #6323

JoseGarciaM · 2021-12-10T14:42:56Z

having same issue

thecrypticace · 2021-12-10T16:40:48Z

~~@divlo Can you provide a minimal reproduction of this issue?~~

I found the issue and merged a fix for the typography plugin which should go out whenever the next release is tagged.

drooJohnson · 2021-12-10T20:09:25Z

I've run into this problem as well, it seems to be triggered by this line here

tailwindcss/src/util/isValidArbitraryValue.js

Line 15 in 429fe07

// E.g.: w-[this-is]w-[weird-and-invalid]

This error message is what leads me to that specific line:

ModuleBuildError: Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
SassError: expected ";".
    ╷
757 │   width: this-is\\]w-\\[weird-but-valid;
    │                   ^
    ╵

PostCSS seems to have a lot of trouble with some characters appearing in css files. It has also given me trouble with quotes and apostrophes in my comments, assuming that they are opening a string. Not sure how to remedy either issue.

thecrypticace · 2021-12-10T20:19:38Z

@drooJohnson In your case I believe it's sass-related. ~~It also appears to be incorrectly double escaped.~~ Would you mind providing a reproduction repo of what you're seeing/using? It seems like it's reading from tailwind's sources in your project which seems quite strange (is node_modules in your content config?)

drooJohnson · 2021-12-10T20:39:19Z

@thecrypticace Ah! Thank you, I probably should've guessed that content strings of ../**/src/**/*.js would pick up way too many files. That fixed it.

theoludwig · 2021-12-10T21:24:57Z

~~@divlo Can you provide a minimal reproduction of this issue?~~

I found the issue and merged a fix for the typography plugin which should go out whenever the next release is tagged.

Indeed that was the issue! Thanks for your investigation.

I changed fontFamily: ['Montserrat', 'Arial', 'sans-serif'], to fontFamily: "'Montserrat', 'Arial', 'sans-serif'", and it now works again. 😄

Closing, as it is now resolved, and is more of an issue with @tailwindcss/typography plugin.

ref: tailwindlabs/tailwindcss#6336

roelvan · 2021-12-21T10:22:12Z

I had some custom font sizes enabled like this:

fontSize: {
        xl: ['1.25rem', '1.666'],
        '2xl': ['1.5rem', '1.375'],
        '3xl': ['1.875rem', '1.375'],
        '4xl': ['2.25rem', '1.375'],
 }

Then in my typography settings I tried to do this:

'h1, h2': {
     fontSize: theme('fontSize.2xl'), // OOPS I am taking both font size and line height here, an array
},

Causing the "Missed semicolon error". Because it is trying to get an array instead of a single item.
This fixed it for me:

'h1, h2': {
     fontSize: theme('fontSize.2xl')[0], // ONLY take the font size property and not both size and line height
},

rvlewerissa · 2022-01-04T16:43:40Z

~~@divlo Can you provide a minimal reproduction of this issue?~~
I found the issue and merged a fix for the typography plugin which should go out whenever the next release is tagged.

Indeed that was the issue! Thanks for your investigation.

I changed fontFamily: ['Montserrat', 'Arial', 'sans-serif'], to fontFamily: "'Montserrat', 'Arial', 'sans-serif'", and it now works again. 😄

Closing, as it is now resolved, and is more of an issue with @tailwindcss/typography plugin.

This fixed my issue as well! Awesome 🤘

CaliforniaLuv · 2023-08-21T05:51:24Z

~~@divlo Can you provide a minimal reproduction of this issue?~~
I found the issue and merged a fix for the typography plugin which should go out whenever the next release is tagged.

Indeed that was the issue! Thanks for your investigation.

I changed fontFamily: ['Montserrat', 'Arial', 'sans-serif'], to fontFamily: "'Montserrat', 'Arial', 'sans-serif'", and it now works again. 😄

Closing, as it is now resolved, and is more of an issue with @tailwindcss/typography plugin.

If a typo occurs, the same error will appear from tailwind.config.js.

Users encountering this error are advised to check for typos.

My error code

 theme: {
    extend: {
      keyframes: {
        slideright: {
          "0%": { transform: "translateX(0)" },

          "100%": { transform: "translateX(15px)" },
        },
        sliderbottom: {
          "0%": {
            opacity: 0,
            transform: "translateZ(-1400px) translateY(300px)",
          },

          "100%": {
            opacity: 1,
           ⛔️ typo error => transform :  ⛔️
            transform: "transform : translateZ(0) translateY(0)",
          },
        },
      },
      
      -----

hasibimamhridoy · 2024-02-13T13:20:50Z

Hello!

How did you solve your issue? @theoludwig
I have a similar issue: HookWebpackError: Missed semicolon .

thecrypticace mentioned this issue Dec 10, 2021

Don't generate invalid CSS when given an array of property values tailwindlabs/tailwindcss-typography#224

Merged

theoludwig closed this as completed Dec 10, 2021

theoludwig added a commit to theoludwig/theoludwig that referenced this issue Dec 10, 2021

fix: build HookWebpackError - Tailwind CSS config

a32f7fa

ref: tailwindlabs/tailwindcss#6336

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind CSS v3: HookWebpackError: Missed semicolon #6336

Tailwind CSS v3: HookWebpackError: Missed semicolon #6336

theoludwig commented Dec 10, 2021

theoludwig commented Dec 10, 2021

JoseGarciaM commented Dec 10, 2021

thecrypticace commented Dec 10, 2021 •

edited

Loading

drooJohnson commented Dec 10, 2021

thecrypticace commented Dec 10, 2021 •

edited

Loading

drooJohnson commented Dec 10, 2021

theoludwig commented Dec 10, 2021

roelvan commented Dec 21, 2021

rvlewerissa commented Jan 4, 2022

CaliforniaLuv commented Aug 21, 2023

hasibimamhridoy commented Feb 13, 2024

Tailwind CSS v3: HookWebpackError: Missed semicolon #6336

Tailwind CSS v3: HookWebpackError: Missed semicolon #6336

Comments

theoludwig commented Dec 10, 2021

theoludwig commented Dec 10, 2021

JoseGarciaM commented Dec 10, 2021

thecrypticace commented Dec 10, 2021 • edited Loading

drooJohnson commented Dec 10, 2021

thecrypticace commented Dec 10, 2021 • edited Loading

drooJohnson commented Dec 10, 2021

theoludwig commented Dec 10, 2021

roelvan commented Dec 21, 2021

rvlewerissa commented Jan 4, 2022

CaliforniaLuv commented Aug 21, 2023

hasibimamhridoy commented Feb 13, 2024

thecrypticace commented Dec 10, 2021 •

edited

Loading

thecrypticace commented Dec 10, 2021 •

edited

Loading