CSS, Javascript, Images cause 500 errors after IIS Website upgrade

How to handle pages not rendering correctly after an Internet Information Services upgrade.

Symptoms

A website has been copied from a server running IIS 6 (Windows Server 2008) to a server running IIS 10 (Windows Server 2019). Pages do not render correctly, and further investigation shows that pictures, css files, and javascript are all failing with 500 (Internal Server Error) responses. This is shown here in the F12 view in Chrome.

Trying to access one of these static files directly also fails and just shows the message “The page cannot be displayed because an internal server error has occurred.

Cause

In my case, the site was referencing the FontAwesome package which uses the WOFF file type. In the older IIS this MIME type was not registered so required a manual entry in the configuration. In the newer IIS this is handled natively and the manual configuration is now causing a problem rather than remediating one.

Solution

Check the web.config file for a reference to woff for example

1<mimeMap fileExtension=".woff" mimetype="application/font-woff" />

and comment out or remove this line.

Refresh the page in your browser and it should now load correctly.