<link-to> stopped working recently but we can able to load page while loading the route manually in the address bar #19300

Ember CLI
1

link-to and transitionTo stopped working recently but we can able to load the page while loading the route manually in the address bar

After several months I rebuild the application, it rebuilds successfully but I couldn’t able to navigate to any menu. When I click , control comes to beforeModel hook and model hook but it doesn’t run the after model hook and the template was not rendered and the URL was not changed. But I see backend calls in the network tab and in model hook, I see the data but after model hook, it’s not doing anything. Similar behavior we are observing in transitionTo as well.

Whereas when I load the same page by hitting the URL directly it loads absolutely fine.

:earth_africa: Environment

  • Ember: - 2.7.0
  • Node.js/npm: - 14.5.1/6.14.8
  • OS: - Mac os
  • Browser: - Chrome

Please find the package.json

{
  "name": "book-content",
  "version": "0.0.0",
  "description": "content book portal",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "build": "ember build",
    "start": "ember server",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.2.0",
    "broccoli-funnel": "^1.0.2",
    "broccoli-merge-trees": "^1.1.1",
    "bson": "^4.0.4",
    "ember-ajax": "0.7.1",
    "ember-aupac-typeahead": "3.1.0",
    "ember-browserify": "^1.2.2",
    "ember-can": "^0.8.1",
    "ember-cli": "2.13.0",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-autocomplete-input": "1.1.0",
    "ember-cli-babel": "^5.1.5",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-htmlbars": "^1.0.1",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.3.1",
    "ember-cli-moment-shim": "^3.7.1",
    "ember-cli-pace": "0.1.0",
    "ember-cli-pagination": "2.2.2",
    "ember-cli-qunit": "^1.2.1",
    "ember-cli-release": "0.2.8",
    "ember-cli-sass": "^7.1.7",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-composable-helpers": "2.1.0",
    "ember-concurrency": "0.8.21",
    "ember-data": "2.7.0",
    "ember-disable-proxy-controllers": "^1.0.1",
    "ember-export-application-global": "^1.0.4",
    "ember-get-helper": "1.1.0",
    "ember-load-initializers": "^0.5.0",
    "ember-lodash": "4.17.1",
    "ember-moment": "^7.8.0",
    "ember-plupload": "1.13.18",
    "ember-power-select-typeahead": "0.7.1",
    "ember-query-params-reset": "2.0.0",
    "ember-resolver": "^2.0.3",
    "ember-rl-month-picker": "^0.2.0",
    "ember-rl-year-picker": "^0.2.0",
    "ember-slide-push-menu": "1.0.0",
    "ember-truth-helpers": "1.2.0",
    "ember-uploader": "1.0.0",
    "ember-validations": "v2.0.0-alpha.5",
    "express": "^4.13.4",
    "glob": "^4.5.3",
    "loader.js": "^4.0.0",
    "morgan": "^1.7.0",
    "uglify-js": "2.7.1"
  },
  "dependencies": {
    "minimist": "^1.2.0"
  },
  "resolutions": {
    "ember-compatibility-helpers": "1.2.1"
  }
}

bower.json

{
  "name": "io-t-po-c-fulfullment-frontend",
  "dependencies": {
    "ember": "2.7.0",
    "ember-cli-shims": "~0.1.1",
    "ember-cli-test-loader": "0.2.2",
    "ember-qunit-notifications": "0.1.0",
    "pretender": "~0.10.1",
    "lodash": "~3.7.0",
    "Faker": "~3.0.0",
    "datatables": "^1.10.11",
    "bootstrap": "4.0.0-alpha.2",
    "compass-mixins": "^1.0.2",
    "tether": "^1.2.0",
    "font-awesome": "^4.5.0",
    "select2": "^4.0.2",
    "select2-bootstrap-theme": "^0.1.0-beta.4",
    "pace": "^1.0.2",
    "dropzone": "^4.3.0",
    "tinymce": "^4.3.13",
    "moment": "^2.14.1",
    "dinosheets": "0.1.1",
    "plupload": "v2.1.8"
  },
  "resolutions": {
    "bootstrap": "4.0.0-alpha.2"
  }
}

sidebar.hbs

<span onmouseenter={{action 'openMenu' 'showLeftSlideMenu'}} {{action "linkClicked" "book_Apps"}}>{{#link-to "apps" id="book_Apps" class="nav-link"}}<span>Product Apps </span><img title="Book Apps" src="../../css/img/bookApps.png" class='iconClass' /> {{/link-to}}</span>

Route

import Ember from 'ember';
import authenticated from '../../mixins/authenticated';

export default Ember.Route.extend(authenticated, {
  beforeModel(transition) {
    return this._super(...arguments);
  },
  afterModel(model, transition) {
    return this._super(...arguments);
  },
  model() {
    return this.store.findAll('app');
  }
});

Everything happened only after recently rebuilding the project. The app which was rebuild 30days ago was still up and running in our production.

Any help would be really appreciable.

2

In this situation, I would go hunting for which of the dependencies updated recently, and downgrade to fix the problem.

This is why lockfiles are so important. If all your dependencies are locked down (via yarn.lock or package-lock.json), you won’t get blindsided by this kind of changes. I don’t think bower even has lockfiles, which is another good reason to move away from it.

3

Hi @ef4 Thanks a lot for your comment. yes, I did the same hunting since this is not the first time I am facing this issue. we found ember-compatibility-helpers:1.2.2 was released recently and which broke our build so we used npx resolutions to backport ember-compatibility-helpers. Even after using 1.2.1 the issue persist. same version working fine in our production since it was build 30Days ago.

I couldn’t find other libraries latest version. I have shared the packags.json and bower.json do you see anything suspicious?

4

You can’t really tell just by looking at package.json. It doesn’t reflect all the transitive dependencies that are deeper down. That’s why it’s different from a lockfile.

Maybe none of your direct dependencies changed at all, but one of them has a ^ dependency on something else that did a recent release.

If searching for what changed is too big, you will need to actually debug the problem, and that will eventually lead you to which package changed. For a start, right before clicking a link use Chrome devTools to enable “Pause on caught exceptions” and then click the link that doesn’t work and see if you hit some interesting breakpoints.

5

@ef4 Finally we identified all the XHR calls are failed to parse the response whereas “Fetch” works fine and we can able to load links :slight_smile: . Do you know the cause of this issue? It seems really weird.

Call to backend happens and I see 200 OK in network tab but still the response was not resolved by XHR or $.ajax so the call is getting stuck. Any help should be really appreciable.