ember-cli-fastboot Shoebox data from index.html not available

If I add some shoebox data to my index.html like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FastbootShoeboxExample</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/fastboot-shoebox-example.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/fastboot-shoebox-example.js"></script>

    {{content-for "body-footer"}}

    <script type="fastboot/shoebox" id="shoebox-assets">{"foo":"bar"}</script>
  </body>
</html>

I would expect to be able to retrieve it in my application route like this:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  fastboot: service(),

  model() {
    return this.get("fastboot.shoebox").retrieve("assets");
  }
});

However, no data is returned.

I have made a simple example reproduction of this issue here: https://github.com/chrism/fastboot-shoebox-example

If you run in a browser with javascript disabled then the shoebox-assets script is visible in the elements, but no data retrieved.

I saw that there is a PR which may be related to this issue, https://github.com/ember-fastboot/ember-cli-fastboot/pull/636

Nov 04 '18 15:11 chrism

The PR https://github.com/ember-fastboot/ember-cli-fastboot/pull/636 does not appear to resolve this issue, though.

Here is a branch of my example repo using it: https://github.com/chrism/fastboot-shoebox-example/tree/try-fix

It still does not retrieve the data.

Nov 04 '18 16:11 chrism

@chrism Your store is put outside the x/boundary elements, because it is added manually. I think you have to put the fastboot/shoebox element after a <script type="x/boundary" id="fastboot-body-start"></script> element and before a <script type="x/boundary" id="fastboot-body-end"></script> element. This is what it does when the shoebox is added programmatically.

Nov 05 '18 09:11 paulgoetze

@paulgoetze Thanks, so if I understand correctly then that means that it is not possible to add a shoebox manually to index.html then because the fastboot-body-start and fastboot-body-end boundaries are applied wrapped around the {{content-for body}} element?

Nov 05 '18 10:11 chrism

ember-cli-fastboot ember-cli-fastboot copied to clipboard

Shoebox data from index.html not available

ember-cli-fastboot
ember-cli-fastboot copied to clipboard