Cerebral Debugger in Next.js

#nextjs #cerebral #javascript #websocket

If you are getting below error:

ReferenceError: WebSocket is not defined
    at Devtools.createSocket

when trying to hook Cerebral Debugger up in Next.js try to refactor your bootstrap code from this:

const devTools =
  process.env.NODE_ENV === "production"
    ? null
    : {
        devtools: DevTools({
          host: "localhost:8585",
        }),
      };

to this:

let devTools = null;

if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
  devTools = {
    devtools: DevTools({
      host: "localhost:8585",
    }),
  };
}

Now you're be able to use Cerebral Debugger whilst still using Next.js when calling below:

export default App(({ app }) => {
  app.on("initialized", () => {
    app.getSequence("initialize")();
  });
  return {
    state,
    sequences,
    providers,
  };
}, devTools);