NS_ERROR_FAILURE when unmounting a component with <PaperContainer canvasProps={{ resize: '' }} />

[fernandoherreradelasheras]

Using PaperContainer with canvasProps={{ resize: '' }}, so the canvas gets properly resized when the browser window is resized leads to an exception. React installs some events listeners on the view that get invoked on such resize events after the component has been unmounted:

Uncaught NS_ERROR_FAILURE:
    _setElementSize paper-core.js:13597
    setViewSize paper-core.js:13053
    resize paper-core.js:12856
    add paper-core.js:12749
    View paper-core.js:12854
    CanvasView paper-core.js:13575
    create paper-core.js:13212
    Project paper-core.js:2892
    setup paper-core.js:855
    componentDidMount Paper.container.js:41
    React 12
    SizeAwareComponent with-size.js:220
    SizeAwareComponent with-size.js:289
    exec throttle.js:67
    wrapper throttle.js:93
    addListener element-resize-detector.js:163
    onElementDetectable element-resize-detector.js:238
    ready scroll.js:611
    process batch-processor.js:124
    processBatch batch-processor.js:37
    setTimeout handler*raf batch-processor.js:82
    requestFrame batch-processor.js:83
    processBatchAsync batch-processor.js:64
    addFunction batch-processor.js:24
    install scroll.js:619
    makeDetectable scroll.js:640
    attachListenerToElement element-resize-detector.js:231
    forEach collection-utils.js:14
    listenTo element-resize-detector.js:199
    handleDOMNode with-size.js:238
    componentDidMount with-size.js:174
    React 19

Adding:

if (paper.view) {
    paper.view.remove();
}

at PaperContainer's componentWillUnmount() prevents this to happen.

[psychobolt]

Thanks for creating this issue. What React version are you using?

[fernandoherreradelasheras]

18.2.0. I am embedding mirador 3.3.0 (that depends on 17.0) and some plugins on my app. Let me be double sure that the problem also is reproducible using just mirado app + plugin using react 17.0

[fernandoherreradelasheras]

yeah, same happens on 17.0.2: by running mirador with the annotations plugin from here:

https://github.com/ProjectMirador/mirador-annotations

and then modifying AnnotationDrawing.js to add the canvas resize prop:
<PaperContainer
canvasProps={{ style: { height: '100%', width: '100%' }, resize:'' }}
viewProps={viewProps}
>

Then you need an app that renders the whole thing and then unmount it. I used the following app.js on the root dir with: nwb react run app.js

import React, {Component} from 'react'

import mirador from 'mirador/dist/es/src/index';

import annotationPlugins from './src';
import LocalStorageAdapter from './src/LocalStorageAdapter';
import AnnototAdapter from './src/AnnototAdapter';

const endpointUrl = 'http://127.0.0.1:3000/annotations';
const config = {
  annotation: {
    adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
    // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl),
    exportLocalStorageAnnotations: false, // display annotation JSON export button
  },
  id: 'demo',
  window: {
    defaultSideBarPanel: 'annotations',
    sideBarOpenByDefault: true,
  },
  windows: [{
    loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
  }],
};


class Mirador extends Component {
    constructor(props) {
        super(props);
        this.props = props;
    }
    componentDidMount() {
        mirador.viewer(config, [...annotationPlugins]);
    }
    render() {
        return (
                <div id="demo" />
        );
    }
}

export default class App extends Component {

  state;
  constructor(props) {
    super(props);
    this.props = props;
    this.state = { closeMirador: false };
  }

  componentDidMount() {
    setTimeout(() => { this.setState ({ closeMirador: true }) }, 10000);
  }

  render() {
    const mirador = !this.state.closeMirador ? <Mirador /> : "Bye bye";
    return (
    <div id="root">
    {mirador}
    </div>
    );
  }
}

and after the react component is gone, resize de browser window:

Uncaught NS_ERROR_FAILURE: 
    _setElementSize paper-core.js:13597
    setViewSize paper-core.js:13053
    resize paper-core.js:12856

[psychobolt]

I suppose we should look into clearContainer and see if that method gets trigger on container unmount.