Adding Infinite Scroll to Theo's T3 Tutorial app
Hi All,
I was able to replicate Theo's T3 Tutorial app and I am now adding new features to it. I have hit a big roadblock and would appreciate any help. I am trying to enable infinite scroll on the posts ( I call them stories). Theo's implementation fetched a hardcoded 100 posts, and I'm trying to get the posts to load batch by batch as the user scrolls.
I'm getting this error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I have tried a few ideas from this page: https://github.com/facebook/react/issues/13991#issuecomment-449597362, but none of them have worked so far.
Thinking that I might be running two Reacts, I added these to my package.json file:
"peerDependencies": {
"react": "18.2.0",
"react-dom": "18.2.0"
},
"resolutions": {
"/react": "18.2.0",
"/react-dom": "18.2.0"
},
(The resolution paths start with double asterisks, but removed them as asterisks seem to be used for formatting here) I deleted the node_modules and .next folders to get fresh copies of these; These didn't work.
I also tried adding the below alias to my next.config.mjs
alias: {
react: path.resolve('./node_modules/react')
}
Still working on it, but would appreciate any new ideas. See the code in the attached image.
I was able to replicate Theo's T3 Tutorial app and I am now adding new features to it. I have hit a big roadblock and would appreciate any help. I am trying to enable infinite scroll on the posts ( I call them stories). Theo's implementation fetched a hardcoded 100 posts, and I'm trying to get the posts to load batch by batch as the user scrolls.
I'm getting this error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I have tried a few ideas from this page: https://github.com/facebook/react/issues/13991#issuecomment-449597362, but none of them have worked so far.
Thinking that I might be running two Reacts, I added these to my package.json file:
"peerDependencies": {
"react": "18.2.0",
"react-dom": "18.2.0"
},
"resolutions": {
"/react": "18.2.0",
"/react-dom": "18.2.0"
},
(The resolution paths start with double asterisks, but removed them as asterisks seem to be used for formatting here) I deleted the node_modules and .next folders to get fresh copies of these; These didn't work.
I also tried adding the below alias to my next.config.mjs
alias: {
react: path.resolve('./node_modules/react')
}
Still working on it, but would appreciate any new ideas. See the code in the attached image.
Was this page helpful?
