'use client';

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import { MonacoBinding } from 'y-monaco';
import { useEffect, useMemo, useRef } from 'react';

import dynamic from 'next/dynamic';

const Editor = dynamic(
  () => import('@monaco-editor/react').then((mod) => mod.default),
  {
    ssr: false,
  },
);

Uncaught Error: Switched to client rendering because the server rendering errored:

window is not defined
at eval (webpack-internal:///(ssr)/../../node_modules/.pnpm/monaco-editor@0.50.0/node_modules/monaco-editor/esm/vs/base/browser/window.js:19:20)
at (:4001/flow/node_modules/.pnpm/monaco-editor@0.50.0/node_modules/monaco-editor/esm/vs/base/browser/window.js (/Users/adamrogas/WorkingCode/process-co/proc-app/apps/web/.next/server/vendor-chunks/monaco-editor@0.50.0.js:730:1)


I was able to get build not to error via this incredible(sarcasm) HACK by adding this above my imports

if (typeof window === 'undefined') {
/** Why this supposedly works: https://react.dev/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content */
// TODO: This is a hack to get around the fact that the editor is a client only component.
// NEST SSR IS WAY TOO AGRRESSIVE
throw Error('Client Component should only render on the client.');
}

but I am still left with a production react error bailing out of server rendering
Uncaught Error: Minified React error #419; visit https://react.dev/errors/419 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I have also wrapped the Control in the control above it which is also marked 'use client'

<div className="h-[400px] p-2">
<NoSSR>
<CodeEditor />
</NoSSR>
</div>

this has just gotten ridiculous ... please tell me I am missing something stupid 🙂