webpack cache PackFileCacheStrategy

[Mithrandiirr]

i get this issue when i run my app :

[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin 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[1]!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[2]!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[3]!C:\Users\foxxp\OneDrive\Bureau\projects\clones-react-ecomm\ecomm-react-main\gatsby-ecomm\ec\src\components\Footer\Footer.module.scss|0|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[1]!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[2]!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[3]!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
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 2 items } -> webpack/lib/Mod

also when the page is loading it takes too long due to __webpack_hmr

[vankop]

Could you reduce this to reproducible repo?

[alexander-akait]

No problems with webpack, you apply loaders twicy, check your configuration

[unilimpio]

hi i am having the same issue, i have traced this warning appearing after updating postCss' autoprefixer from v. 10.4.4 to V. 10.4.7. Could you describe your proposed solution a little bit further please?

[vankop]

@unilimpio please create small reproducible repo..

[unilimpio]

Hi and good day to all of you, I am having an issue on a totally working gatsby v4+tailwindcss website, currently continuously deploying with no problems on netlify . I was trying to do a routine npm outdate - npm update when this strange warning started to appear, it does not break the develop process, and the webpage loads but seems to loadsignificantly slower on all pages and sharp image jobs. :

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

i'm kind of new to node.js and react world, so i am not sure what config you mean. I am currently developping a website using gatsby v4 +tailwindcss + a bit of styled components for the navbar, this is my setup:

npmPackages: gatsby: ^4.14.1 => 4.14.1 gatsby-plugin-breadcrumb: ^12.3.1 => 12.3.1 gatsby-plugin-image: ^2.14.1 => 2.14.1 gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2 gatsby-plugin-netlify: ^4.4.0 => 4.4.0 gatsby-plugin-postcss: ^5.14.0 => 5.14.0 gatsby-plugin-purgecss: ^6.1.2 => 6.1.2 gatsby-plugin-react-helmet: ^5.14.0 => 5.14.0 gatsby-plugin-sharp: ^4.14.1 => 4.14.1 gatsby-plugin-sitemap: ^5.14.0 => 5.14.0 gatsby-plugin-styled-components: ^5.14.0 => 5.14.0 gatsby-source-filesystem: ^4.14.0 => 4.14.0 gatsby-transformer-remark: ^5.14.0 => 5.14.0 gatsby-transformer-sharp: ^4.14.0 => 4.14.0 npmGlobalPackages: gatsby-cli: 4.14.0

and this is my gatsby-config bit for the concerned part:

gatsby-plugin-postcss, { resolve: gatsby-plugin-purgecss, options: { printRejected: true, // Print removed selectors and processed file names // develop: true, // Enable while using gatsby develop tailwind: true, // Enable tailwindcss support // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders purgeCSSOptions: { // https://purgecss.com/configuration.html#options safelist: [ 'breadcrumb', 'breadcrumb__list', 'breadcrumb__list__item', 'breadcrumb__link', 'breadcrumb__separator', 'ol', ], // Don't remove this selector }, } }, I have done some research and my own testing and the problem seems to arrise when i updated autoprefixer from 10.4.4to 10.4.7, and i because of CD i will not push this tho repository and merge on main until i get this warning sorted out. any ideas on why this warning is displaying during develop? Thank you for any tips or insight MFC

[alexander-akait]

@unilimpio sounds like you have a warning in postcss, we don't serialize modules (i.e. cache them when they have warnings/errors), you need to fix a warning in your code

[vankop]

sounds like you have a warning in postcss, we don't serialize modules (i.e. cache them when they have warnings/errors), you need to fix a warning in your code

@alexander-akait we do serialization.. we should patch postcss-loader to add serialization to Warning class

[vankop]

here for Warning https://github.com/webpack-contrib/postcss-loader/blob/master/src/Warning.js and Error

[vankop]

@webpack-bot transfer webpack-contrib/postcss-loader

[alexander-akait]

@vankop we discussed with @sokra and decide do not impement serilizations in loaders for warnings and errors, there are some limitations with registration and make sense better to fix warnings/errors

[unilimpio]

@unilimpio please create small reproducible repo..

Hi @vankop , thank you for your reply,

I 've created a small repo if you would like to reproduce the warning : https://github.com/unilimpio/webpack-update-warning Here are the steps:

1. git clone
2. npm install
3. gatsby develop
4. wait for it, the development process finishes fine, but then after some 10 seconds the warning appears.

Some new information, I tried the building process and seems to work fine locally, I haven't tested on remote server but in my experience it will stop almost on any warning.

Hope this helps , Thanks in advance for checking it out

[unilimpio]

@vankop we discussed with @sokra and decide do not impement serilizations in loaders for warnings and errors, there are some limitations with registration and make sense better to fix warnings/errors

Thank you for checking this issue out @alexander-akait . Can you maybe offer some hints as to where to start fixing this warning? I checked the link provided by @vankop but honestly I don't know what to do with it.

[pjamieson]

I am having the exact same issue and would very much appreciate suggestions on how to fix the warning.

[vankop]

@alexander-akait maybe as a trade off use Error class for this?..

[alexander-akait]

@vankop I want to look at repo @unilimpio in near future, anyway if loader emits error(s), better to fix the error, I will provide more feedback after investigation in repo

[alexander-akait]

@unilimpio You have old version of mini-css-extract-plugin (based on node_modules, will be great to update to latest), also I tried to use your repo and got:

failed Building development bundle - 9.807s
ERROR in ./.cache/app.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer

[NevilDabre]

Getting similar error after upgrading Webpack version from 4 to 5 in the Next.js project.

[scerelli]

Getting similar error after upgrading Webpack version from 4 to 5 in the Next.js project.

Same

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[vankop]

bump

[Moin105]

[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\DELL\worldenterprises\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[2].oneOf[4].use[1]!C:\Users\DELL\worldenterprises\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[2].oneOf[4].use[2]!C:\Users\DELL\worldenterprises\styles\Home.module.css': No serializer registered for Warning while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\DELL\worldenterprises\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[2].oneOf[4].use[0]!C:\Users\DELL\worldenterprises\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[2].oneOf[4].use[1]!C:\Users\DELL\worldenterprises\styles\Home.module.css': No serializer registered for Warning while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

having same issue

[rodoabad]

Still happening for me as well.

Looks like there's no way to turn off this warning?

[tmb-github]

I'm getting this error:

[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Cannot find module 'mini-css-extract-plugin/dist/CssDependency'

[PengBoUESTC]

any solution?

[afonsojramos]

Still getting this error. Not really sure where it is coming from or how to fix it. These errors only show up twice on gatsby develop. Once after starting the Building development bundle, and again after Generating GraphQL and TypeScript types. Maybe I should raise this as well in https://github.com/gatsbyjs/gatsby.

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/magic-string/dist/magic-string.es.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 7 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/esm|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/@lezer/lr/dist/index.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 20 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/@mdx-js/mdx/node_modules/semver/semver.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 45 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/dynamic|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/@babel/code-frame/lib/index.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 6 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/path-browserify/index.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 2 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/@apidevtools/json-schema-ref-parser/lib/index.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 20 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js': No serializer registered for ProvidedDependency
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 73 items } -> ProvidedDependency
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/afonsoramos/Documents/newday/NewDay.Docs.DevPortal.Web/node_modules/@apidevtools/json-schema-ref-parser/lib/util/url.js': No serializer registered for ProvidedDependency

[alexander-akait]

@afonsojramos Check your webpack version, because we have serilizer for it https://github.com/webpack/webpack/blob/a3ab4e78b671348adccc771c9c20749b3d41f416/lib/dependencies/ProvidedDependency.js#L96 and yes, make sense to ask this in [gatsby](https://github.com/gatsbyjs/gatsby) repo too

[afonsojramos]

Hey @alexander-akait, I figured out the issue. In the gatsby-node.js we have this plugin. Removing this, fixes the issue, however, we do need it as one of the packages we're using requires it.

[alexander-akait]

Hey @alexander-akait, I figured out the issue. In the gatsby-node.js we have this plugin. Removing this, fixes the issue, however, we do need it as one of the packages we're using requires it.

ProvidePlugin has a cache, maybe you can create minimum reproducible repo?

[afonsojramos]

@alexander-akait we've switched to pnpm since and have not been having them anymore, so it might have been related to us using yarn v1, but with these things it is hard to tell...

[alexander-akait]

Okay, I want to close this question, anyway if anyone runs into this feel free to open an issue with a reproducible example, thanks everyone