Content of index.html getting repeated while reloading

Questions
1

Facing the below unusual issue. We are (still) on 3.16, please let me know if you know what could be causing this issue. Direction on what needs to be debugged also would help.

  1. We have all our authenticated routes inside a main parent route and the routes that doesn’t need authentication outside of that. (routes index.js, login.js etc which doesn’t authentication at the top level and all others under a parent route main/dashboard.js , main/contacts.js etc).
  2. When we load the app using unauthenticated routes http://app.example.com (login.js) and then navigate to route main/dashboard.js, everything works fine.
  3. But when we load http://app.example.com/main/dashboard directly, it adds the content of index.html twice to the page. We can see all the elements including “head” repeated. It gets added inside the body as a hidden div. What could be causing this?

This started happening after upgrade from 3.12 to 3.16.

Ember : 3.16.10
Ember Data : 3.16.9
jQuery : 3.6.4
Ember Bootstrap : 4.0.0

<body class="pace-done ember-application">
  <div class="pace pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
      <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
  </div>
  <div hidden>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="theme-color" content="#26a69a">
    <link rel="icon" href="/images/favicon.ico" type="image/ico" sizes="24x24">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2

Because this was related to an upgrade my immediate guess would be that a blueprint change was missed/resolved improperly. So the first thing I would check is that your application config/glue code matches the 3.16 blueprint, especially index.html and app.js. Next things, off the top of my head and without much context, would be to make sure you don’t have any double outlets in a route template and make sure you’re not doing anything weird with wormholes or in-element, and make sure your dependencies are updated to the newest compatible versions.

3

Thanks @dknutsen . index.html and app.js seems to be fine. I will check rest of the things.

Additional info on the context: The issue happens only when I deploy the app (from the dist folder) to nginx/cloudfront. It works fine while using ember serve directly. Whats the difference between these 2? I thought ember serve also serves the app from dist folder.

4

Ah that is interesting. So ember serve is just a very basic local development server, never intended for production use. When you “build” a SPA like an ember app it takes the index.html page, injects a few things and places that in /dist and then smashes all your javascript and CSS together into app/vendor bundles, and any chunk files from auto-import if you’re using those, and places those in dist as well. Once this has happened the “app” is simply a collection of static assets (html, js, css, etc files) which can be served by any web server capable of delivering static content (e.g. nginx). So all that to say… the little webserver that ships with ember-cli is only used for local development, and nginx would be your production web server.

Another difference between ember serve and your production deploy is probably the “build environment” used. When you run ember serve it builds your application in “development” environment mode, which typically means it does less transpilation, injects some debugging instrumentation, doesn’t minify code, etc. When you build for production the behavior is actually quite different. By default ember-cli will minify the code, run much “heavier” transforms from Babel etc to transpile your code for compatibility to match your config/targets.js settings, etc.

If this is only happening in your deployed app it seems like it could be related to your web server configuration, or to some production specific build thing. The former shouldn’t change when you upgrade to 3.16 but it’s hard to say what’s going on. A couple things you could try:

  • still make sure that your app code matches the 3.16 app blueprint
  • check your nginx configuration and make sure there’s nothing unusual about the way the files are served/injected. I’m not super familiar with nginx so I can’t be much help here :sweat_smile:
  • run ember s -e production to try using the development server with a production build (I think this works? can’t remember 100% though)

Other thoughts: the fact that it’s in a hidden div is very weird. I’ve never seen anything like that and It doesn’t feel like Ember doing this. Also the fact that it’s only in authenticated routes is unusual. Maybe it’s possible you have some code (either your addon code if you have any, or a 3rd party addon) that is misusing the content-for 'body' hook/outlet?

// app/index.html
  <body>
    {{content-for 'body'}}
1 Like
5

@dknutsen Thanks for the detailed explanation. It was one of the add-ons that was causing the issue.( ember-cli-plyr - old one ). I haven’t checked the root cause yet; will update here once I find same.

6

Oh wow interesting. A quick glance at the index.js looks like it’s using the contentFor hook which is my first guess as to where things are going wrong, but not sure.

My unsolicited advice would be to remove this very old addon and wrap the plyr library yourself using ember-auto-import. Not sure without digging whether it would make more sense as a Glimmer component, a modifier, or both, but for starters you could always make a component with the same interface as the old addon :person_shrugging:

1 Like
7

Created wrapper component to directly use plyr . Removed the addon. We didn’t have any deep integration to plyr anyway.

1 Like