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

Ember CLI
1

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.

I need a solution for this as soon as possible. Please help.

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.

I need a solution for this as soon as possible. Please help.

2

Can you provide the code that created the error? Or better: a reproduction?

Thanks!

3

Console error screenshot

Screenshot 2024-01-17 at 11.57.49 AM
Screenshot 2024-01-17 at 11.57.49 AM3020×196 42.9 KB

app.js

import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
  LOG_TRANSITIONS = true; // USED TO LOG TRANSITIONS OF THE ROUTE IN CONSOLE
	LOG_TRANSITIONS_INTERNAL = true; // USED TO LOG INTERNAL TRANSITIONS OF THE ROUTE IN CONSOLE
	engines =	// SHOW MAIN ROUTES EXTERNAL TO ENGINES
	{
  }
}

loadInitializers(App, config.modulePrefix);

@NullVoxPopuli

4

Could you provide more code, ideally the whole of it? I think it’s hard to find the error just from the app.js file.

5

To add, i wonder if an earlier error occurred and just broke the module loading within the bundle.

6

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!