NextJS and Redux-thunk: Getting 'Error: Circular structure in "getInitialProps"' - reactjs

Question

I'm trying to implement a simple test case for using Redux-thunks with Next JS but keep getting the error
Error: Circular structure in "getInitialProps" result of page "/".
https://err.sh/zeit/next.js/circular-structure
I have gotten this all to work once before, and am sure I'm making some obvious error.
I'd appreciate any help you could provide. I've been poking at this for an hour and I'm not seeing where I'm going wrong...
I've traced it down to the dispatch within my thunk, that is dispatch(getItemsSuccess(data)) in the following code in action-creators.js. That is, if I remove that dispatch, I don't get the error.
// action-creators.js
import {GET_ITEMS_SUCCESS} from "./action-types"
import axios from 'axios'
export const getItemsSuccess = (data) => ({ type: GET_ITEMS_SUCCESS, data });
export const getItems = () => async (dispatch,getState) => {
try {
const data = await axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data))
} catch(e) {
console.log(`error in dispatch in action-creators: ${e}`)
}
}
My _app.js is
import React from 'react'
import {Provider} from 'react-redux'
import App, {Container} from 'next/app'
import withRedux from 'next-redux-wrapper'
import configureStore from '../redux/configure-store'
class MyApp extends App {
static async getInitialProps({Component, ctx}) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return {pageProps}
}
render() {
const {Component, pageProps, store} = this.props
return (
<Container>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</Container>
)
}
}
export default withRedux(configureStore, { debug: true })(MyApp);
and my index.js is
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {getItems} from "../redux/action-creators"
class Index extends Component {
static async getInitialProps({store}) {
try {
await store.dispatch(getItems())
} catch(e) {
console.log(`error in dispatch in index.js: ${e.message}`)
}
}
render() {
return <div>Sample App</div>
}
}
export default connect(state => state)(Index)
and finally I configure the store thus
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './root-reducer';
const bindMiddleware = middleware => {
if (process.env.NODE_ENV !== 'production') {
const { composeWithDevTools } = require('redux-devtools-extension');
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
function configureStore(initialState = {}) {
const store = createStore(
rootReducer,
initialState,
bindMiddleware([thunk]),
);
return store;
}
export default configureStore;
Again, any help much appreciated -- I have been going over this for some time and am not seeing the missing piece...

Answer 1

When you return data from axios, one has to access the data within the data, to wit, instead of
const data = await
axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data))
I should have written
axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data.data))

Answer 2

Why This Error Occurred
getInitialProps is serialised to JSON using JSON.stringify and sent to the client side for hydrating the page.
However, the result returned from getInitialProps can't be serialised when it has a circular structure.
Possible Ways to Fix It
Circular structures are not supported, so the way to fix this error is removing the circular structure from the object that is returned from getInitialProps. In your case you just need to extract appropriate data like #Cerulean explained.