Question: How to destroy/teardown

[emiloberg]

In a React environment, imagine this:

1. Component is mounted, xcomponent is then set up, iframe loaded, event listeners attached etc
2. The component is unmounted (because we no longer want to show the xcomponent)
3. Component is mounted again. Now we're getting the error:

   Request listener already exists for xcomponent_delegate_mystuff on domain * for specified window

I'm enclosing the xcomponent supplied react component in my own component so I can do stuff on componentWillUnmount, but how to tear down the correct way? I've searched the source code but didn't find any obvious reasons.

[bluepnume]

So let me understand -- when the component is re-mounted, you're calling xcomponent.create again?

xcomponent comes with good support for tearing down a component that's been rendered, not so much for tearing down the component definition -- the assumption is xcomponent.create() is only called once, per page, per component.

I'd like to understand this use-case a bit better though.

[raphaelcosta]

@bluepnume I am calling xcomponet.create() once per component but I got Request listener already exists for xcomponent_delegate_calendar_modal on domain * for specified window also.

Looks like it's unsubscribe when I unmount component.

[Info] xc_calendar_modal_detect_close_child – {timestamp: 1491626866819, windowID: "4c8e689e06", pageID: "9627c250dd"} (application-ecbfda1ccc310863185bc2ac80158d5ca61142441e0ca2af9e9cbfab8e531072.js, line 98975) [Info] xc_calendar_modal_destroy – {timestamp: 1491626866819, windowID: "4c8e689e06", pageID: "9627c250dd"} (application-ecbfda1ccc310863185bc2ac80158d5ca61142441e0ca2af9e9cbfab8e531072.js, line 98975)

[bluepnume]

@raphaelcosta weird -- since that listener should only be set up on xcomponent.create.

Could you share a stack trace for that error?

[raphaelcosta]

addRequestListener@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:101108:116
listen@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:103216:68
value@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:103476:34
Component@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:103439:117
create@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:102001:45
render@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98170:53
measureLifeCyclePerf@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:23808:15
_renderValidatedComponentWithoutOwnerOrContext@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24528:46
_renderValidatedComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24555:79
performInitialMount@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24095:56
mountComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:23991:41
mountComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16552:50
updateChildren@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:23563:66
_reconcilerUpdateChildren@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:23094:47
_updateChildren@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:23198:57
updateChildren@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:23185:28
_updateDOMChildren@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:20434:27
updateComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:20252:29
receiveComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:20214:26
receiveComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16631:39
_updateRenderedComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24487:40
_performComponentUpdate@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24457:35
updateComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24378:36
receiveComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24280:26
receiveComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16631:39
_updateRenderedComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24487:40
_performComponentUpdate@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24457:35
updateComponent@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24378:36
performUpdateIfNecessary@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:24294:28
performUpdateIfNecessary@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16663:47
runBatchedUpdates@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16252:46
perform@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:17546:25
perform@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:17546:25
flushBatchedUpdates@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16274:27
flushBatchedUpdates@[native code]
closeAll@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:17612:30
perform@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:17559:25
enqueueUpdate@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:16302:37
enqueueUpdate@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:25707:30
enqueueSetState@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:25892:19
setState@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:10546:32
_onChange@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:90350:19
_onChange@[native code]
emit@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:31954:15
updateAndEmitChange@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:34082:15
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:34274:39
_invokeCallback@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:31483:25
dispatch@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:31459:30
openModal@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:31741:39
modal@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98083:37
modal@[native code]
bound modal@[native code]
bound bound modal@[native code]
bound bound bound modal@[native code]
bound bound bound bound modal@[native code]
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98517:89
dispatch@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98528:20
then@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98538:55
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:103019:104
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98517:89
dispatch@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98528:20
then@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98538:55
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:101268:45
trycatch@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98428:24
SyncPromise@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98490:26
deNodeify@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:101264:36
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98517:89
dispatch@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98528:20
then@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98538:55
http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:102857:34
receiveMessage@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:102786:60
messageListener@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:102805:28
http://localhost:4000/js/xcomponent.js:4704:159
receiveMessage@http://localhost:4000/js/xcomponent.js:4601:59
messageListener@http://localhost:4000/js/xcomponent.js:4620:27
    (anonymous function) (application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:98460)```

[bluepnume]

I do see a create call there:

create@http://localhost:3000/assets/v3/application-49050ad020c8fa96d5dc862c32729b8e8e833a39b82a7c0b6e9822e4d2215d15.js:102001:45

At what point in your code are you calling create()? could you share some code?

[bluepnume]

Also FWIW, I should really add an earlier error for multiple creates with the same tag name...

[raphaelcosta]

I am creating inside a render method, it's possible to call everytime component mount? I am using that to render dynamic tag names. Probably that's what I am doing wrong

[bluepnume]

Yeah, that's the problem then. The expectation is you call create() at load time with a unique tag name, then render() when you're ready to render.

Does that approach not work for you? Out of interest, why do you need dynamic tag names?

On a side note -- I just published xcomponent@2.0.14 with a better error message for this case.

[raphaelcosta]

I am trying to use xcomponent to build a platform for apps, like Trello power ups. We will have multiple apps initialized, so 2 apps could have 2 modals with iframe at same time.

[bluepnume]

Sure -- but could you not create the component once, for this use case, and render it twice?

Or can you ensure you give a unique tag-name each time you create()?

[raphaelcosta]

Yes, I will do that. My current scenario is when user open Modal(iframe), closes and try to open again. Thanks for you help @bluepnume

[bluepnume]

Also @emiloberg sounds like you may be doing something similar. Interested to know if there's a reason you can't call create() once at the top level, then render() when you're ready to display

[bluepnume]

I guess I should clarify this in the docs.

• let SomeXComponent = xcomponent.create() is analogous to React's let SomeReactComponent = react.createClass() (which you'd normally only call once per component you want to create)
• SomeXComponent.render() is analogous to calling SomeReactComponent.render() in React, or dropping a <SomeReactComponent /> into a jsx template during a render.

I'll wait to make sure I'm not missing something about what you're trying to do @emiloberg, otherwise I'll close this issue.

[raphaelcosta]

Yes, I didn't get that. Thanks for clarifying that for me.