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'

[levimk]

Hi! I'm also getting the same issue.

Node Version: v20.14.0
NPM version: 10.8.1

Error:

TypeError: Unknown file extension ".png" for /Users/levimk/code/learning/web-auth/playground/app/assets/user.png
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".png" for /Users/levimk/code/learning/web-auth/playground/app/assets/user.png

The specific file seems to be misc.tsx, in the getUserImgSrc function which is using the userFallback imported via import userFallback from '../assets/user.png'. This function is then being used in profile.index.tsx on line 84: src={getUserImgSrc(data.user.image?.id)}

@daveashworth 's solution didn't work for me:
Could not resolve "/assets/user.png

And using relative import also did not work, i.e. changing import userFallback from '#app/assets/user.png' to import userFallback from '../assets/user.png'

TypeError: Unknown file extension ".png" for /Users/levimk/code/learning/web-auth/playground/app/assets/user.png
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".png" for /Users/levimk/code/learning/web-auth/playground/app/assets/user.png

In playground/app/utils/misc.tsx, if I change getUserImgSrc to use null instead of userFallback, then the app will startup. I can then change null back to userFallback while the dev server is running. The user fallback PNG will work. However, if I stop the server and restart with userFallback, it crashes.

Given that this seems to occur at startup, is this potentially an issue with the Vite or TS configuration, @kentcdodds?

I should note that I recently ran npx update-epic-workshop twice (today and a couple of days ago). I was not having this issue in any of the web-auth lessons before I ran the update.

[levimk]

In the meantime, I'm just going to change

`return imageId ? `/resources/user-images/${imageId}` : userFallback`

to

`return imageId ? `/resources/user-images/${imageId}` : null`

It just means the user image in the top-right is a broken image icon, which isn't a big deal.

[Atakannbal]

• 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.

Check if you are importing functions into your module with .ts extension

I remember I got the same error and that fixed it for me

[payapula]

Thank you @Atakannbal

Check if you are importing functions into your module with .ts extension

This fixed it for me as well.

When I do auto import by VSCode, for some reason, it's importing .js path of the file.

After updating the import to .ts and restarting the playground app fixes this error.

I still couldn't figure out why the error we are getting is pointing to Unknown file extension ".png", and I need to check why VScode auto import is not working as expected.

[RobbertWolfs]

Thank you @Atakannbal

Check if you are importing functions into your module with .ts extension

This fixed it for me as well.

When I do auto import by VSCode, for some reason, it's importing .js path of the file.

After updating the import to .ts and restarting the playground app fixes this error.

I still couldn't figure out why the error we are getting is pointing to Unknown file extension ".png", and I need to check why VScode auto import is not working as expected.

I had the same issue and it also fixed this for me!