npm run build giving errors in React Hook Functions

Question

i am using nextjs 14

python-course/page.tsx

when i am running npm run build on my project, this page is giving error

this is my package.json

`` { "name": "frontend", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "browser": { "child process": "false" }, "dependencies": { "@clerk/nextjs": "^4.29.9", "@heroicons/react": "^1.0.6", "@stripe/stripe-js": "^3.2.0", "@tsparticles/engine": "^3.3.0", "@tsparticles/react": "^3.0.0", "@tsparticles/slim": "^3.3.0", "axios": "^1.6.7", "body-parser": "^1.20.2", "child_process": "^1.0.2", "child-process": "^1.0.2", "clerk": "^0.8.3", "clsx": "^2.1.0", "dotenv": "^16.4.5", "express": "^4.19.2", "firebase": "^10.0.0",

"react-firebase-hooks": "^5.1.1",
"framer-motion": "^11.0.12",
"isomorphic-unfetch": "^3.0.0",
"mini-svg-data-uri": "^1.4.4",
"mongodb": "^6.5.0",
"mongoose": "^8.3.0",
"next": "14.0.4",
"raw-body": "^2.5.2",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.0.1",
"react-monaco-editor": "^0.55.0",
"react-resizable": "^3.0.5",
"react-split": "^2.0.14",
"sharp": "^0.33.2",
"stripe": "^14.23.0",
"swr": "1.1.2",
"tailwind-merge": "^2.2.1",
"unfetch": "^5.0.0"

}, "devDependencies": { "@types/node": "^20", "@types/raw-body": "^2.3.0", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } }

``

i have never faced this type of error before and cannot get any solution from the internet

To tell what is a component, the lint rule uses the naming convention that components start with uppercase. So change const page to const Page. — Nicholas Tower
– Nicholas Tower, Commented Apr 10, 2024 at 17:23

Rony Sarker · Accepted Answer · 2024-04-10 17:23:08Z

0

Put your 'page function name first character in capital letter like this 'Page'.

React components name must start with First letter capital.

Now your problem fixed😊

Tips: you should use handleScroll function outside of useEffect and pass it inside [].

answered Apr 10, 2024 at 17:23

Rony Sarker

161 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Nicholas Tower Over a year ago

you should use handleScroll function outside of useEffect and pass it inside []. Why's that? Looks to me like that will just cause it to unsubscribe/resubscribe on each render. It's not harmful, but it's also not necessary or desired.

Rony Sarker Over a year ago

It's not necessary. But in case if you want to use it outside useEffect you will get error of undefined. It's fine unless you call that function outside useEffect..

Collectives™ on Stack Overflow

npm run build giving errors in React Hook Functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related