react-photoswipe-gallery library working in NextJS dev environment but not when it's built on Netlify

Question

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:

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

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:

Gallery icons showing in dev

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

Gallery icons not showing in production

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

Local:

Inspect element of icons showing in dev

Production:

Inspect element of icons not showing in production 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 += ‘’;

Code in dev

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 + “”

Code in production

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 contact@prismic.io (https://prismic.io)”,
“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.

Answer 1

John are you still using this lib? I tried to install it in my next 14 project and I'm having a React error:

    Server Error
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules/react-photoswipe-gallery/dist/context.js (2:37)
(rsc)/./node_modules/react-photoswipe-gallery/dist/context.js
file:///home/lucassr-dev/web/portfolio-marcelle2/.next/server/vendor-chunks/react-photoswipe-gallery.js (20:1)
__webpack_require__
file:///home/lucassr-dev/web/portfolio-marcelle2/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/react-photoswipe-gallery/dist/gallery.js (19:70)
(rsc)/./node_modules/react-photoswipe-gallery/dist/gallery.js
file:///home/lucassr-dev/web/portfolio-marcelle2/.next/server/vendor-chunks/react-photoswipe-gallery.js (30:1)
__webpack_require__
file:///home/lucassr-dev/web/portfolio-marcelle2/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/react-photoswipe-gallery/dist/index.js (7:69)
(rsc)/./node_modules/react-photoswipe-gallery/dist/index.js
file:///home/lucassr-dev/web/portfolio-marcelle2/.next/server/vendor-chunks/react-photoswipe-gallery.js (150:1)
__webpack_require__
file:///home/lucassr-dev/web/portfolio-marcelle2/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./app/projetos/[id]/page.jsx (13:82)

Answer 2

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.

Any idea how I can get back 4 days of my life?