[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item

[Mithrandiirr]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I get this error whilst compiling my gatsby app

[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\gatsby\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[0]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\gatsby\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\src\components\Footer\Footer.module.scss': No serializer registered for Warning
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 2 items } -
not to mention , the page loads really slow due to a file called __webpack_hmr is that file related to this error ?
also i've used document and window

Reproduction Link

https://github.com/Mithrandiirr/gatsby-ecommerce

Steps to Reproduce

1.compiling

Expected Result

[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\gatsby\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[0]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\gatsby\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\src\components\Footer\Footer.module.scss': No serializer registered for Warning
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 2 items } -

Actual Result

ecomm@1.0.0 develop
gatsby develop

success compile gatsby files - 15.675s
info The following flags are active:

• FAST_DEV · Enable all experiments aimed at improving develop server start time.
• PRESERVE_FILE_DOWNLOAD_CACHE · (Umbrella Issue (https://gatsby.dev/cache-clearing-feedback)) · Don't delete the downloaded
  files cache when changing gatsby-node.js & gatsby-config.js files.

There are 2 other flags available that you might be interested in:

• PARALLEL_SOURCING · EXPERIMENTAL · (Umbrella Issue (https://gatsby.dev/parallel-sourcing-feedback)) · Run all source plugins at the same time instead of serially. For sites with multiple source plugins, this can speedup sourcing and transforming
  considerably.
• DETECT_NODE_MUTATIONS · Diagnostic mode to log any attempts to mutate node directly. Helpful when debugging missing data
  problems. See https://gatsby.dev/debugging-missing-data for more details.

success load gatsby config - 0.362s
success load plugins - 3.556s
success onPreInit - 0.047s
success initialize cache - 0.137s
success copy gatsby files - 2.480s
success Compiling Gatsby Functions - 2.555s
success onPreBootstrap - 3.251s
success createSchemaCustomization - 0.358s
info Running non-priority queries
success source changed shopify products - 1.924s
success source changed shopify variants - 2.320s
success Checking for changed pages - 0.005s
success source and transform nodes - 6.198s
success building schema - 1.785s
success createPages - 0.003s
success createPagesStatefully - 0.747s
info Total nodes: 47, SitePage nodes: 8 (use --verbose for breakdown)
success Checking for changed pages - 0.003s
success write out redirect data - 0.005s
success onPostBootstrap - 0.007s
info bootstrap finished - 49.292s
success onPreExtractQueries - 0.032s
success extract queries from components - 59.367s
success write out requires - 0.102s
success run page queries - 0.247s - 1/1 4.05/s
⠇ Building development bundle
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\gatsby\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[0]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\gatsby\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\src\components\Footer\Footer.module.scss': No serializer registered for Warning
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 2 items } -
⠀
You can now view ecomm in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 109.296s
success onPreExtractQueries - 0.004s
success Writing page-data.json files to public directory - 3.230s - 1/1 0.31/s
success extract queries from components - 3.829s
success write out requires - 0.017s
success Re-building development bundle - 1.450s

Environment

{
  "name": "ecomm",
  "version": "1.0.0",
  "private": true,
  "description": "ecomm",
  "author": "Mithrandiirr",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.6.1",
    "babel-plugin-styled-components": "^2.0.7",
    "dotenv": "^16.0.0",
    "embla-carousel-autoplay": "^6.2.0",
    "embla-carousel-react": "^6.2.0",
    "firebase": "^9.6.10",
    "gatsby": "^4.11.2",
    "gatsby-plugin-image": "^2.12.1",
    "gatsby-plugin-react-helmet": "^5.11.0",
    "gatsby-plugin-react-redux": "^1.1.0",
    "gatsby-plugin-sass": "^5.11.1",
    "gatsby-plugin-sharp": "^4.12.1",
    "gatsby-plugin-styled-components": "^5.11.0",
    "gatsby-source-filesystem": "^4.12.1",
    "gatsby-source-shopify": "^7.1.1",
    "gatsby-transformer-sharp": "^4.12.1",
    "install": "^0.13.0",
    "jquery": "^3.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.8",
    "react-router-dom": "^6.3.0",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.4.1",
    "sass": "^1.50.0",
    "styled-components": "^5.3.5",
    "swiper": "^8.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.4",
    "css-loader": "^6.7.1",
    "gatsby-plugin-postcss": "^5.11.0",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.4.3",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.23",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3"
  }
}

Config Flags

FAST_DEV:true,

[gracjan-op]

Same here. I started to have this warning after when I added postcss-preset-env. Any ideas on how to resolve that?

[Runecreed]

Also encountering this - it would be good to see the warnings given by plugins in the build chain as now I'm trying to resolve some issue a plugin is warning about, but am unable to see what is going wrong.
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin' .................... No serializer registered for Warning <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

[ChinaCarlos]

how to resolve it ?

[febeling]

I had same problem, and solved it by finding the source of the warning.

Install postcss-reporter as the last postcss.config.js plugin in the chain, and you get a clear warning message naming the cause.

My ultimate problem was that the sequence of the plugins was wrong; didn't even fully realize order is significant, but on reflection obviously it is.

[insaurabh]

Hi @Mithrandiirr,

I am facing this issue as well. Did you get this fixed. I installed the postcss-reporter as suggested by @febeling, but no exact error is thrown.

Also i got the above error only when i use getServerData

[GUNGODD]

0

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.

[bdgcypher]

This worked for me. Thanks!