Fastboot does not respect rootElement

[Gaurav0]

If rootElement is defined in an application, both the fastboot HTML and the Ember DOM are rendered.

[tomdale]

@Gaurav0 The server-rendered HTML should be removed by https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/app/instance-initializers/browser/clear-double-boot.js#L19. Can you investigate why that line is not working?

[Gaurav0]

I found a workaround where I put {{content-for body}} inside the rootElement

[steveszc]

@tomdale I just ran into this issue, @Gaurav0's fix worked for me too. Seems like FastBoot renders to the {{content-for body}} tag, and then the client app renders to the rootElement. The clear-double-boot code only looks for the rootElement to clear it, but if {{content-for body}} isn't inside the rootElement the clearing code doesn't actually clear the FastBoot-rendered markup. Placing {{content-for body}} inside of the rootElement fixed this for me, but seems like that may not be a feasible solution for all, and probably not the intended behavior. I would assume that if a rootElement is defined that FastBoot should render to the rootElement, just as the client app does.

[tomdale]

@steveszc I agree that would be ideal. The tricky thing about this is we treat all of the HTML at render time as static strings, and the rootElement is specified as a selector. In order for FastBoot to respect rootElement, we'd need to 1) parse the static HTML before we send it over the wire and 2) have a selector engine that understood jQuery-style selectors.

I would be open to a PR that adds this feature, so long as it could be done without a noticeable performance penalty.

[sivakumar-kailasam]

We encountered this on the ember-builds app from the learning team and I could reproduce the same on a fresh app with FastBoot.

The workaround mentioned here on moving the content for body inside the root element works as well.

[tomdale]

@sivakumar-kailasam Just to make sure, the issue doesn't occur out-of-the-box, right? It requires setting a custom rootElement?

The problems I outlined in #206 (comment) still exist, I think the best we could do from a user experience perspective is do a check in JavaScript to verify that the rootElement has an ember-application class and, if not, warn that changing the rootElement would of course require you to update your HTML template as well.

[tomdale]

I think this would be a good issue for new contributors. In the code in https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/app/instance-initializers/clear-double-boot.js, it should be straightforward to detect whether the server-rendered root element was found, and if not, issue a warning or error.

[Gaurav0]

@tomdale I was under the impression from your earlier comment that rootElement could be a jQuery selector. Is there a way to handle that in node?

[sivakumar-kailasam]

@tomdale yes, it happens only in cases where rootElement is set. I added the comment since there was a needs reproduction label on the issue 😅

[markmhendrickson]

I'm strangely seeing the double render suddenly in the opposite case, where the rootElement is not set...and if I set it to an arbitrary value, the double rendering stops 😶

I noticed in my package.lock that ember-cli-fastboot had upgraded automatically during my last npm install from 1.1.1 to 1.1.3 and fastboot itself correspondingly from 1.1.2 to 1.1.3 since my package.json had ember-cli-fastboot set to ^1.1.1.

"ember-cli-fastboot": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ember-cli-fastboot/-/ember-cli-fastboot-1.1.1.tgz",
-      "integrity": "sha512-hctBX1MQYTDjYF2ISR6qZIT+fY4mmJFwCskNM/ruHTmN0XKgSSvRijRfF9y/VgpDux77iEDMNT9C5ZIzhSFEoA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/ember-cli-fastboot/-/ember-cli-fastboot-1.1.3.tgz",
+      "integrity": "sha512-9TuF4O/rTF82LdefWvNm8mLiLP1RpAAuufrC6EnTiHmhdyL0Ni4kb7uhkYd356zF+n1F2Cj6fNQu/JfwMbjG1g==",
       "dev": true,
       "requires": {
         "broccoli-concat": "3.2.2",
         "broccoli-funnel": "2.0.1",
         "broccoli-merge-trees": "2.0.0",
         "broccoli-plugin": "1.3.0",
-        "chalk": "2.3.0",
+        "chalk": "2.3.2",
         "ember-cli-babel": "6.11.0",
         "ember-cli-lodash-subset": "2.0.1",
+        "ember-cli-preprocess-registry": "3.1.1",
         "ember-cli-version-checker": "2.1.0",
-        "fastboot": "1.1.2",
+        "fastboot": "1.1.3",

Changing my package.json for ember-cli-fastboot to stay at 1.1.1 and reinstalling dependencies also resolved the double rendering without having to set an arbitrary rootElement, so the bug seems to have been produced during one of the above version changes.

[snewcomer]

Is this fixed as of this commit since it clears out everything in the <body> tag? https://github.com/ember-fastboot/ember-cli-fastboot/pull/569/files