Library react-photoswipe-gallery works in local dev but not in production when deployed to Netlify

Hi there,

I’ve been trying to troubleshoot this for the past 2 days and not getting anywhere so I thought I’d reach out to the community.

My netlify (NextJS) site is:

In this project I am using react-photo-swipe-gallery. This is the library I am having issues with.

When I run the site in local dev environment the gallery works fine:

However when I push it to Netlify the gallery buttons are missing (i.e. the previous image, next image and close icons).

If I inspect where the buttons should be I can see that the SVGs are getting malformed / non-existent:



When I debug the issue I can see it’s as if different code is being compiled by webpack.

Locally you can see that the code that generates the buttons simply appends the trailing svg tag: :

out += svgData.inner;
out += ‘’;

However when I’m in production that same code seems to not append and just overwrites (which is why the SVG element is malformed):

out = htmlData.inner + “”

Furthermore, this code looks totally different to what i have in local dev environment.

I’m so confused, it’s like two entirely different libraries are getting loaded.

Here is my package.json:

“name”: “nextjs-starter-prismic-multi-page”,
“version”: “0.0.0”,
“private”: true,
“license”: “Apache-2.0”,
“author”: “Prismic (”,
“scripts”: {
“dev”: “concurrently "npm:next:dev" "npm:slicemachine" --names "next,slicemachine" --prefix-colors blue,magenta”,
“next:dev”: “next”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”,
“slicemachine”: “start-slicemachine”,
“format”: “prettier --write .”
“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”,
“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”
“devDependencies”: {
@prismicio/types”: “^0.2.4”,
@tailwindcss/aspect-ratio”: “^0.4.2”,
“autoprefixer”: “^10.4.13”,
“concurrently”: “^7.5.0”,
“eslint”: “^8.27.0”,
“eslint-config-next”: “^13.0.3”,
“node-fetch”: “^3.3.0”,
“postcss”: “^8.4.19”,
“prettier”: “^2.7.1”,
“prettier-plugin-tailwindcss”: “^0.1.13”,
“slice-machine-ui”: “^0.5.2”,
“tailwindcss”: “^3.2.4”

I’ve made sure that Nelify is using the same version of Node and NPM as I do locally using environment variables and I have confirmed I did this correctly in the build logs.

Any help greatly appreciated, my hair is going grey just trying to figure this out.

Regards, John.

Anyone? I’m pulling my hair out here! :slight_smile:

FYI if anyone is interested I fixed this by upgrading from NextJS 13.0.3 to 13.1.0.

Must have been some kind of weirdness with the NextJS build process.