reactjsreduxnext.jsnext-redux-wrapper

next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps


I'm getting TypeError: nextCallback is not a function error when I try to export wrapper.getServerSideProps function.

My Code

import App from '../components/App'
import {wrapper} from '../redux/Store';
import {getRooms} from '../redux/actions/RoomAction'

export default function Index() {
  return (
    <App />
  )
}

export const getServerSideProps = wrapper.getServerSideProps(async ({req, store}) => {
     await store.dispatch(getRooms(req))
})

I'm getting the error when I export getServerSideProps.

Output

Zia-Sultan:bookit Raymond$ npm run dev

> bookit@0.1.0 dev /Users/Raymond Tucker/projects/next/BOOKIT/bookit
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
TypeError: nextCallback is not a function
    at /Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:146:46
    at step (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:57:23)
    at Object.next (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:38:53)
    at /Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:32:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:28:12)
    at makeProps (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:135:16)
    at /Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:186:46
    at step (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:57:23)
    at Object.next (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:38:53)
Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`?
    at link
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:252:5)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:241:29)
    at MyDocument (webpack-internal:///./pages/_document.js:17:1)
(node:5114) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'dispatch' of undefined
    at eval (webpack-internal:///./pages/index.js:27:15)
    at /Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:143:52
    at step (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:57:23)
    at Object.next (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:38:53)
    at /Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:32:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:28:12)
    at makeProps (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:135:16)
    at /Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:186:46
    at step (/Users/Raymond Tucker/projects/next/BOOKIT/bookit/node_modules/next-redux-wrapper/lib/index.js:57:23)
(node:5114) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:5114) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Solution

  • The signature for the function passed to wrapper.getServerSideProps has changed in next-redux-wrapper v7.x.

    Replace the following.

    export const getServerSideProps = wrapper.getServerSideProps(async ({req, store}) => {
         // Code here
    })
    

    With the right signature.

    export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => {
         // Code here
    })