Uncaught Error: Could not find module `@ember/application` imported from `web-app/app`

Question

Why am I encountering the error 'Uncaught Error: Could not find module @ember/application ' when trying to import it from 'web-app/app' in my Ember.js project?

Specs:

npm: 6.14.5
node: v14.4.0
ember-cli: 3.28.6
os: macOS Monterey, version: 12.7.1

package.json

"devDependencies": {
    "@ember/test-helpers": "^2.6.0",
    "@glimmer/component": "^1.0.4",
    "@glimmer/tracking": "^1.0.4",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^1.12.0",
    "ember-cli": "~3.28.6",
    "ember-cli-app-version": "^5.0.0",
    "ember-cli-babel": "^7.26.10",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-htmlbars": "^5.7.2",
    "ember-cli-image-cropper": "0.0.14",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-less": "^3.0.1",
    "ember-cli-moment-shim": "^3.6.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-string-helpers": "^1.9.0",
    "ember-cli-terser": "^4.0.1",
    "ember-copy": "^2.0.1",
    "ember-data": "~3.28.6",
    "ember-engines": "^0.5.8",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.1.1",
    "ember-link-action": "0.0.37",
    "ember-load-initializers": "^2.1.2",
    "ember-m-css-loader": "^2.0.0",
    "ember-m-js-loader": "^2.0.0",
    "ember-moment": "^7.6.0",
    "ember-page-title": "^6.2.2",
    "ember-qunit": "^5.1.5",
    "ember-resolver": "^8.0.3",
    "ember-script-loader": "^0.2.0",
    "ember-sortable": "^1.9.4",
    "ember-source": "~3.28.8",
    "ember-spectrum-color-picker": "^0.8.1",
    "ember-spreadsheet-export": "^0.6.0",
    "ember-template-lint": "^3.15.0",
    "ember-wormhole": "^0.5.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-ember": "^10.5.8",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-qunit": "^6.2.0",
    "liquid-fire": "^0.31.0",
    "loader.js": "^4.7.0",
    "loading-svg": "^1.0.0",
    "moment": "2.29.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "qunit": "^2.17.2",
    "qunit-dom": "^1.6.0"
  },
"dependencies": {
    "@ember/jquery": "^2.0.0",
    "@ember/optional-features": "^2.0.0",
    "dompurify": "^1.0.2",
    "ember-cli-node-modules-to-vendor": "^0.2.0",
    "ember-cli-preprocess-registry": "3.1.2",
    "ember-cli-terser": "^4.0.2",
    "ember-data-change-tracker": "^0.10.1",
    "ember-vendor-split": "^1.2.0",
    "html2canvas": "^1.4.1",
    "intl-tel-input": "18.2.1",
    "jquery": "^3.1.1",
    "latest-version": "^3.1.0",
    "lodash": "^4.16.4",
    "moment-timezone": "^0.5.14"
  }

bower.json

{
  "name": "web-app",
  "devDependencies": {
    "jquery-ui": "^1.12.1"
  }
}

Note: After downgrading the ember-source version to 3.24.7, the issue was resolved and everything has been working fine. However, it is important to note that using higher versions may result in the same issue occurring again.

Answer 1

I found a solution to the problem. The issue was caused by a dependency called ember-vendor-split listed in my package.json. I removed that package from the dependencies, and everything is working fine now. Thanks for all your help, everyone!