search

emberjs / ember.js

Ember.js - A JavaScript framework for creating ambitious web applications
https://emberjs.com
MIT License
22.46k stars 4.21k forks source link

Loading routes do not work in FastBoot #15662

Open topaxi opened 6 years ago

topaxi commented 6 years ago

I get the following error in my app:

There was an error running your app in fastboot. More info about the error: 
 Error: a glimmer transaction was begun, but one already exists. You may have a nested transaction
    at debugAssert (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/@glimmer/util.js:62:1)
    at Environment.begin (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/@glimmer/runtime.js:6378:1)
    at Environment.begin (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/ember-glimmer/environment.js:273:1)
    at InertRenderer._renderRoots (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/ember-glimmer/renderer.js:311:1)
    at InertRenderer._renderRootsTransaction (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/ember-glimmer/renderer.js:379:1)
    at InertRenderer._revalidate (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/ember-glimmer/renderer.js:418:1)
    at invokeWithOnError (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/backburner.js:281:1)
    at Queue.flush (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/backburner.js:152:1)
    at DeferredActionQueues.flush (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/backburner.js:343:1)
    at Backburner.end (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/backburner.js:451:1)
    at Timeout.Backburner._boundAutorunEnd [as _onTimeout] (.../tmp/broccoli_merge_trees-output_path-Y53V5i2J.tmp/assets/backburner.js:413:1)
    at ontimeout (timers.js:469:11)
    at tryOnTimeout (timers.js:304:5)
    at Timer.listOnTimeout (timers.js:264:5)

At first I thought liquid-fire (#530) was causing this. But after removing liquid-fire I got the error above.

Serabe commented 6 years ago

Can you add a reproduction? A twiddle or repo would be fine.

Thank you!

topaxi commented 6 years ago

Okay this is caused by a liquid-bind in my application.hbs which binds a value from a service. The service value gets updated in the index route beforeModel hook, I guess this is bad practice or not supported? :)

(This works fine without loading routes though)

It also works without liquid-bind and a regular value, maybe it is a liquid-fire issue after all?

topaxi commented 6 years ago

Sadly I'm not able to reproduce this in a minimal app :(

rwjblue commented 6 years ago

I don't think we can do much without a repro on this...

topaxi commented 6 years ago

I could reproduce the error mentioned in the liquid-fire issue #530.

git clone https://github.com/topaxi/fastboot-loading-states
cd fastboot-loading-states
ember s

FastBoot console output upon visit:

There was an error running your app in fastboot. More info about the error: 
 TypeError: Cannot read property 'createComment' of undefined
    at ListBlockOpcode.evaluate (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/@glimmer/runtime.js:6759:1)
    at UpdatingVM.execute (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/@glimmer/runtime.js:6495:1)
    at RenderResult.rerender (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/@glimmer/runtime.js:6853:1)
    at RootState._this.render (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/ember-glimmer/renderer.js:69:1)
    at exports.runInTransaction (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/ember-metal.js:674:1)
    at InertRenderer._renderRoots (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/ember-glimmer/renderer.js:341:1)
    at InertRenderer._renderRootsTransaction (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/ember-glimmer/renderer.js:379:1)
    at InertRenderer._revalidate (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/ember-glimmer/renderer.js:418:1)
    at invokeWithOnError (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/backburner.js:281:1)
    at Queue.flush (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/backburner.js:152:1)
    at DeferredActionQueues.flush (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/backburner.js:343:1)
    at Backburner.end (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/backburner.js:451:1)
    at Timeout.Backburner._boundAutorunEnd [as _onTimeout] (/home/dsenn/gitty/github/fastboot-loading-states/tmp/broccoli_merge_trees-output_path-wTqgLUnw.tmp/assets/backburner.js:413:1)
    at ontimeout (timers.js:469:11)
    at tryOnTimeout (timers.js:304:5)
    at Timer.listOnTimeout (timers.js:264:5)

I'm not sure how closely related this is to my specific case though as I've been unable to reproduce the crash I got once I remove liquid-fire from my actual app.

CvX commented 6 years ago

Here's a minimal bug repro. Took a couple of days, I've been taking away parts of a production app until only this was left:

// routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { next } from '@ember/runloop';
import RSVP from 'rsvp';

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

  model() {
    let deferred = RSVP.defer();
    if (this.get('fastboot.isFastBoot')) {
      this.get('fastboot').deferRendering(deferred.promise);
    }

    let controller = this.controllerFor(this.routeName);
    controller.set('data', [1]);

    next(() => {
      controller.set('data', [2]);
      deferred.resolve();
    });
  }
});
// controllers/application.js
import Controller from '@ember/controller';

export default Controller.extend({
});
{{!-- templates/application.js --}}
{{#each data}}
{{/each}}
mazondo commented 6 years ago

We're hitting this in our app as well. the deferRendering seems to be a big part of it for us

mansona commented 6 years ago

Howdy folks 👋

I've just hit this issue while working on the new guides-app and I have a 100% reproducible way of hitting this bug, and we're not using any liquid-fire it's just the presence of the loading template that causes this issue

Steps to reproduce:

One of the issues that I am sure is causing problems reproducing this issue is that it doesn't seem to be consistent. The reason I am able to say that this method reproduces it 100% is because that prember is configured to pre-render about 300 pages, so at least one of them will have an issue guaranteed.

pixelhandler commented 5 years ago

@CvX @mansona @mazondo @rwjblue @topaxi is this still an issue, perhaps we should close or create a new reproduction of this, what do you think?

topaxi commented 5 years ago

@pixelhandler this is still happening with my reproduction repository posted above.

Installed dependencies (using ember-cli@3.4.3 installing latest fastboot and liquid-fire):

{
  "devDependencies": {
    "ember-cli": "~3.4.3",
    "ember-cli-fastboot": "^2.0.0",
    "ember-source": "~3.4.0",
    "liquid-fire": "^0.29.5
  }
}
nmec commented 5 years ago

Just a note that this is still an issue the latest versions of Ember (3.10) + FastBoot (2.1.0), I'm able to reliably reproduce it by having a loading template in my app.