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 webpack@5.83.1.

[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]

@maaft It should work without, can you create reproducible test repo?

[bburns]

@maaft thanks, this fixed it for me also -

yarn add semantic-ui-react@latest semantic-ui-css@latest

[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!

[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?