Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: JSON.stringify cannot serialize cyclic structures #14

Closed
wrightmk opened this issue May 2, 2020 · 5 comments · Fixed by #19
Closed

TypeError: JSON.stringify cannot serialize cyclic structures #14

wrightmk opened this issue May 2, 2020 · 5 comments · Fixed by #19
Labels
bug Something isn't working needs more information

Comments

@wrightmk
Copy link

wrightmk commented May 2, 2020

"react-native": "0.62.0"
"redux-flipper": "^1.0.0"
"react-native-flipper": "^0.39.0"

I've downloaded and integrated the extension into my app, but it breaks on refresh. When I run my app and then open flipper, I'm able to use the redux debugger. However, once I refresh my app, I get TypeError: JSON.stringify cannot serialize cyclic structures.

@jk-gan jk-gan added bug Something isn't working needs more information labels May 2, 2020
@jk-gan
Copy link
Owner

jk-gan commented May 2, 2020

Can you provide some sample codes to reproduce?

@felippepuhle
Copy link

same here.. tried a bunch of things and it's not working

  const reducers = require('./reducers').default
  const middlewares = [thunk]

  if (__DEV__) {
    const createDebugger = require('redux-flipper').default
    middlewares.push(createDebugger())
  }

  store = createStore(
    persistReducer(
      {
        storage: AsyncStorage,
        key: 'xxx',
        whitelist: ['x', 'y'],
      },
      reducers
    ),
    initialState,
    applyMiddleware(...middlewares)
  )

@msadura
Copy link

msadura commented May 17, 2020

Same issue here. Seems like this happens when you add more than 1 middleware to applyMiddleware and because of that plugin seems to be unusable at the moment :( In my cane I am using redux-observable but I tried different middlewares and result is the same. It works only when reduxDebugger is the only middleware.

const epicMiddleware = createEpicMiddleware();
let middleware;
if (__DEV__) {
  const createDebugger = require('redux-flipper').default;

  const reduxDebugger = createDebugger();
  middleware = applyMiddleware(epicMiddleware, reduxDebugger);
} else {
  middleware = applyMiddleware(epicMiddleware);
}

export default function configureStore(initialState = defaultState): Store {
  const store = createStore(rootReducer, initialState, middleware);
  epicMiddleware.run(rootEpic);
  return store;
}

"react-native": "0.62.2"
"redux-flipper": "^1.0.0"
"react-native-flipper": "^0.42.0"

@plwai
Copy link
Collaborator

plwai commented May 17, 2020

@msadura I have tried to install redux-observable and applied the middleware. It works fine for me. Perhaps, your store data structures have cyclic reference value which causing the error. Currently, Flipper API does not support Cyclic Reference in JSON. We will roll out a patch to solve this issue soon.

@msadura
Copy link

msadura commented May 17, 2020

@plwai you are probably right. Raw redux-observable middleware without data works as expected. Thx for the update, I will observe jk-gan/flipper-plugin-redux-debugger#13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs more information
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants