How better to debug problems during ember version migration?

Hey, everyone!

I’m trying to migrate my ember to the new node and ember version. For this, I updated packages from

 "devDependencies": {
    "@ember-intl/cp-validations": "^4.0.1",
    "@ember/jquery": "^1.1.0",
    "@ember/render-modifiers": "^1.0.2",
    "@fortawesome/ember-fontawesome": "^0.2.2",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "babel-eslint": "^10.1.0",
    "bootstrap-sass": "^3.4.1",
    "broccoli-asset-rev": "^3.0.0",
    "ember-ajax": "^3.1.0",
    "ember-auto-import": "^1.6.0",
    "ember-bootstrap": "^2.8.1",
    "ember-cli": "^3.17.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.19.0",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-dotenv": "^2.2.3",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-fastboot": "^2.2.2",
    "ember-cli-htmlbars": "^4.3.1",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-moment-shim": "^3.8.0",
    "ember-cli-notifications": "^6.3.2",
    "ember-cli-one-script": "0.0.1",
    "ember-cli-qunit": "^4.4.0",
    "ember-cli-sass": "^7.2.0",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^3.0.0",
    "ember-cli-update": "^0.54.6",
    "ember-composable-helpers": "^4.0.0",
    "ember-cp-validations": "^4.0.0-beta.10",
    "ember-cropperjs": "^0.8.0",
    "ember-data": "^3.17.0",
    "ember-data-storefront": "^0.18.0",
    "ember-decorators": "^6.1.1",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.0.1",
    "ember-file-upload": "^2.7.1",
    "ember-infinity": "^1.4.9",
    "ember-intl": "^5.5.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-modal-dialog": "^3.0.0-beta.4",
    "ember-moment": "^8.0.0",
    "ember-page-title": "^6.0.3",
    "ember-phoenix": "1.0.3",
    "ember-phone-input": "^5.2.1",
    "ember-power-select": "^4.1.0",
    "ember-resolver": "^8.0.0",
    "ember-route-action-helper": "^2.0.8",
    "ember-simple-auth": "^3.0.0",
    "ember-source": "^3.18.0",
    "ember-truth-helpers": "^2.1.0",
    "eslint-plugin-ember": "^8.14.0",
    "liquid-fire": "^0.31.0",
    "loader.js": "^4.7.0",
    "torii": "^0.10.1",
    "fastboot-app-server": "3.0.0"
  }  

to this

"devDependencies": {
    "@babel/core": "^7.23.9",
    "@ember-intl/cp-validations": "^6.0.0",
    "@ember/jquery": "^1.1.0",
    "@ember/render-modifiers": "^2.1.0",
    "@fortawesome/ember-fontawesome": "^2.0.0",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@glimmer/component": "^1.1.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-polyfill-corejs3": "^0.9.0",
    "bootstrap": "^5.1.1",
    "broccoli-asset-rev": "^3.0.0",
    "ember-ajax": "^5.1.2",
    "ember-auto-import": "^2.7.2",
    "ember-bootstrap": "^5.1.1",
    "ember-cli": "^3.28.6",
    "ember-cli-app-version": "^6.0.1",
    "ember-cli-babel": "^8.2.0",
    "ember-cli-dependency-checker": "^3.3.2",
    "ember-cli-dotenv": "^2.2.3",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-fastboot": "^4.1.2",
    "ember-cli-htmlbars": "^4.3.1",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-moment-shim": "^3.8.0",
    "ember-cli-notifications": "^9.0.0",
    "ember-cli-one-script": "0.0.1",
    "ember-cli-sass": "^11.0.1",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-uglify": "^3.0.0",
    "ember-cli-update": "^2.0.1",
    "ember-composable-helpers": "^5.0.0",
    "ember-cp-validations": "^6.0.0",
    "ember-cropperjs": "^0.9.6",
    "ember-data": "^3.28.13",
    "ember-data-storefront": "^0.18.1",
    "ember-decorators": "^6.1.1",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.0.1",
    "ember-file-upload": "^2.7.1",
    "ember-infinity": "^2.3.0",
    "ember-intl": "^5.7.2",
    "ember-load-initializers": "^2.1.2",
    "ember-modal-dialog": "^3.0.3",
    "ember-moment": "^10.0.0",
    "ember-page-title": "^6.0.3",
    "ember-phoenix": "1.0.3",
    "ember-phone-input": "^5.2.1",
    "ember-qunit": "^8.0.2",
    "ember-resolver": "^8.0.3",
    "ember-route-action-helper": "^2.0.8",
    "ember-simple-auth": "^3.0.0",
    "ember-source": "^3.28.6",
    "ember-truth-helpers": "^4.0.3",
    "eslint-plugin-ember": "^8.14.0",
    "fastboot-app-server": "4.1.2",
    "liquid-fire": "^0.31.0",
    "loader.js": "^4.7.0",
    "sass": "^1.70.0",
    "torii": "^0.10.1",
    "webpack": "^5.90.1"
  }

Fortunately, I can build app and even see the results in a browser. But for some reason, some logic doesn’t work without any error or notification.

For test purposes, I removed all existing code from the application route and left only one action in

import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    refreshRoute() {
      console.log('Test')
      alert('Test')
    }
  }
});

template

<button type="button" class="btn btn-default" {{action "refreshRoute"}}>Test</button>

As a result I can’t see any binding and action doesn’t work

<button class="btn btn-default" type="button">Test</button>

The only errors I see in console:

validator.js:693 Uncaught Error: The `@glimmer/validator` library has been included twice in this application. It could be different versions of the package, or the same version included twice by mistake. `@glimmer/validator` depends on having a single copy of the package in use at any time in an application, even if they are the same version. You must dedupe your build to remove the duplicate packages in order to prevent this error.
    at Module.callback (validator.js:693:1)
    at Module.exports (loader.js:106:1)
    at Module._reify (loader.js:143:1)
    at Module.reify (loader.js:130:1)
    at Module.exports (loader.js:104:1)
    at Module._reify (loader.js:143:1)
    at Module.reify (loader.js:130:1)
    at Module.exports (loader.js:104:1)
    at requireModule (loader.js:27:1)
    at experimental-render-mode-rehydrate.js:4:1

Uncaught Error: Could not find module `front/services/store` imported from `(require)`
    at missingModule (loader.js:247:1)
    at findModule (loader.js:258:1)
    at requireModule (loader.js:24:1)
    at ModuleRegistry.get (index.js:24:1)
    at Class._extractDefaultExport (index.js:380:1)
    at Class.resolveOther (index.js:109:1)
    at Class.resolve (index.js:155:1)
    at resolve (index.js:945:1)
    at Registry.resolve (index.js:613:1)
    at has (index.js:958:1)

So I have no idea how to debug it and figure out why some functionality doesn’t work. Maybe fixing the problem above will help to resolve other problems. Ready to add any additional debug or other information

The second error looks like it’s coming from ember data storefront so you could try removing that package and see what happens.

The first one I’m not sure on but I’d check your package manager lockfile to figure out if you do have two versions of glimmer/validator in there and if so what packages require it. It may be as simple as adding a resolution (npm, yarn) or override (pnpm) although ideally you figure out why and can massage your dependencies accordingly instead.

If you run npm list @glimmer/validator (adjust as appropriate for your package manager of choice) at the terminal/command prompt of your project folder it should tell you why this package is included. Until you fix those errors I would say all bets are off.

I am running Ember 3.16 and my output from this command is:

myproject@0.0.0 C:\git\myproject -- @glimmer/tracking@1.1.2 @glimmer/validator@0.44.0

I suspect you might have an add-on that is pulling in a different version of that package.