Unknown file extension ".png" for ".../user.png"

[daveashworth]

Using node version 20.12.2, npm v10.5.0.

I'm going through the web-auth module and in the "Require Authenticated" exercises, after making the required changes, the playground/problem app dies with the error in the title of the issue. I have deleted the repo, pulled all code down again, and the same thing happens.

This seems to happen in multiple of the modules (at least Require Authenticated, Email, and Reset Password. There may be more, but I wasn't keeping track of all of them).

I'm going to link to a Discord conversation for the rest of the details, but in short, to reproduce:

• Clone a fresh web-auth repo
• In the "Protecting Routes" module, exercise 2, "Require Authenticated", start the playground/problem app
• Add the requireUserId function to auth.server.ts
• Use the requireUserId function in download-user-data.tsx, save, and watch the logs for the error.

Original Posts:

https://discord.com/channels/715220730605731931/1249765800391348266/1249765800391348266

More Details:

https://discord.com/channels/715220730605731931/1249765800391348266/1250473857241059410

My temporary fix

To get around the issue for now, I changed this line in utils/misc.tsx:

import userFallback from '#app/assets/user.png'

to

const userFallback = '/assets/user.png'