fix: skip displaying packages with undefined dist tags in org route

[jonathanyeong]

Why

In production, we get a JS error when accessing this url https://npmx.dev/@react-bot. This is due to a package not having dist-tags: react-server-dom-vite.

Interestingly, https://www.npmjs.com/~react-bot?activeTab=packages shows that there are 21 packages but doing a manual count of the package list only shows 20. So I guess their UI is also incorrect.

What changed

• Filter out any package that has undefined dist-tags

Testing

I manually tested going to http://localhost:3000/@react-bot.

The page now shows a package list.

[vercel]

@jonathanyeong is attempting to deploy a commit to the danielroe Team on Vercel.

A member of the Team first needs to authorize it.

[jonathanyeong]

This issue is related to #94. But it doesn't implement a graceful 404 page @serhalp am I missing something?

[MatteoGabriele]

I was having a look at this issue as well, and while making sure dist-tags is defined fixes the error, in the case of "react-bot" as an organization, which doesn't exist, it seems to start fetching packages for "react-bot" the user.

[jonathanyeong]

@MatteoGabriele I was trying to dig into this as well. Looking at npm the org does exist https://www.npmjs.com/~react-bot

Or am I missing something?

[43081j]

@jonathanyeong FYI here's how i would fix it longer term:

main...optional-dist-tags

i think it'd be better to do it like this at the root rather than at the callsite

in future we should probably detect these as unpublished (i.e. npm removed them or the user did)

[MatteoGabriele]

@jonathanyeong I'm not 100% sure because the UI doesn't give many hints, but usually when a package is from an organization, such as react-bot, it shows as @react-bot/react-dom, for example.
In this case, they show up as react-dom and are listed as a collaborator.
I could be wrong, but I thought it was worth mentioning because I have the feeling the response was somehow falling back to an existing matching user instead of an organization.

[jonathanyeong]

Oh I like your changes @43081j but what if a package is unpublished from the org. Do we really want to show it? for reference searching for react-server-dom-vite doesn't show up in npmx either

[43081j]

i think you're probably right we should still filter them out 👍

but i would still make the change to the type, so we're not blindly assuming it is always set. now and in future there may be other places we make the same incorrect assumption thanks to the types. so it'd be better to fix them up

[jonathanyeong]

Updated @43081j, thanks for the comments!

I think @MatteoGabriele your question is unresolved. But I'm not entirely sure what we'd do here 🤔. I would assume we should match npmjs as a "source of truth". But let me know if we should throw out this PR in favour of another one!

I could be wrong, but I thought it was worth mentioning because I have the feeling the response was somehow falling back to an existing matching user instead of an organization.

It looks like it's falling back to @[org].vue. Is that what you'd expect?

[MatteoGabriele]

@jonathanyeong this PR still fixes the error, so my concern can be considered out of scope.

To make another example: https://npmx.dev/@matteo_gabriele
This should return 404 since I do have an npm account as a user, but it's not an organization.
I will do some research and see if it's worth creating a separate issue.