_uihooks stops working after migration on Meteor 1.7.0.3

Hi,

We are seeing an issue where _uihooks stopped working for us, after we replaced iron router with flow-router-extra. The issue happened on both Chrome and Safari.

We are currently on flow-router-extra@3.6.0 and our Meteor version is 1.7.0.3

To be more specific, the next param for insertElement callback function is always set to null. And currently, we do not have a workaround to keep the animations we had around _uihooks. It seems _uihooks is the only way to do animations with Blaze.

Here is our .versions file:

accounts-base@1.4.2
accounts-password@1.5.1
aldeed:autoform@5.8.1
aldeed:geocoder@0.3.8
aldeed:simple-schema@1.5.4
allow-deny@1.1.0
amr:parsley.js@2.0.4
anti:i18n@0.4.3
aslagle:reactive-table@0.8.45
autoupdate@1.4.1
babel-compiler@7.1.1
babel-runtime@1.2.2
base64@1.0.11
binary-heap@1.0.10
blaze@2.3.2
blaze-tools@1.0.10
boilerplate-generator@1.5.0
caching-compiler@1.1.12
caching-html-compiler@1.1.3
callback-hook@1.1.0
check@1.3.1
chrismbeckett:toastr@2.1.2_1
coffeescript@1.0.17
cosmos:browserify@0.8.4
curious-solutions:date-time-picker@0.0.0
dandv:caret-position@2.1.1
dburles:google-maps@1.1.5
ddp@1.4.0
ddp-client@2.3.3
ddp-common@1.4.0
ddp-rate-limiter@1.0.7
ddp-server@2.2.0
deanius:promise@3.1.3
deps@1.0.12
diff-sequence@1.1.0
dynamic-import@0.4.1
ecmascript@0.11.1
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.7.1
ecmascript-runtime-server@0.7.0
ejson@1.1.0
email@1.2.3
erasaur:meteor-lodash@4.0.0
erasaur:notification-badge@0.0.6
erasaur:server-session@0.0.5
es5-shim@4.8.0
evaisse:diacritics@0.0.1
fastclick@1.0.13
ffxsam:timestamp-log@1.0.1
geojson-utils@1.0.10
hedcet:touch-swipe@1.6.6
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.4.1
id-map@1.1.0
instant:microservice@0.0.1
instant:shared-3rd-party-libs@0.0.2
instant:shared-instant-libs@0.0.28
jaywon:meteor-node-uuid@1.0.1
jquery@1.11.11
kadira:debug@3.2.2
kadira:runtime-dev@0.0.1
launch-screen@1.1.1
less@2.7.12
livedata@1.0.18
localstorage@1.2.0
logging@1.1.20
matb33:collection-hooks@0.8.4
mdg:geolocation@1.3.0
mdg:validation-error@0.2.0
meteor@1.9.2
meteor-base@1.4.0
meteorhacks:aggregate@1.3.0
meteorhacks:collection-utils@1.2.0
meteorhacks:kadira@2.30.4
meteorhacks:meteorx@1.4.1
meteorhacks:subs-manager@1.6.4
meteorhacks:unblock@1.1.0
minifier-css@1.3.1
minifier-js@2.3.5
minimongo@1.4.4
mizzao:autocomplete@0.5.1
mizzao:build-fetcher@0.3.2
mizzao:jquery-ui@1.11.4
mobile-experience@1.0.5
mobile-status-bar@1.0.14
modern-browsers@0.1.2
modules@0.12.2
modules-runtime@0.10.2
momentjs:moment@2.22.2
mongo@1.5.1
mongo-dev-server@1.1.0
mongo-id@1.0.7
mongo-livedata@1.0.12
mrt:q@1.0.1
mrt:underscore-string-latest@2.3.3
mystor:device-detection@0.2.0
netanelgilad:node-uuid@1.0.2
nolimits4web:swiper@3.4.1
npm-bcrypt@0.9.3
npm-mongo@3.0.11
nspangler:autoreconnect@0.0.1
observe-sequence@1.0.16
ordered-dict@1.1.0
ostrio:flow-router-extra@3.6.0
perak:camera@1.0.0
percolate:velocityjs@1.2.1_1
promise@0.11.1
raix:eventemitter@0.1.3
raix:eventstate@0.0.4
raix:push@0.0.0-semantic-release
random@1.1.0
rate-limit@1.0.9
reactive-dict@1.2.0
reactive-var@1.0.11
reload@1.2.0
retry@1.1.0
risul:accounting@1.0.1
risul:moment-timezone@0.5.7
routepolicy@1.0.13
ryanswapp:interactjs@0.1.0
service-configuration@1.0.11
session@1.1.7
sha@1.0.9
shell-server@0.3.1
socialize:server-time@0.1.2
socket-stream-client@0.2.2
spacebars@1.0.15
spacebars-compiler@1.1.3
srp@1.0.10
standard-minifier-css@1.4.1
standard-minifier-js@2.3.4
templating@1.3.2
templating-compiler@1.3.3
templating-runtime@1.3.2
templating-tools@1.1.2
tracker@1.2.0
ui@1.0.13
underscore@1.0.10
url@1.2.0
webapp@1.6.2
webapp-hashing@1.0.9
zeroasterisk:throttle@0.3.5

HTML looks like this:

    <div id="content-container">
        {{> yield}}
    </div>

And the _uihooks is registered on #content-container

Please advice, thank you!

[coagmano]

@dr-dimitru There is no new API, all the Blaze animation packages in the wild also rely on _uihooks

@zhang2118 I believe the issue is that because flow-router-extra mounts to a new div element, there is no next element in the dom to insert before.

In my code using _uihooks, I check if next exists and then use either parent.insertBefore (if it does) or parent.appendChild

[zhang2118]

@dr-dimitru sorry for the late reply. It was resolved for me by installing meteor/kadira:blaze-layout and using BlazeLayout.render. I’ll close the issue for now.

@coagmano I did try your solution, but in my case parent.appendChild was null. Not sure why. So it did not work for me.