Ember.js项目导入@ember/application模块报错原因及解决方法

问题描述 #

在Ember.js项目中尝试从web-app/app路径导入@ember/application模块时，触发错误：

Uncaught Error: Could not find module `@ember/application`

将ember-source版本降级至3.24.7后错误消失，但使用更高版本时问题会复现。

环境规格参数 #

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"
  }
}

原因分析 #

• Ember 3.25+版本调整了模块解析逻辑，不再支持从项目根目录子路径（如web-app/app）导入框架核心模块
• 项目依赖的老旧插件（如ember-engines@0.5.8、ember-vendor-split@1.2.0）未适配高版本Ember的模块系统，导致路径解析冲突
• ember-cli与ember-source版本匹配，但依赖生态未同步升级，引发兼容性问题

可行解决办法 #

1. 修正导入路径 #

直接使用框架标准导入方式，无需添加项目根路径前缀：

// 错误写法
import Application from 'web-app/app/@ember/application';
// 正确写法
import Application from '@ember/application';

2. 升级适配高版本的依赖 #

• 将ember-engines升级至支持Ember 3.28+的版本（建议至少升级到0.8.x系列）
• 移除或替换与高版本Ember模块解析冲突的插件（如ember-vendor-split，可使用Ember内置的代码分割能力替代）

3. 清理缓存并重装依赖 #

执行以下命令清除缓存并重新安装所有依赖：

rm -rf node_modules bower_components dist tmp
npm install
bower install
ember serve --clear-cache

4. 添加模块别名配置（仅当必须保留旧导入路径时） #

如果无法修改大量导入代码，可在ember-cli-build.js中添加别名映射：

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    autoImport: {
      alias: {
        'web-app/app/@ember/application': '@ember/application'
      }
    }
  });
  return app.toTree();
};

内容的提问来源于stack exchange，提问作者Arun Kumar