Uncaught TypeError: Cannot read properties of null (reading 'useRef')

[Friday21]

Describe the bug

I tried to use this library in a new created react demo project, but met this error.

Expected behavior

expect to show the photo, but empty instead.

How to reproduce

1.create a project using create-app:
npx create-react-app photo-app001 --template typescript

2. Install react-photo-album npm install react-photo-album
3. modify App.tsx under src to

   
   import PhotoAlbum from "react-photo-album";

const photos = [ { src: "data:image/gif;base64,R0lGODdhAQABAJEAAAAAAB8fH////wAAACH5BAkAAAMALAAAAAABAAEAAAICTAEAOw==", width: 800, height: 600 }, ];

function App() { return ; }

export default App;

4.npm run start

### Screenshots / Logs

<img width="1124" alt="image" src="https://github.com/igordanchenko/react-photo-album/assets/10892548/33ffabeb-f53a-451b-b86a-4bb3372735b4">
<img width="328" alt="image" src="https://github.com/igordanchenko/react-photo-album/assets/10892548/896b1697-d6b6-44aa-a1b6-394d58edf946">

### Additional context

Package.json

{ "name": "photo-app001", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.96", "@types/react": "^18.2.78", "@types/react-dom": "^18.2.25", "react": "^18.2.0", "react-dom": "^18.2.0", "react-photo-album": "^2.3.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "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" ] } }

[igordanchenko]

What are your node and npm versions?

node -v
npm -v

[Friday21]

v20.12.1 and 10.5.1

[igordanchenko]

I highly suspect you installed react-photo-album dependency in a wrong folder. Please make sure you run npm install react-photo-album in your project folder, not in its parent folder D:\code.

Here are the steps to "fix" your current project:

1) Delete D:\code\photo-app001\node_modules 2) Delete D:\code\node_modules or any other node_modules folder inside of your project if present 3) Run npm install in the D:\code\photo-app001 folder 4) Run npm run start

Here are the correct steps to bootstrap a project from scratch:

npx create-react-app photo-app001 --template typescript

cd photo-app001

npm install react-photo-album

[Friday21]

thanks a lot, this fix my problem. I tried this several times, I don't remeber which time I install react-photo-album under code folder instead of photo-app001