Timeline Widget not destroyed on single page application page change SPA

widgetsjs
embeddedtimeline

#1

As mentioned in this thread that was prematurely closed
https://twittercommunity.com/t/destroy-widgets-in-single-page-app/83050

This component is being loaded on a React page with https://github.com/andrewsuzuki/react-twitter-widgets

When a Timeline widget is loaded then you change pages and go to a different page with another Timeline widget that get loaded a number of errors occur

On the initial page load everything is fine. The console outputs the following

notifyapi LOADED.
connecting to mothership...
==> Current connections: 0
Sent request
DET twitter timeline loaded. # This is my onLoad console.log.

When I proceed to switch pages, on page change I receive an out put in my console of the following

XHR failed loading: GET "https://platform.twitter.com/a535cd8623558445f32839316318f3c2844eb385d3850a55af36dc5ecbfe16ea/p/1490628239".
    connectToMothership @ VM39081 ns.js:613
    (anonymous) @ VM39081 ns.js:659
    (anonymous) @ VM39081 ns.js:671
XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: ""…}
request finished and response is ready
req.status: 0
Request cancelled - connect to mothership again

My sources tab shows twitter-widget-2, twitter-widget-3 being removed while rufous-sandbox stays.

The page in which I moved to also has a twitter Timeline widget and it gets loaded twice, just w/o any of the initial page load console output. Instead I get a number of errors

Uncaught (in promise) Error: sandbox not initialized at t.addRootClass (widgets.js)

After the errors I get the remaining console logs.

This does not occur with the Follow button widget. Just the Timelines

Any idea what may be causing this?

Thanks


Timeline Widget not destroyed on single page application page change SPA
#2

Is it possible to provide a test page where I can reproduce this? A jsbin/jsfiddle test case will allow us to help you a lot faster.


#3

I will put together an endpoint for testing purposes. Give me a day to get it squared away. Thank you!


#4

I created a repo with a test page and cannot reproduce the bug. I will dive deeper into my application to try and locate the issue.


#5

We have figured out the issue on our end when implementing the Twitter widgets with React. In the comments it was suggested that Twitter do a simple Object.assign({}, ...) on incoming object arguments. Thoughts?


#6

I apologize for not getting back sooner. I agree, this is probably something we should consider. Thanks for the clarification, I have filed a bug internally.


#7

Thanks for the reply. How can I follow up on this bug or know when/if it has been addressed?

Thanks!


#8

We don’t have a public bug tracker right now, but we’ll do our best to respond to this thread in the future if this is something that we are able to prioritise and resolve.


#9

What was the bug that was filed? The Object.assign({},...) on incoming arguments or the destroy method?


#10

The former. We shouldn’t internally hold onto objects passed in. Is that fair?


#11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.