NativeScript Vue从7迁移至8.5.3（Android 8.5.0）构建报错求助

问题概述 #

将NativeScript从7.x迁移至8.5.3（配套Android 8.5.0、webpack 5.0.14）后，构建出现以下错误：

System.err: TypeError: Cannot read properties of undefined (reading 'default')
System.err: File: (file: src/webpack:/app-name/webpack/bootstrap:27:0)
System.err:
System.err: StackTrace:
System.err: MyDocumentsPage(file:///data/data/com.some.testId/files/app/bundle.js:25195:112)
System.err: at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ActionLabel.vue?vue&type=script&lang=js&(file: src/webpack:/app-name/src/components/ActionLabel.vue:30:19)

解决方案步骤 #

1. 清理依赖并重新安装 #

• 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件
• 执行安装命令：

  npm install
  # 或使用yarn
  yarn install
  

• 清理NativeScript缓存：

  ns clean
  

2. 检查Vue组件的导入与导出 #

定位到ActionLabel.vue第30行，检查MyDocumentsPage的导入逻辑：

• 确保导入语句正确，例如：

  import MyDocumentsPage from '../path/to/MyDocumentsPage.vue'
  

• 确认MyDocumentsPage.vue文件中存在默认导出：

  export default {
    // 组件配置项
  }
  

3. 移除webpack配置中可能冲突的别名 #

当前webpack配置中手动添加的Node.js核心模块别名，可能与NativeScript 8.x内置的webpack配置冲突，建议暂时移除这些别名，修改后的webpack.config.js如下：

module.exports = (env) => {
  webpack.init(env);

  // 移除所有手动添加的resolve.alias配置

  return webpack.resolveConfig();
};

NativeScript 8.x的webpack工具链已内置必要的polyfill，无需手动配置这些别名。

4. 显式安装匹配版本的vue-loader #

nativescript-vue 2.9.3依赖vue-loader 15.x版本，需显式添加到devDependencies：

npm install vue-loader@15.9.8 --save-dev
# 或使用yarn
yarn add vue-loader@15.9.8 --dev

5. 验证模板编译器版本一致性 #

确保nativescript-vue-template-compiler的版本与nativescript-vue完全一致，当前配置中两者均为~2.9.3是正确的，重新安装后可检查package-lock.json确认版本无差异。

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