Error in annotation api

I am encountering an error when attempting to add an annotation, specifically when following the example provided in the documentation: https://webviewer-docs.mupdf.com/annotations

This issue occurs in versions 0.8.0 and 0.8.1, but not in version 0.7.2, which works correctly.

Could you please investigate whether this is a bug or if there’s an issue with the example itself?

CleanShot 2025-09-24 at 13.17.37.jpeg

Hi @ciocan welcome to the forum!

Seems like there is a problem with the JPG you attached there. Are you able to just paste the error message?

hook.js:608 UnknownError: errors.too_small.number.inclusive
    at Object.add (mupdf.js:1:205072)
    at addTestAnnotations (src_eabe66d6._.js:6471:28)
    at async handleExtractPii (src_eabe66d6._.js:6947:9)
overrideMethod @ hook.js:608
error @ intercept-console-error.ts:44
(anonymous) @ mupdf.js:1
throwError @ mupdf.js:1
add @ mupdf.js:1
addTestAnnotations @ src_eabe66d6._.js:6471
await in addTestAnnotations
handleExtractPii @ src_eabe66d6._.js:6947
onClick @ pdf-chat.tsx:198
executeDispatch @ react-dom-client.development.js:16970
runWithFiberInDEV @ react-dom-client.development.js:871
processDispatchQueue @ react-dom-client.development.js:17020
(anonymous) @ react-dom-client.development.js:17621
batchedUpdates$1 @ react-dom-client.development.js:3311
dispatchEventForPluginEventSystem @ react-dom-client.development.js:17174
dispatchEvent @ react-dom-client.development.js:21357
dispatchDiscreteEvent @ react-dom-client.development.js:21325
<button>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
Button @ button.tsx:48
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopSync @ react-dom-client.development.js:15546
renderRootSync @ react-dom-client.development.js:15526
performWorkOnRoot @ react-dom-client.development.js:14990
performSyncWorkOnRoot @ react-dom-client.development.js:16830
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:16676
processRootScheduleInMicrotask @ react-dom-client.development.js:16714
(anonymous) @ react-dom-client.development.js:16849
<Button>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
PDFChat @ pdf-chat.tsx:193
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopSync @ react-dom-client.development.js:15546
renderRootSync @ react-dom-client.development.js:15526
performWorkOnRoot @ react-dom-client.development.js:14990
performSyncWorkOnRoot @ react-dom-client.development.js:16830
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:16676
processRootScheduleInMicrotask @ react-dom-client.development.js:16714
(anonymous) @ react-dom-client.development.js:16849
<PDFChat>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
AppSidebar @ app-sidebar.tsx:223
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopSync @ react-dom-client.development.js:15546
renderRootSync @ react-dom-client.development.js:15526
performWorkOnRoot @ react-dom-client.development.js:14990
performSyncWorkOnRoot @ react-dom-client.development.js:16830
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:16676
processRootScheduleInMicrotask @ react-dom-client.development.js:16714
(anonymous) @ react-dom-client.development.js:16849
<AppSidebar>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
PDFRedactApp @ pdf-redact.tsx:21
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10806
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
<...>
exports.jsx @ react-jsx-runtime.development.js:323
LoadableComponent @ loadable.tsx:65
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
<LoadableComponent>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
Page @ page.tsx:7
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
<Page>
exports.jsx @ react-jsx-runtime.development.js:323
ClientPageRoot @ client-page.tsx:60
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10806
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
"use client"
Function.all @ VM510 <anonymous>:1
initializeElement @ react-server-dom-turbopack-client.browser.development.js:1332
(anonymous) @ react-server-dom-turbopack-client.browser.development.js:3055
initializeModelChunk @ react-server-dom-turbopack-client.browser.development.js:1235
resolveModelChunk @ react-server-dom-turbopack-client.browser.development.js:1092
processFullStringRow @ react-server-dom-turbopack-client.browser.development.js:2888
processFullBinaryRow @ react-server-dom-turbopack-client.browser.development.js:2755
processBinaryChunk @ react-server-dom-turbopack-client.browser.development.js:2958
progress @ react-server-dom-turbopack-client.browser.development.js:3222
"use server"
ResponseInstance @ react-server-dom-turbopack-client.browser.development.js:2030
createResponseFromOptions @ react-server-dom-turbopack-client.browser.development.js:3083
exports.createFromReadableStream @ react-server-dom-turbopack-client.browser.development.js:3460
__TURBOPACK__module__evaluation__ @ app-index.tsx:156
(anonymous) @ dev-base.ts:241
runModuleExecutionHooks @ dev-base.ts:275
instantiateModule @ dev-base.ts:235
getOrInstantiateModuleFromParent @ dev-base.ts:162
commonJsRequire @ runtime-utils.ts:366
(anonymous) @ app-next-turbopack.ts:11
(anonymous) @ app-bootstrap.ts:76
loadScriptsInSequence @ app-bootstrap.ts:22
appBootstrap @ app-bootstrap.ts:58
__TURBOPACK__module__evaluation__ @ app-next-turbopack.ts:10
(anonymous) @ dev-base.ts:241
runModuleExecutionHooks @ dev-base.ts:275
instantiateModule @ dev-base.ts:235
getOrInstantiateRuntimeModule @ dev-base.ts:128
registerChunk @ runtime-backend-dom.ts:57
await in registerChunk
registerChunk @ dev-base.ts:1146
(anonymous) @ dev-backend-dom.ts:126
(anonymous) @ dev-backend-dom.ts:126Understand this error
mupdf.js:1 Uncaught (in promise) Uo: internal_errors.common
add @ mupdf.js:1
addTestAnnotations @ src_eabe66d6._.js:6471
await in addTestAnnotations
handleExtractPii @ src_eabe66d6._.js:6947
onClick @ pdf-chat.tsx:198
executeDispatch @ react-dom-client.development.js:16970
runWithFiberInDEV @ react-dom-client.development.js:871
processDispatchQueue @ react-dom-client.development.js:17020
(anonymous) @ react-dom-client.development.js:17621
batchedUpdates$1 @ react-dom-client.development.js:3311
dispatchEventForPluginEventSystem @ react-dom-client.development.js:17174
dispatchEvent @ react-dom-client.development.js:21357
dispatchDiscreteEvent @ react-dom-client.development.js:21325
<button>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
Button @ button.tsx:48
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopSync @ react-dom-client.development.js:15546
renderRootSync @ react-dom-client.development.js:15526
performWorkOnRoot @ react-dom-client.development.js:14990
performSyncWorkOnRoot @ react-dom-client.development.js:16830
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:16676
processRootScheduleInMicrotask @ react-dom-client.development.js:16714
(anonymous) @ react-dom-client.development.js:16849
<Button>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
PDFChat @ pdf-chat.tsx:193
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopSync @ react-dom-client.development.js:15546
renderRootSync @ react-dom-client.development.js:15526
performWorkOnRoot @ react-dom-client.development.js:14990
performSyncWorkOnRoot @ react-dom-client.development.js:16830
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:16676
processRootScheduleInMicrotask @ react-dom-client.development.js:16714
(anonymous) @ react-dom-client.development.js:16849
<PDFChat>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
AppSidebar @ app-sidebar.tsx:223
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopSync @ react-dom-client.development.js:15546
renderRootSync @ react-dom-client.development.js:15526
performWorkOnRoot @ react-dom-client.development.js:14990
performSyncWorkOnRoot @ react-dom-client.development.js:16830
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:16676
processRootScheduleInMicrotask @ react-dom-client.development.js:16714
(anonymous) @ react-dom-client.development.js:16849
<AppSidebar>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
PDFRedactApp @ pdf-redact.tsx:21
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10806
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
<...>
exports.jsx @ react-jsx-runtime.development.js:323
LoadableComponent @ loadable.tsx:65
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
<LoadableComponent>
exports.jsxDEV @ react-jsx-dev-runtime.development.js:323
Page @ page.tsx:7
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10857
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
<Page>
exports.jsx @ react-jsx-runtime.development.js:323
ClientPageRoot @ client-page.tsx:60
react_stack_bottom_frame @ react-dom-client.development.js:23583
renderWithHooksAgain @ react-dom-client.development.js:6892
renderWithHooks @ react-dom-client.development.js:6804
updateFunctionComponent @ react-dom-client.development.js:9246
beginWork @ react-dom-client.development.js:10806
runWithFiberInDEV @ react-dom-client.development.js:871
performUnitOfWork @ react-dom-client.development.js:15726
workLoopConcurrentByScheduler @ react-dom-client.development.js:15720
renderRootConcurrent @ react-dom-client.development.js:15695
performWorkOnRoot @ react-dom-client.development.js:14989
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
"use client"
Function.all @ VM510 <anonymous>:1
initializeElement @ react-server-dom-turbopack-client.browser.development.js:1332
(anonymous) @ react-server-dom-turbopack-client.browser.development.js:3055
initializeModelChunk @ react-server-dom-turbopack-client.browser.development.js:1235
resolveModelChunk @ react-server-dom-turbopack-client.browser.development.js:1092
processFullStringRow @ react-server-dom-turbopack-client.browser.development.js:2888
processFullBinaryRow @ react-server-dom-turbopack-client.browser.development.js:2755
processBinaryChunk @ react-server-dom-turbopack-client.browser.development.js:2958
progress @ react-server-dom-turbopack-client.browser.development.js:3222
"use server"
ResponseInstance @ react-server-dom-turbopack-client.browser.development.js:2030
createResponseFromOptions @ react-server-dom-turbopack-client.browser.development.js:3083
exports.createFromReadableStream @ react-server-dom-turbopack-client.browser.development.js:3460
__TURBOPACK__module__evaluation__ @ app-index.tsx:156
(anonymous) @ dev-base.ts:241
runModuleExecutionHooks @ dev-base.ts:275
instantiateModule @ dev-base.ts:235
getOrInstantiateModuleFromParent @ dev-base.ts:162
commonJsRequire @ runtime-utils.ts:366
(anonymous) @ app-next-turbopack.ts:11
(anonymous) @ app-bootstrap.ts:76
loadScriptsInSequence @ app-bootstrap.ts:22
appBootstrap @ app-bootstrap.ts:58
__TURBOPACK__module__evaluation__ @ app-next-turbopack.ts:10
(anonymous) @ dev-base.ts:241
runModuleExecutionHooks @ dev-base.ts:275
instantiateModule @ dev-base.ts:235
getOrInstantiateRuntimeModule @ dev-base.ts:128
registerChunk @ runtime-backend-dom.ts:57
await in registerChunk
registerChunk @ dev-base.ts:1146
(anonymous) @ dev-backend-dom.ts:126
(anonymous) @ dev-backend-dom.ts:126Understand this error
src_eabe66d6._.js:6958 Uncaught (in promise) Promise {<rejected>: Uo: internal_errors.common}

I think this might be related to the coordinate update from version 0.8.0 onwards and the examples use old coordinate system. I will update the examples. Should be something more like this:

let json = `
        {
            "annotations": [
                {

                    "type": "TEXT_POPUP",
                    "pageIndex": 0,
                    "name": "9b2",
                    "rect": {
                        "left": 10,
                        "top": 10,
                        "right": 400,
                        "bottom": 40
                    },
                    "opacity": 1,
                    "rotation": 0,
                    "createdAt": "D:20250617223659+01'00'",
                    "modifiedAt": "D:20250617223704+01'00'",
                    "author": "Jamie Lemon",
                    "canBePrinted": true,
                    "locked": false,
                    "contents": "Hi there!",
                    "fillColor": "#ff00ff",
                    "position": {
                        "x": 100,
                        "y": 100
                    },
                    "popupNote": {
      
                        "rect": {
                            "left": 10,
                            "top": 10,
                            "right": 400,
                            "bottom": 40
                        }
                    }
                }
            ]
        }  
        `
        
        const savedAnnotations = JSON.parse(json);

        if (savedAnnotations?.annotations.length > 0) {
            await _mupdf.annotation.add(savedAnnotations);
            _mupdf.toast.show({
                type: 'notification',
                content: 'Annotations loaded'
            });
        }

it seems the mupdf.text.search function returns the old coordinates.
I tried to add a highlight with the rects returned from search and it errors.

Yes - we are aware of this bug!

Sorry about this - there should be a new release 0.9.0 which I think will be released tomorrow or the next day. (FYI: @ep-kyh )

@ciocan Please note 0.9.0 has just been released on NPM which should resolve the issue! https://www.npmjs.com/package/mupdf-webviewer

1 Like

Thank you. This works well now.

1 Like