React项目使用expo-av播放视频时遇__DEV__未定义错误求助

核心原因 #

expo-av 是为 Expo 生态（Managed/Bare React Native 项目）设计的媒体模块，它依赖 Expo 运行时环境中默认存在的 __DEV__ 全局变量——这个变量用于标识开发/生产环境，但常规 React Web 项目（非 Expo 初始化的项目）并不会自动定义它，所以直接引入会触发变量未定义的错误。

可行解决方案 #

1. 手动注入 __DEV__ 环境变量 #

可以通过 Webpack 配置全局注入这个变量：

• 在项目的 webpack.config.js 中添加 DefinePlugin：

const webpack = require('webpack');

module.exports = {
  // 其他已有配置...
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
    }),
  ],
};

• 如果是 Create React App 项目，无法直接修改 Webpack 配置，可以使用 craco 或者 react-app-rewired 来覆盖配置，或者在 public/index.html 的 <head> 中添加全局变量定义：

<script>
  window.__DEV__ = '%NODE_ENV%' !== 'production';
</script>

2. 替换为更适配的媒体方案 #

你的场景是常规 React Web + Ionic 编译为应用，expo-av 并不是最优选择：

• 继续使用原生 <video> 标签：之前已经验证可用，Web 端兼容性好，Ionic 编译后也能正常工作。
• 使用 Capacitor 官方媒体插件 @capacitor/media：专门适配 Ionic/Capacitor 跨平台场景，支持 Web、iOS、Android，无需依赖 Expo 生态，更贴合你的项目架构。

兼容性说明 #

expo-av 并非仅支持安卓/iOS 模拟器，但它需要 Expo 提供的运行时环境支持。常规 React Web 项目没有集成 Expo 的 Webpack 配置（@expo/webpack-config），缺少必要的环境变量和模块适配，直接引入会出现各类运行时错误。如果一定要用 expo-av，需要将项目迁移到 Expo Bare Workflow 并配置 Expo Web 支持，但这会增加不必要的复杂度，不如选择更适配的方案。

内容的提问来源于stack exchange，提问作者Ilyès BEJIA