Repository: next.js
Issue: SVG error generating .next/static/media folder v11.1.3 vs v12
Labels: bug,Webpack

### Run `next info` (available from version 12.0.8 and up)

_No response_

### What version of Next.js are you using?

v12.0.7

### What version of Node.js are you using?

v16.13.2

### What browser are you using?

Chrome, IE, Edge

### What operating system are you using?

Windows 10

### How are you deploying your application?

localhost, 'yarn && yarn dev'

### Describe the Bug

Hi, I'm considerably new to this so maybe I'll need some help to provide all necessary info, but I'll try my best.
I joined a new project which I can't share code, but it was working perfectly for other teammembers on Linux / Mac. I think it might be related to Windows as I tried and the error still happens in different browsers as Edge, Internet Explorer and Chrome, and until now I'm the only windows user I'm aware of in the project.

When I use v12 or above, my 'yarn && yarn dev' returns success for compilation, but once I open the browser it just loads forever. Whenever I refresh the page it complains about not being able to find '\.next\static\media\svg+xml,<.ecc90d41''.
So that's not an config error otherwise other teammembers should have the same issue, I could try and create such file, but windows don't like < character on filenames, this can't be the root cause, or can it?
But, back to the browser. If I refresh the webpage then it prints 'Internal Server Error' on the screen and media folder gets created, but with no files inside (I can't stop thinking about < character now...)

So I rolled back to v11.0.0 and it works. Went upwards as much as I could in v11 and ended up on v11.1.3 which also works, so there is some change in between v11.1.3 and v12 that created all of this for me, but not for all other teammembers. 

In v11.1.3 the project runs locally and still there isn't an media folder inside .next/static/ therefore there is no file with < character in the name that I can find, and there is a webpack folder now, but nothing inside resembles an svg or the missing media folder, so I think it's because it doesn't uses webpack5 yet?

I've tried the same node version as some of the teammembers where the project works as expected, but it still returns the same error for me.

### Expected Behavior

type yarn then yarn dev at the console and runs the project locally.
Expected to have a folder called media with a file named svg+xml,<.ecc90d41 inside it before running the project, but the folder is only created when I refresh the webpage, as initially it just keep loading forever, but the folder is then created empty
![Screen Shot 2022-01-26 at 20 05 13](https://user-images.githubusercontent.com/43976069/151179333-fcbea8db-490d-49a1-b6a7-747f46e8cb33.png)
.

### To Reproduce

Only me who is a windows user at the project get this error, I received a screenshot with the same filename from a linux user, then I tried to manually create it even tho .next would be recreated at every script I run, but < is no valid filename character in Windows, I tried to create the file both on VSCode and in File Explorer, which I seriously believe to be the issue now after describing the problem.. I can run the project in next@v11.1.3 without any issue and this version doesn't create a media folder inside .next/static, therefore there is no filename using < as a character
![image](https://user-images.githubusercontent.com/43976069/151178929-d80d320b-7a3d-487f-a5af-61a68ff60936.png)
.