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:
Local:
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 += ‘’;
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 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.
Regards, John.
