TypeError on latest Next.js

[sherrellbc]

Next.js 13.5.3
React 18.2.0
react-infinite-scroll-component 6.1.0
node 20.7.0 (also tried 18.8.0 and 16.19.1)
TypeScript compiler 5.2.2

I was attempting to integrate the InfiniteScroll element into a simple React/Next.js project and found strange behavior even in the simplest case. Here I am attempting to feed the component a fixed list of simple post data in the index route app/page.tsx of a new Next.js project (using the app router):

interface PostInfo {
  title: string;
  id: string;
}

const posts: PostInfo[] = [
  {
    id: '0',
    title: 'title0',
  },
  {
    id: '1',
    title: 'title1',
  },
  {
    id: '2',
    title: 'title2',
  },
]

export default function Page() {
  return (
    <InfiniteScroll
      hasMore={false}
      next={() => { }}
      dataLength={posts.length}
      loader={<div>Loading...</div>}
    >
      {posts.map((post, idx) => (
        <div>{post.title}</div>
      ))}
    </InfiniteScroll>
  )
}

Then, when running node run dev the build fails somewhat cryptically:

 ⨯ node_modules/react-infinite-scroll-component/dist/index.js (28:11) @ extendStatics
 ⨯ TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:28:12)
    at __extends (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:31:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:169:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:399:2)
    at (rsc)/./node_modules/react-infinite-scroll-component/dist/index.js (/home/user/test/.next/server/vendor-chunks/react-infinite-scroll-component.js:20:1)
    at __webpack_require__ (/home/user/test/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:8:89)
    at (rsc)/./app/page.tsx (/home/user/test/.next/server/app/page.js:173:1)
    at Function.__webpack_require__ (/home/user/test/.next/server/webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async eh (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:152341)
    at async eU (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:156455)
    at async eB (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:156930)
    at async eB (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:157061)
    at async eH (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:160470)
    at async /home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:160942 {
  digest: '1126228784',
  page: '/'
}
null

Am I doing something blatantly wrong here or is the component just incompatible with the latest Next.js? I could not find any authoritative answer on compatibility.

[sherrellbc]

I suppose I am not surprised since the project has not updated in over two years. I had not noticed before making this issue.

[NafiurSiddiqui]

Next.js 13.5.3 React 18.2.0 react-infinite-scroll-component 6.1.0

I was attempting to integrate the InfiniteScroll element into a simple React/Next.js project and found strange behavior even in the simplest case. Here I am attempting to feed the component a fixed list of simple post data in the index route app/page.tsx of a new Next.js project (using the app router):

interface PostInfo {
  title: string;
  id: string;
}

const posts: PostInfo[] = [
  {
    id: '0',
    title: 'title0',
  },
  {
    id: '1',
    title: 'title1',
  },
  {
    id: '2',
    title: 'title2',
  },
]

export default function Page() {
  return (
    <InfiniteScroll
      hasMore={false}
      next={() => { }}
      dataLength={posts.length}
      loader={<div>Loading...</div>}
    >
      {posts.map((post, idx) => (
        <div>{post.title}</div>
      ))}
    </InfiniteScroll>
  )
}

Then, when running node run dev the build fails somewhat cryptically:

 ⨯ node_modules/react-infinite-scroll-component/dist/index.js (28:11) @ extendStatics
 ⨯ TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:28:12)
    at __extends (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:31:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:169:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-infinite-scroll-component/dist/index.js:399:2)
    at (rsc)/./node_modules/react-infinite-scroll-component/dist/index.js (/home/user/test/.next/server/vendor-chunks/react-infinite-scroll-component.js:20:1)
    at __webpack_require__ (/home/user/test/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:8:89)
    at (rsc)/./app/page.tsx (/home/user/test/.next/server/app/page.js:173:1)
    at Function.__webpack_require__ (/home/user/test/.next/server/webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async eh (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:152341)
    at async eU (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:156455)
    at async eB (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:156930)
    at async eB (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:157061)
    at async eH (/home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:160470)
    at async /home/user/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:160942 {
  digest: '1126228784',
  page: '/'
}
null

Am I doing something blatantly wrong here or is the component just incompatible with the latest Next.js? I could not find any authoritative answer on compatibility.

I have no issue integrating the component in my nextJS project w/ TS and WP backend. I just finished implementing the scroll and came here to check for any issues again.

[sherrellbc]

Hm, all I did was create new app, install the component, add this to my app/page.tsx, then attempt a build.

$ npx create-next-app@latest
$ npm i react-infinite-scroll-component
$ <edit app/page.tsx>
$ npm run dev

Are you using the latest Next + app router? Versions are posted at the top of the original post. (Also using node 20.7.0)
I just tried with LTS node 18.18.0 and still hit the same issue. TypeScript compiler version 5.2.2.

Here is the complete zip after doing the above. I tried again just now and reproduced the error.

What versions of the different components are you using?

[jc3lee]

Not sure if u are stil here but I replicated the error by copying and pasting your code on my next project. Then I compared with my own implementation. Adding "use client" at the top seems to fix it.