Fix Macy.js error in Nuxt 3 with SSR

I was trying to setup Macy.js when creating https://img-grid-generator.com/. It’s an amazing lightweight library that lets you create awesome grids. I haven’t used it before in a project with SSR, and I faced the following issue.

What was the error ?

With ssr : false in nuxt.config.js, it was working, but without, it didn’t. When Server-side rendering was set to true, I encountered this error :

ReferenceError: Element is not defined

It was caused by a dependency named editorjs.

I first tried to use Nuxt built-in <ClientOnly> component, but didn’t work too. It was an issue in the import. Something needed to be loaded on client-side.

The trick

The idea was to dynamically load Macy.js :

We create a Ref that will contain our library once called. We can then use it. We call it on component mount to be sure it is made client-side

Now you can use the lib as usually, but think about the fact it’s a Ref. You need to proceed with a .value :

Thank you for reading. Hope it helps.
PS : If I wrote a mistake, do not hesitate to let me know, it will be a pleasure.