Debugging: How to find where mystery divs are coming from
I recently installed and then uninstalled the aria-modal-dialog npm package. Somehow my code is now generating three 0px by 0px divs and inserting them above the header, which is throwing off the layout, and I'm having a heck of a time finding where they're coming from.
GH: https://github.com/nnall/DevJobs-FEM.git
Live: https://main--dynamic-salmiakki-7aaccb.netlify.app/
GitHub
GitHub - nnall/DevJobs-FEM
Contribute to nnall/DevJobs-FEM development by creating an account on GitHub.
30 Replies
the last one contains references to the icons used for your dark mode toggle
it's probable these three?
yea they're the template-included sprites from 11ty.. when I instaleld aria-modal-dialog package , there were some 'moderate severity' errors it was having with 11ty, that I 'force' fixed,
so I'm just gonna uninstall and reinstall 11ty now i think
well it looks liek even uninstalling them, I'm still getting these "3 moderate severity venerabilities" in the terminal
welcome to npm
you'll have to evaluate each, and either mitigate them in your own code, or decide you can't use the package until the vulnerabilities are fixed
darn, it was all working before I installed that aria-modal-dialog package
the npm audit fix is pretty useless i guess?
roll back to a commit before you installed it, delete node_modules and reinstall?
it's really not, it just can't fix everything. Sometimes it'll try to find other versions that still fit your dependencies, and sometimes that works, but a lot of the time the advisories will cover a lot of older versions and there's no resolution to your dependency tree that doesn't include the vulnerability
it's a really, really strong argument to use as few packages as possible, and only use well maintained ones
right, the aria one is pretty old
ok, yea, i'll go back to a pre-install commit then
remember your node_modules isn't in your repo, so you'll have to run npm install or potentially even remove it and then run npm install
gotcha okay
could not revert?
it'll have edited index.njk to mark the conflict. manually edit it and follow the "after resolving" instructions
make sure you resolve all the marked conflicts, there might be multiple
so i used the resolve conflicts editor in vsc, went through all of the file differences and chose the version I wanted, and then after merging the changes into the one I want, VSC presented a "Commit" button in order to commit the changes directly, which I clicked, and now I'm seeing what looks to be a loading screen with a little dash that keeps flashing across the top
check the git console
Nothing changed there, still just same conflict message I got initially
oh wait scratch that, there's more I need to do
I'm still seeing this other section of package.json and package-lock.json changes, though its not giving me an the option to open the 'resolve conflicts editor'
what does
git status say?ahh
i guess that's the last step
well, the diff is probably showing you what changed since the last commit
if you just commit the changes you have now, it's probably fine?
i think so.. It looks like so much I think because uninstalled 11ty and one of its plugins
so trying to uninstall node, I've gone into my 'local' on my mac, and removed node from 'bin', 'include', and 'lib'.
but when I check node -v, i'm still getting a version. Is there somewhere else I need to delete it?
I ran the
sudo rm -rf node command when I removed themmake a new thread for that please, #os-and-tools for stuff like this. Also I have no idea about uninstalling node, I just use
nvm and let that handle it all. also do not know how to set that up properly, I just google and follow the instructionsgotcha ok
thank you too btw
Welp, just got done uninstalling and reinstalling node, npm. I Go to install my 11ty sprite dependency again, the one that kept giving me that 3 “moderate severity” errors message. And I go to install it again and again I get the same 3 moderate errors message
they're not a mistake you're making, those are security warnings because you're using a package with security issues
everything's working again, no more extra divs from the sprite inclusions..
I need to now
1. make sure my forms are aria-compliant, and
2. figure out how to go about actually using them as forms, in order to search my .json and populate my cards.
Do you know of a good tutorial or information on how to do 2?
No, sorry