Open daveashworth opened 2 months ago
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.
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.
- Add the
requireUserId
function toauth.server.ts
- Use the
requireUserId
function indownload-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
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.
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!
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:
web-auth
reporequireUserId
function toauth.server.ts
requireUserId
function indownload-user-data.tsx
, save, and watch the logs for the error.Original Posts:
More Details:
My temporary fix
To get around the issue for now, I changed this line in
utils/misc.tsx
:to