window is not defined

[xmkan]

Hi,

I am trying to integrate this module into my NextJs web application but I am facing this error message "window is not defined" while trying to import the module. Is there any solution for this?

Below is my code:
import { Annotorious } from "@recogito/annotorious";

Below is the error message:
`Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22@recogito\annotorious%22 (1:0) @ Object.@recogito/annotorious

1 | module.exports = require("@recogito/annotorious");`

Please help, thank you!

[rsimon]

It's the server side rendering that causes problems. Maybe this is worth a try: https://stackoverflow.com/questions/56319997/nextjs-window-is-not-defined

[rsimon]

Is there any other debug outpout (or specific code location) you can pull out from the log? Or can you set up a demo project that reproduces the issue?

The window object is referenced at various locations in the code. (Because Annotorious needs to attach listeners.) Not sure whether anything can be done about this in principle. The StackOverflow hint might be your best chance.

But, in any case, if you can find any information on which reference to window exactly causes the problems, that would help track this down.

[xmkan]

Hi rsimon,

Thank you for your quick reply! I did tried out the method as recommended in the stackoverflow but there is a new error that came up after that.

Below is my following codes:
const Annotorious = dynamic(() => import("@recogito/annotorious"), { ssr: false, });
useEffect(() => { const anno = new Annotorious({ image: "image" });

[rsimon]

Good, one step further ;-) Hm, depending on how you import, it would have to be either

const anno = new Annotorious({ ... });

or

const anno = Annotorious.init({ ... });

Can you log the Annotorious object?

[dosstx]

Was there ever a solution for this? I am dealing with same issue....and mine is for NuxtJS (vs NextJS).

[rsimon]

I can't really provide any useful input here, I'm afraid. But it's definitely related to server-side rendering (where there is no window). Is it possible in NuxtJS to prevent server-side rendering for specific parts of the code?

[dosstx]

Thanks. I solved it this morning for NuxtJS. I had to follow this part of the NuxtJS Docs:
https://nuxtjs.org/guide/plugins#inject-in-root--context

So my code looks like this:

plugins/annotorious.client.js:

import { Annotorious } from '@recogito/annotorious'
import '@recogito/annotorious/dist/annotorious.min.css'

export default (context, inject) => {
  const initAnnotorious = (id, val) =>
    new Annotorious({
      image: id,
      widgets: [{ widget: 'COMMENT', editable: 'MINE_ONLY' }],
      readOnly: val
    })
  // inject(key,value)
  inject('initAnnotorious', initAnnotorious)
}

So, in my app's components, I can call Annototorious anywhere. Here's an example:
pages/photo/_id/_title.vue:

this.anno = this.$initAnnotorious(this.photo.id, true)

all good now!

[rsimon]

Closing due to 6 months+ of inactivity.