TypeError: Cannot read properties of undefined (reading 'toString')

[maaft]

I transferred my code to a new fresh cra-repo with craco 7.1.

After issuing yarn start, I get below error, which seems to appear in the webpack module (not in my code).

My code worked previously without any issues with webpack 4, react-scripts 4 and craco 6.

hub/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

TypeError: Cannot read properties of undefined (reading 'toString')
    at hub/node_modules/webpack/lib/cache/PackFileCacheStrategy.js:1217:53

Any idea how I can debug this further?

[snitin315]

Hi @maaft, thanks for creating the issue.

It seems to be coming from the following line:

webpack/lib/cache/PackFileCacheStrategy.js

Line 1217 in 1f59cbe

pack.set(identifier, etag === null ? null : etag.toString(), data);

For some reason, etag is undefined in your case. However, as per the types, it can only be Etag or null. And we have proper checks to handle when it is null.

Can you share a minimal repo for us to reproduce this issue?

[alexander-akait]

Please check your plugins are compatibility with webpack 5, run npm ls webpack and check you don't have webpack@4 in deps

[jefflewis]

I updated react-scripts from 4 to 5 and saw this as well. I didn't have webpack spec'd in package.json and npm ls webpack shows it being resolved to [email protected].

[hainachen]

so how do you solve it?

[livingstonex]

@jefflewis, @alexander-akait did you later get a solution to this?

[alexander-akait]

Sorry not, without code I can't debug it and provide a solution

[maaft]

Hello everyone! I found the issue. I imported an outdated version of semantic ui css. After updating (or using the official CDN link) the issue was gone.

I wonder though if webpack could have pointed me to the source of the error instead of giving me this cryptic etag error above?

Shall I attach the css file here so you can dig deeper?

[alexander-akait]

Very strange because it should work without updating this deps

[palashkaria]

We are facing this exact same issue when upgrading to react-scripts v5, and we currently have a copy of semantic's 1.x CSS (heavily modified), so can't do the above fix (we don't have semantic-ui-css as a dep, directly import CSS from our filesystem). When I remove this semantic CSS import completely, it complies. So, we can narrow down to the problem CSS file.
I will try to create a repro repo and share soon

[palashkaria]

Update: I have narrowed it down to a huge base64 URL which is being used for a font-family src by semantic-ui's CSS:

Once I remove this, it compiles:

Since we are not using this component, I can safely remove it. Leaving this here in case it helps!

[DaljeetSingh1320]

Can we remove these also?

@font-face {
font-family: Accordion;
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("woff");
font-weight: 400;
font-style: normal
}

[palashkaria]

@DaljeetSingh1320 I faced same problem on the same stack (but different app). In this case, I had to remove a little more CSS. What you can/cannot remove totally depends on what you are using. I'd say try removing things & see if it has any impact on your app.

[4pOnk]

I had this issue when I forgot to change permissions in downloaded font (using chmod in linux) and tried to load it in CSS.

[Emircanaltay]

I am getting the same error what should I do?

[palashkaria]

I'm sure this is not the best way, but try deleting things: #17101 (reply in thread)

I came back to this after exactly one year, and the same solution worked on a different app

[alexander-akait]

Please provide reprducible test repo if you need help

[IlayBacil1999]

I encountered this error and created a minimal React app that reproduces it when running npm start. You can find the repository here. I hope I did it correctly, as this is my first time participating in a discussion.

[alexander-akait]

@IlayBacil1999 thank you, reproduced

[alexander-akait]

There is a fix - #18904, release will be soon (today/tomorrow)