Navigation arrows / close button missing

[johnnyboy1981]

Hi there,

Please bear with me this is the first issue I've ever reported on GitHub so I'm sure I'm about to do multiple things wrong here.

I'm having an issue with this library.

In my development environment it works fine. However when I push my site up to Netlify the gallery works but when I click on a photo the next / previous icons are missing and so is the close icon.

When I inspect the source of the page I can see the buttons are actually there it's just the icon images that aren't displaying. Although a element is being generated for each icon, it's not enclosed in an

You can see the problem here:

https://illustrious-creponne-98438d.netlify.app/gallery

Here's my package.json:

"dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", "@googlemaps/react-wrapper": "^1.1.35", "@next/font": "^13.0.7", "@prismicio/client": "^6.7.1", "@prismicio/helpers": "^2.3.6", "@prismicio/next": "^1.0.0", "@prismicio/react": "^2.5.0", "@prismicio/slice-simulator-react": "^0.2.2", "aos": "^2.3.4", "clsx": "^1.2.1", "formik": "^2.2.9", "next": "^13.0.3", "photoswipe": "^5.3.5", "rc-collapse": "^3.5.2", "rc-motion": "^2.6.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-photoswipe-gallery": "^2.2.3", "swiper": "^8.4.6", "yup": "^0.32.11" },

[MaximKondratev]

As i can see, you don't have <svg> tag inside <button> on your site, there is only <path>.

I debugged your site and found out that your svg is being overwritten. Take a look at out = htmlData.inner + "</svg>" on image. Before this line executed you have your svg (out value at debugger). But for some reason selected line on image overrides whole out with =.

But if we look at photoswipe source code at https://github.com/dimsemenov/PhotoSwipe/blob/2d8a9114a0f0d0552b4cc7b22739b914296bd286/src/js/ui/ui-element.js#LL71C24-L71C24 we can see it is += instead of =

I also decided to check site i'm working on and i see that it is += and it is working

I tried to find any changes in file history but += seams to be here from the start (search for ui-element.js). So i wonder maybe you use some forked Photoswipe version with a bug or something?

[johnnyboy1981]

Firstly thank you for looking at and secondly sorry for not getting back to you sooner, this project was put on hold for a few months.

Yeah I see what you mean, but I just can't figure out why I'm getting different code output when I build. The gallery runs fine in Next dev mode, but when I deploy it I get this problem.

I saw I had an old version of photoswipe installed as a dependency, so I removed that but that didn't help.

I then made sure I'm using the same version of NPM and Node in my production environment as dev.

Any other ideas?

This is my package.json file now:

"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@googlemaps/react-wrapper": "^1.1.35",
"@next/font": "^13.0.7",
"@prismicio/client": "^6.7.1",
"@prismicio/helpers": "^2.3.6",
"@prismicio/next": "^1.0.0",
"@prismicio/react": "^2.5.0",
"@prismicio/slice-simulator-react": "^0.2.2",
"aos": "^2.3.4",
"clsx": "^1.2.1",
"formik": "^2.2.9",
"next": "^13.0.3",
"rc-collapse": "^3.5.2",
"rc-motion": "^2.6.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-photoswipe-gallery": "^2.2.7",
"swiper": "^8.4.6",
"yup": "^0.32.11"

Happy to pay your for your time to help me with this as it's my final stumbling block before I can push the site live.

[johnnyboy1981]

I was finally able to fix this but upgrading from NextJS 13.0.3 -> 13.1.0.

Must have been something weird with the build process in this version of NextJS.

Thanks for all your help on this I really appreciate it.