React + Next.js: Unhandled Runtime Error with Annotorious (ReactCurrentDispatcher)

[baydisng13]

Hi everyone,

I'm trying to integrate the @annotorious/react library into my Next.js project, but I’m running into a runtime error:

Unhandled Runtime Error  
TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

Here’s my setup:

• Next.js version: 15.1.2
• React version: ^19.0.0
• @annotorious/react version: ^3.0.20

My Code

Here’s the code that produces the error:

"use client";

import { Annotorious, ImageAnnotator } from '@annotorious/react';

import '@annotorious/react/annotorious-react.css';

export default function App() {
  return (
    <Annotorious>
      <ImageAnnotator>
        <img src="example.jpg" />
      </ImageAnnotator>
    </Annotorious>
  );
}

Questions:

1. Is there a specific issue with @annotorious/react compatibility with Next.js?
2. Has anyone successfully used this library in a similar setup?
3. Are there additional steps I should take to resolve this error?

Any help is appreciated! 🙏

Thanks in advance,

[maxtheman]

I have a fix. this is not an annotorious issue. this is a NextJS issue.

At first I thought it was just a normal SSR versus non SSR thing, so I tried both:

const Annotorious = dynamic(
  () => import('@annotorious/react').then(mod => mod.Annotorious),
  { ssr: false }
);

and simply

'use client'
import { Annotorious } from '@annotorious/react';
import '@annotorious/react/annotorious-react.css';

That didn't work. Google showed this: https://stackoverflow.com/questions/66194269/typeerror-cannot-read-propertyreactcurrentdispatcherof-undefined

and so I downgraded Next.js from version 15 to 14:

{
  "dependencies": {
    "next": "^14.1.3"
  },
  "devDependencies": {
    "eslint-config-next": "^14.1.3"
  }
}

and eslint to 8 from 9

{
  "devDependencies": {
    "eslint": "^8.56.0"
  }
}

Those two updates combined resolved the issue.

[RobTS]

From what I can tell so far, this is due to the bundle using __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, which is very much gone from React 19 (or has been moved?). Since this seems to happen outside the library's code, it might get fixed by updating its dependencies.

[RobTS]

A dependency update fixes this, I have provided a PR here: #509

[rsimon]

Wonderful - thanks, I really appreciate it! Will do some testing and merge ASAP.

[RobTS]

@rsimon It worked a little while testing, now it no longer does that for me, not sure what is happening exactly. Will report back once I know more!

[RobTS]

I suspect that this is the culprit: #510

But as written there, maybe this code should not be bundled in the first place and there is a configuration change that can achieve that. I do not have a lot of experience with bundling React libraries.