Gatsby: Skipped not serializable cache item 'mini-css-extract-plugin

Question

I updated tailwind v2 to v3. Also using gatsby which I'm quite new. And I didn't have this two warnings when it's tailwind v2. But I get this in v3. I see some some kind of solution in webpack.config.js like updating latest autoprefixer but not in gatsby. So I'm not sure how to solve it. I would appreciate if you could give me some advice. Thank you.

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin /Users/node_modules/css-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[1]!/Users//node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!/Users/src/styles.css|0|
Compilation/modules|/Users/node_modules/css-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[1]!/Users/node_modules/postcss-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[2]!/Users/src/styles.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems ->
 webpack/lib/NormalModule -> Array { 1 items } ->

• What I use

"gatsby": "^3.13.0",
"gatsby-plugin-gatsby-cloud": "^3.2.0",
"tailwindcss": "^3.0.23"
"autoprefixer": "^10.4.4",
"postcss": "^8.4.12",

Antibaryon

I am experiencing the same issue, did you find a resolution for this? – Gloriane

For me, once I removed all other warning from gatsby, the above error simply disappeared. – Calvinna

Try to add postcss-reporter plugin to postcss.config.js, as the last plugin in the chain. That gave me a clear warning message to the console, naming the root cause. – Quicktempered

Answer 1

I had the same issue and it turned out it was because I was using the start value to align some items in flex elements.

For example, the following code caused the warning:

.column {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
}

I changed the justify-content value to flex-start and the warning disappeared.

.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}

Oestrogen

This makes me question several things I thought I knew about how all this works, but I got the same error for an align-items set to start instead of flex-start. – Quixote

I was facing the same and changing start to flex-start was the solution. Just realized that start wasn't one of the values for justify-content. In my case, I was using bootstrap with SCSS Modules – Emera

Do you know why this problem happens? – Alto

Also similarly "end" needs to be "flex-end" – Sobersided

Answer 2

This is caused by a CSS warning generated by the tailwindcss plugin, which cannot be reported correctly, because postcss-reporter isn't setup in the right way. Apparently postcss-report should be placed last in the plugin chain. I found it difficult to find documentation to do that right, too. This config is working for me:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-reporter': {
      clearReportedMessages: true,
    },
  },
};

This way the problem in the CSS is reported with colorization and formatting, instead of the warning about serialization, to the development log in the terminal.

(Gatsby 5, Postcss 8, TailwindCSS 3.3)

Quicktempered

This actually helped a lot and should be considered the right answer. – Chamfer