Error `Uncaught TypeError: t.addEventListener is not a function` integrating PhotoEditorSDK inside react-dom.js

Question

On attempting to integrate PhotoEditorSDK into an angular app for the first time, I'm seeing this error in the console.

My config is:

const container = document.getElementById('editor');
const editor = new $window.PhotoEditorSDK.UI.DesktopUI({
    container: container,
    license: '{ .. }',
    assets: {
        baseUrl: '/js/pesdk/assets' // <-- This should be the absolute path to your `assets` directory
    },
    editor: {
        image: 'https://www.photoeditorsdk.com/assets/images/new/landingpage/platform_html5-4c8765e5.png',
    },
    style: {
        width: 500,
        height: 500,
    },
});

The editor begins to load, the license call completes successfully, then I see:

react-dom.production.min.js:162 TypeError: t.addEventListener is not a function
    at e._loadSource (PhotoEditorSDK.js:6)
    at new e (PhotoEditorSDK.js:6)
    at e.setImage (PhotoEditorSDK.js:73)
    at e._setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
    at c (PhotoEditorSDK.UI.DesktopUI.js:14)
    at e.setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
    at e.componentDidMount (PhotoEditorSDK.UI.DesktopUI.js:27)
    at commitLifeCycles (react-dom.production.min.js:148)
    at b (react-dom.production.min.js:156)
    at t (react-dom.production.min.js:167)

The non-minified "development" react-dom file looks minified also, so this is a pain to debug.

Answer 1

Right now the image option must be an actual image object, not a string URL, that's the source of the error. So you need to first load the image, pass is it as an option and load the editor.

There is an angular demo project if you'd like to checkout:

https://github.com/imgly/pesdk-angular-demo