初始化Vue Native项目运行后出现Element type is invalid错误如何解决？

问题原因 #

Vue Native官方默认生成的项目模板仅适配iOS/Android移动端，内置依赖的原生组件未做Web端兼容，直接在Expo Web环境运行就会触发组件类型不匹配报错。

解决方案 #

方案1：仅运行移动端（无需修改配置，最快验证项目可用） #

直接启动iOS/Android模拟器，或者用Expo Go真机扫码运行移动端版本，即可正常启动，不会触发该报错。

方案2：适配Web端运行 #

• 第一步：检查版本兼容性，确保项目package.json中vue-native-scripts版本≥0.1.0，expo版本在44~46区间，版本不匹配先卸载重装对应版本依赖。
• 第二步：安装Web适配依赖，执行命令：

npm install @vue-native/web @expo/webpack-config@~0.17.4 -D

• 第三步：根目录新建vue.config.js，添加别名配置：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'react-native': '@vue-native/web'
      }
    }
  }
}

• 第四步：清除Expo缓存重启服务，执行命令：

expo start -c

启动后再选择Web运行即可正常加载项目。

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