Issue with Venobox working differently when deployed versus locally

Help
1

Hello, I have a React App where I am trying to use GitHub - nicolafranchini/VenoBox: Responsive Vanilla JS lightbox plugin, suitable for images, videos, iFrames, inline contents to allow for users to scroll through various images related to their order. I have gone through the steps to get the gallery working when I run locally, however when I deploy, the build works with no warnings, but when I visit the website and try to click on the images, it opens the image in it’s own page, rather than the gallery view behavior.

When website is deployed, venobox behavior is not respected by images that I click.

Here is the relevant code:

Imports:

import 'venobox/dist/venobox.min.css'
import * as VenoBox from "venobox"

Initializing the plugin:

new VenoBox({
    selector: '.gallery-box',
    numeration: true,
    infinigall: true,
    spinner: 'rotating-plane',
    ratio: 'full'
	});

Adding the script towards the end of my body:

   <script src="venobox/dist/venobox.min.js"></script>
</body>

Using the gallery-box designation when I create the image items:

<div class="img-top">
  <a class="gallery-box" href={url} data-gall="gallery01">
    <img src={url} alt="" />
  </a>
</div>

I don’t see any warnings/errors when inspecting the console.log, however I do notice this difference. When I run locally, the final html for an image looks like this:

<a class="gallery-box vbox-item" href="REDACTED" data-gall="gallery01"><img src="REDACTED" alt=""></a>

when I check the deployed version, it looks like this:

<a class="gallery-box" href="REDACTED" data-gall="gallery01"><img src="REDACTED" alt=""></a>

Note how the version that doesn’t work does not have this “vbox-item” added, which is not present in my code so must be added by something?

Am I missing something related to allowing JS to be run?

Thank you for any ideas or insight!

Deployment URL or Custom Domain: https://www.watchsheet.com/orderStatus/order?jobId=11019d66-5960-4479-b4b0-2a746dfa74ed
Environment (local, preview, production): all
Project Framework:
Build Settings:
  Framework Preset:
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version:
Package Manager: yarn
Relevant Packages: venobox
2

Hi,

We have responded to you via support ticket. Thanks!

1 Like
4

It looks like you are using composer and doesn’t have build or start script in your package.json which is necessary in our build steps. Since we aren’t aware if the framework support serverless architecture, I will leave this thread open so other member can provide suggestion.

5

Not sure what composer is, I do have build and start in my package.json, here it is:

{
  "name": "watchsheet-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@supabase/supabase-js": "^2.45.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "expo": "^51.0.38",
    "expo-constants": "~16.0.2",
    "expo-device": "~6.0.2",
    "expo-notifications": "~0.28.18",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.26.2",
    "react-scripts": "^5.0.1",
    "venobox": "^2.1.8",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}
6

Could you share a minimal reproducible repository that can be shared publicly as a git repository so that we can take a look?