使用Expo Web+Reanimated遇Metro错误：requestAnimationFrame未定义

问题背景 #

执行npx expo export -p web构建Expo Web应用时，Metro抛出requestAnimationFrame is not defined错误，仅在Expo SDK 49及以上版本出现，使用默认Metro配置，控制台调用栈无有效排查信息。

问题原因 #

Expo SDK49+切换为Metro作为Web构建工具，默认情况下Node.js环境不包含浏览器专属的requestAnimationFrame等API，构建过程中代码尝试调用该API时触发报错。

解决方案 #

方案1：添加raf polyfill并配置Metro #

• 安装raf polyfill包：

npm install raf --save-dev

• 在项目根目录创建/修改metro.config.js，将raf注入到Node环境：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 为Node环境添加requestAnimationFrame的polyfill
config.resolver.extraNodeModules = {
  ...config.resolver.extraNodeModules,
  requestAnimationFrame: require.resolve('raf/polyfill'),
};

module.exports = config;

• 在项目入口文件（如App.js或index.js）顶部导入polyfill：

import 'raf/polyfill';

方案2：通过Babel注入全局浏览器API #

• 安装babel-plugin-transform-inline-environment-variables：

npm install babel-plugin-transform-inline-environment-variables --save-dev

• 修改babel.config.js，添加全局变量注入配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'babel-plugin-transform-inline-environment-variables',
        {
          include: ['REQUEST_ANIMATION_FRAME'],
        },
      ],
      // 可选：添加完整的浏览器API polyfill
      ['module:react-app-polyfill', {
        targets: { browsers: ['>0.25%', 'not dead'] },
        corejs: 3,
      }],
    ],
  };
};

方案3：修改Metro的环境全局变量配置 #

直接在metro.config.js中声明全局API存在：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.environment = {
  ...config.environment,
  global: {
    ...config.environment.global,
    requestAnimationFrame: () => {},
    cancelAnimationFrame: () => {},
  },
};

module.exports = config;

验证 #

修改配置后，重新执行构建命令：

npx expo export -p web

若报错消失，说明配置生效。

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