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 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.