Warning: Invalid hook call

[Nemanja-98]

current code in component looks like this

 <Lightbox
            open={true}
            close={() => setOpenPhotoSwipe(false)}
            slides={[{ src: "/proizvodi/"+ zoomImagePath +".jpg"}]}
             plugins={[Counter, Slideshow]}
            slideshow={{ autoplay:true, delay: 3000 }}
          />

package.json react version:
"react": "^18.2.0",
"react-dom": "^18.2.0",

error I get on page load (component render:

[igordanchenko]

Chances are you have more than one copy of React in your node_modules. What package manager and framework are you using? Please also provide your package.json or npm ls -a if you require further assistance.

[Nemanja-98]

Package manager: npm 8.5.3
No framework - React with typescript is used for development
package.json:

{
  "name": "self-service-portal",
  "version": "0.1.0",
  "homepage": "/",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@textea/json-viewer": "^2.14.0",
    "@types/http-errors": "^2.0.1",
    "antd": "^5.0.6",
    "axios": "^1.2.1",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-color": "^2.19.3",
    "react-dom": "^18.2.0",
    "react-highlight-words": "^0.18.0",
    "react-image-gallery": "^1.2.11",
    "react-lazy-load-image-component": "^1.5.6",
    "react-photoswipe": "^1.3.0",
    "react-query": "^3.39.2",
    "react-router-dom": "^6.6.0",
    "react-scripts": "5.0.1",
    "sort-by": "^1.2.0",
    "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": {
    "@types/react-color": "^3.0.6",
    "@types/react-highlight-words": "^0.16.4",
    "@types/react-image-gallery": "^1.2.0",
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/react-photoswipe": "^1.3.1",
    "file-loader": "^6.2.0",
    "sass": "^1.57.1",
    "typescript": "^4.9.4"
  }
}

[igordanchenko]

I tried kicking off CRA project with your list of dependencies, and it works fine on my side.

Can you perform the following troubleshooting steps for me, pls?

1. stop the dev server
2. run npm i yet-another-react-lightbox
3. add the lightbox code to your project
4. start the dev server (I'm assuming the error starts showing up at this step)
5. share your npm ls -a
6. run the following script and share the output:

curl -s http://localhost:3000/static/js/bundle.js | grep -c 'function useImperativeHandle'

[Nemanja-98]

Thanks for this reply, I had fixed it by removing another project from the same repo which caused this conflict. Had to install the package on a local repo instead of a global project dep.

Starred project. Thank you for all the help.