升级Aurelia旧项目Webpack版本遇模块缺失错误求助

错误信息 #

ERROR in ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in 'C:\Users\bxc20\Desktop\VS\aspice\aspice-web-admin\Admin\node_modules\aurelia-bootstrapper-webpack\node_modules\aurelia-loader-webpack\dist\native-modules'
 @ ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js 134:23-64
 @ ./node_modules/aurelia-bootstrapper-webpack/dist/native-modules/aurelia-bootstrapper-webpack.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper aurelia-bootstrapper-webpack aurelia-polyfills aurelia-pal aurelia-pal-browser regenerator-runtime whatwg-fetch

ERROR in ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
Module not found: Error: Can't resolve 'main' in 'C:\Users\bxc20\Desktop\VS\aspice\aspice-web-admin\Admin\node_modules\aurelia-webpack-plugin\runtime'
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry ./src/main

解决方案 #

1. 统一Aurelia相关依赖版本 #

这类错误核心是Webpack版本与Aurelia插件版本不兼容，需确保所有Aurelia Webpack相关依赖版本匹配：

• 若升级到Webpack 5，需使用aurelia-webpack-plugin@^5.0.0、aurelia-bootstrapper-webpack@^5.0.0、aurelia-loader-webpack@^5.0.0
• 在package.json中更新依赖版本，示例：

  "devDependencies": {
    "aurelia-webpack-plugin": "^5.0.4",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "aurelia-bootstrapper-webpack": "^5.0.0",
    "aurelia-loader-webpack": "^5.0.0"
  }
  

• 删除node_modules、package-lock.json（或yarn.lock），重新执行npm install（或yarn install）
• 若存在嵌套依赖版本不一致问题，可通过resolutions强制统一版本（Yarn直接支持，NPM需安装npm-force-resolutions后在scripts中添加"preinstall": "npx npm-force-resolutions"）：

  "resolutions": {
    "aurelia-loader-webpack": "^5.0.0"
  }
  

2. 调整Webpack配置 #

• 移除多入口配置中手动添加的aurelia-webpack-plugin/runtime/empty-entry和aurelia-webpack-plugin/runtime/pal-loader-entry，新版aurelia-webpack-plugin会自动处理这些入口
• 确保webpack.config.js中插件配置正确，示例：

  const path = require('path');
  const { AureliaPlugin } = require('aurelia-webpack-plugin');
  
  module.exports = {
    entry: {
      main: './src/main.js'
    },
    plugins: [
      new AureliaPlugin({
        src: path.resolve(__dirname, 'src')
      })
    ],
    // 其他Webpack配置（module、resolve等）
  };
  

3. 检查启动文件（main.js） #

确保Aurelia启动代码符合新版规范，避免旧版API调用：

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import * as environment from '../config/environment.json';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

内容的提问来源于stack exchange，提问作者Brian Cornelius