Please use the 'new' operator, this DOM object constructor.

[cjm771]

I am getting this error when trying to load an image, I am currently trying to us useImage but also failed when trying to manually setup the state and load the image.

I am basically using this:

  import useImage from 'use-image';


  const ImageFromUrl = ({url}) => {  
    const [image] = useImage(url);
    // "image" will DOM image element or undefined
    return (
      <Image 
        image={image}
      />
    );
  };  

// <ImageFromUrl url="/path/to/myUrl" />

An i get this error, any thoughts?

backend.js:6 The above error occurred in the <Image> component:
    in Image (created by ImageFromUrl)
    in ImageFromUrl
    in Group
    in Layer

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ backend.js:6
logCapturedError @ react-reconciler.development.js?c996:11710
logError @ react-reconciler.development.js?c996:11747
update.callback @ react-reconciler.development.js?c996:13115
callCallback @ react-reconciler.development.js?c996:3645
commitUpdateEffects @ react-reconciler.development.js?c996:3683
commitUpdateQueue @ react-reconciler.development.js?c996:3673
commitLifeCycles @ react-reconciler.development.js?c996:12029
commitLayoutEffects @ react-reconciler.development.js?c996:15299
callCallback @ react-reconciler.development.js?c996:11508
invokeGuardedCallbackDev @ react-reconciler.development.js?c996:11557
invokeGuardedCallback @ react-reconciler.development.js?c996:11610
commitRootImpl @ react-reconciler.development.js?c996:15035
unstable_runWithPriority @ scheduler.development.js?71a8:815
runWithPriority @ react-reconciler.development.js?c996:1927
commitRoot @ react-reconciler.development.js?c996:14876
finishSyncRender @ react-reconciler.development.js?c996:14257
performSyncWorkOnRoot @ react-reconciler.development.js?c996:14229
eval @ react-reconciler.development.js?c996:1977
unstable_runWithPriority @ scheduler.development.js?71a8:815
runWithPriority @ react-reconciler.development.js?c996:1927
flushSyncCallbackQueueImpl @ react-reconciler.development.js?c996:1972
flushSyncCallbackQueue @ react-reconciler.development.js?c996:1960
scheduleUpdateOnFiber @ react-reconciler.development.js?c996:13607
scheduleRootUpdate @ react-reconciler.development.js?c996:16956
updateContainerAtExpirationTime @ react-reconciler.development.js?c996:16984
updateContainer @ react-reconciler.development.js?c996:17086
componentDidMount @ ReactKonvaCore.js?3aab:69
commitLifeCycles @ react-dom.development.js?61bb:17334
commitAllLifeCycles @ react-dom.development.js?61bb:18736
callCallback @ react-dom.development.js?61bb:149
invokeGuardedCallbackDev @ react-dom.development.js?61bb:199
invokeGuardedCallback @ react-dom.development.js?61bb:256
commitRoot @ react-dom.development.js?61bb:18948
eval @ react-dom.development.js?61bb:20418
unstable_runWithPriority @ scheduler.development.js?3069:255
completeRoot @ react-dom.development.js?61bb:20417
performWorkOnRoot @ react-dom.development.js?61bb:20346
performWork @ react-dom.development.js?61bb:20254
performSyncWork @ react-dom.development.js?61bb:20228
batchedUpdates$1 @ react-dom.development.js?61bb:20443
notify @ Subscription.js?79d6:23
notifyNestedSubs @ Subscription.js?79d6:65
handleChangeWrapper @ Subscription.js?79d6:70
dispatch @ redux.js?00d8:221
e @ VM1459:1
eval @ index.js?b083:11
dispatch @ redux.js?00d8:636
eval @ posts.actions.js?c7eb:50
Promise.then (async)
eval @ posts.actions.js?c7eb:48
eval @ index.js?b083:8
dispatch @ VM1459:1
eval @ main.js?1994:14
commitHookEffectList @ react-dom.development.js?61bb:17283
commitPassiveHookEffects @ react-dom.development.js?61bb:17307
callCallback @ react-dom.development.js?61bb:149
invokeGuardedCallbackDev @ react-dom.development.js?61bb:199
invokeGuardedCallback @ react-dom.development.js?61bb:256
commitPassiveEffects @ react-dom.development.js?61bb:18774
wrapped @ scheduler-tracing.development.js?1979:207
flushPassiveEffects @ react-dom.development.js?61bb:18822
dispatchAction @ react-dom.development.js?61bb:13530
checkForUpdates @ useSelector.js?339c:73
handleChangeWrapper @ Subscription.js?79d6:70
eval @ Subscription.js?79d6:25
batchedUpdates$1 @ react-dom.development.js?61bb:20439
notify @ Subscription.js?79d6:23
notifyNestedSubs @ Subscription.js?79d6:65
handleChangeWrapper @ Subscription.js?79d6:70
dispatch @ redux.js?00d8:221
e @ VM1459:1
eval @ index.js?b083:11
dispatch @ redux.js?00d8:636
eval @ user.actions.js?6e65:84
Promise.then (async)
eval @ user.actions.js?6e65:79
eval @ index.js?b083:8
dispatch @ VM1459:1
exports.default @ app.js?e10d:16
renderWithHooks @ react-dom.development.js?61bb:12938
mountIndeterminateComponent @ react-dom.development.js?61bb:15020
beginWork @ react-dom.development.js?61bb:15625
performUnitOfWork @ react-dom.development.js?61bb:19312
workLoop @ react-dom.development.js?61bb:19352
renderRoot @ react-dom.development.js?61bb:19435
performWorkOnRoot @ react-dom.development.js?61bb:20342
performWork @ react-dom.development.js?61bb:20254
performSyncWork @ react-dom.development.js?61bb:20228
requestWork @ react-dom.development.js?61bb:20097
scheduleWork @ react-dom.development.js?61bb:19911
scheduleRootUpdate @ react-dom.development.js?61bb:20572
updateContainerAtExpirationTime @ react-dom.development.js?61bb:20600
updateContainer @ react-dom.development.js?61bb:20657
ReactRoot.render @ react-dom.development.js?61bb:20953
eval @ react-dom.development.js?61bb:21090
unbatchedUpdates @ react-dom.development.js?61bb:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:21086
render @ react-dom.development.js?61bb:21155
eval @ index.js?3443:22
./client/src/js/index.js @ app.bundle.js:157
__webpack_require__ @ app.bundle.js:20
(anonymous) @ app.bundle.js:84
(anonymous) @ app.bundle.js:87
Show 19 more frames
react-reconciler.development.js?c996:6103 Uncaught TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

[cjm771]

never mind this was a dumb issue , wasn't importing Image from react-konva, so it was using window.Image. please ignore. thanks!

[darwinarugayvpi]

never mind this was a dumb issue , wasn't importing Image from react-konva, so it was using window.Image. please ignore. thanks!

Same here lol

[mr-schulz]

me2 🤣

[stefanatanasovmk]

Thanks for that comment there, I wasn't importing the Image as well.

[DavidJGrimsley]

Me too! so simple. thanks!

[hasnahadd]

never mind this was a dumb issue , wasn't importing Image from react-konva, so it was using window.Image. please ignore. thanks!
🤣
same here