ChunkLoaderError issue with Nuxt.js in Safari

3 min. read


Production surprise in Safari

After a few months of hard work, I released a production version of the application build with nuxt.js in SPA mode. With the team, we tested various scenarios, observed and immediately fixed minor bugs, and started to open the champagne after great success. Then the call came:

“Application doesn’t work on iPhone!”

angry product owner

 

ChunkLoadError: Loading chunk failed

The error appeared only in Safari browser and on specific pages. Fortunately, I was prepared to debug Safari behavior in Windows1, but console output surprised me:

Console output: ChunkLoadError

SyntaxError: Invalid regular expression: invalid group specifier name
ChunkLoadError: Loading chunk 6 failed

You don’t see these messages so often…

We had a very few candidates:

  • The issue with production webpack build
  • Problem with third-party plugins

But the internet didn’t help us very well with the analysis of the output messages. I didn’t have much clue and the team was afraid of reverting production changes back. Time was ticking.

 

Invalid regular expression: invalid group specifier name

Sometimes it’s just good to understand what’s going on and stop panicking! I closed all the opened tabs, turned on focused, mode and took a look on first message with Invalid regular expression. Why do we get it?

According to this stackoverflow answer2 Invalid group specifier name is thrown if Look behind expression is applied to regexp pattern. But I didn’t find any copy-paste references of it in the source code, so I needed to understand what the look behind really is3. The view of caniuse made me confident, we found the right root cause.

 

Solution

  • I opened the .js file that cannot be loaded to Safari browser because of ChunkLoadError error.
  • Search for regexp expression Look behind “?<=”
  • Found it and I immediately recognized the source code part

We used var mediaRegexp = /(?<=oembed url\=\")(.*?)(?=\")/g regexp pattern to filter oembed elements from the API response to create gallery of youtube videos. After removing the lookbehind part, the issue was gone. We had this part of the code in the application for quite time (several months), but it wasn’t shown because we used SSR nuxt.js mode until recently. We didn’t trigger this error during the testing by accident, because not all the pages have a video gallery.

 

Mental framework to investigate similar issues

In the end, the issue was like many others. The most important thing I got from the solution, is a thinking pattern:

  • Calm down.
  • The output tells you something, what is it?
  • Do you really understand the meaning of errors?
  • Can you distinguish in what part of the application the problem occurs?
  • Can you find and understand the root cause?
  • Solve it.

 

Docs to read and tools to use:

  1. Are you Windows user? Safari debugging guide on Windows platform
  2. Stackoverflow answer invalid group specifier name
  3. Regular expressions explained - Lookbehind & lookaround
19. December 2021
Posted in Nuxt
Tomas
Tomas

Software developer, lives in Zilina, Slovakia. Fan of modern web technologies, digitalization, cloud and education. Also co-owner of a small coffee shop - Il Doppio coffee