使用Expo运行Vue-Native项目提示找不到vue-native-scripts模块报错

解决方案 #

报错核心为两个原因：一是项目缺少vue-native-scripts依赖，二是你使用的Expo SDK 43版本与Vue-Native官方适配版本不兼容，按以下步骤逐一修复即可：

• 第一步：安装缺失依赖
  在项目根目录执行命令：

  npm install vue-native-scripts --save-dev
  

  安装完成后重新运行npm start验证问题是否解决。
• 第二步：处理Expo版本兼容问题
  若安装后仍报错，需降级Expo到适配版本：
  1. 卸载全局高版本expo-cli：npm uninstall --global expo-cli
  2. 安装适配的expo-cli版本：npm install --global expo-cli@5.4.12
  3. 重新初始化Vue-Native项目启动即可。
• 第三步：清理依赖缓存重装
  若仍报错，执行以下命令清理无效依赖后重新安装：

  rm -rf node_modules package-lock.json
  npm install --legacy-peer-deps
  

• 第四步：手动集成方案（备选）
  若上述方案均无效，直接手动将Vue-Native集成到空白Expo项目：
  1. 执行expo init <projectName>，选择空白托管工作流创建项目
  2. 进入项目目录执行：npm install vue-native-core vue-native-helper vue-native-scripts --save
  3. 根目录新建vueTransformerPlugin.js，写入：

     const vueNativeScripts = require("vue-native-scripts");
     const upstreamTransformer = require("metro-react-native-babel-transformer");
     module.exports.transform = function ({ src, filename, options }) {
       if (filename.endsWith(".vue")) {
         return vueNativeScripts.transform({ src, filename, options });
       }
       return upstreamTransformer.transform({ src, filename, options });
     };
     

  4. 修改metro.config.js指定上述自定义transformer
  5. 将App.js后缀改为App.vue，写入Vue-Native入口代码后重新启动即可。

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