ReferenceError using with Nextjs

[davlet61]

So, I was not sure if this was an issue or I was doing something wrong so I am posting it here.

I have have implemented a whiteboard to my nexjs app using @tldraw/tldaw. It was working okay (with peer-dep warnings though) with v1.20. Since the update (tried every version after 1.20) I am getting ReferenceError: window is not defined:

error - ReferenceError: window is not defined
    at Object.<anonymous> (/Users/dy/Desktop/PROJECTS/retro-1984/node_modules/@tldraw/tldraw/dist/index.js:76:31053)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    .....

I checked the referenced module and it's line with window.matchMedia? ....

I forked the project, couldn't find that reference to matchMedia anywhere. Tried to build as well nothing there either.

So I was wondering if anyone else have encountered this?

[davlet61]

Quick Update:

I was able to fix the issue by dynamically importing the component which renders Tldraw.

[judicaelandria]

yes, sorry for the late reply, i always forget to check the discussions tab

[spencerchang]

@davlet61 Hi~ i have same question about next.js with this issue.
Could you tell me how to use dynamically importing the component to solve this issue?

Thank you.

[davlet61]

With @tldraw/tldraw v1.24, next v12.2.5 my solution was as follows:

• Export Tldraw component

 /// ....
 
 const Drawboard = () => {

/// ....
 return (
    <styles.Drawboard>
      <Tldraw
        darkMode={isDarkTheme}
        showMultiplayerMenu={false}
        disableAssets
        onMount={onMount}
        readOnly={readOnly}
        showMenu={false}
        showPages={false}
        {...events}
      />
    </styles.Drawboard>
  );
};

export default Drawboard;

• And then dynamically import it into the relevant page/component

/// ...

import dynamic from 'next/dynamic';
import Spinner from '@components/Spinner';

const Drawboard = dynamic(() => import('@modules/Sessions/Drawboard'), {
  loading: () => <Spinner />,
});

[spencerchang]

Seems not work to me. My version is "next": "^12.3.1", "@tldraw/tldraw": "^1.26.0"
Still with same issue. Maybe downgrade version is the only way.

[judicaelandria]

you need to add ssr: false to the option