这个问题是在服务器上丢失了RequestAnimationFrame功能。这个错误发生在Next.js尝试在SSR期间渲染组件时。不幸的是，没有polyfill等用于此目的，所以我决定使用Next.js动态导入具有动画功能的组件。
Next.js Official documentation
我自己的案例只是展示代码的外观：

import dynamic from 'next/dynamic';

const AutocompleteDropdown = dynamic(
  () => import(
    'myAwesomeLib/components/dropdown/autocomplete/AutocompleteDropdown'
  ),
  {
    ssr: false,
  }
);

字符串
现在您可以使用 AutocompleteDropdown 作为标准JSX组件

我正在用React Native Web和NextJS 12编写一个应用程序，在2021年我遇到了这个问题并修复了它，但现在我知道我的修复只针对Next Dev，因为它返回了Next Production Build。
解决方案详情：

• 没有动态导入（这也很有用，但是当有很多组件使用它时会很烦人）
• 使用RAF polyfill和Webpack ProvidePlugin。

需要注意的是，webpack 5的next.config.js在到达下一个入口点_documents.js和_app.js之前会首先检查代码。这意味着，您可以将polyfill放入这些入口点文件中，它仍然会引发RAF未定义的错误。您必须使requestAnimationFrame准备好进行配置检查。
开发方法，将工作在下一个开发只。安装RAF包https://www.npmjs.com/package/raf和在next.config.js添加代码：

const raf = require('raf');
raf.polyfill();

字符串
如果global和window对象没有requestAnimationFrame和cancelAnimationFrame函数，则会将其添加到global和window对象中。在我们的示例中，它会将其添加到NodeJS的global中。
但是这个解决方案在执行npm run dev时不起作用。我不知道为什么，如果有人知道为什么Next或Webpack 5从DEV到Production的行为不同，请告诉我。

完整解决方案：

使用webpack 5 https://webpack.js.org/plugins/provide-plugin/的ProvidePlugin配置。在根项目或任何你想要的地方创建一个文件作为模块使用，比如：raf.js：

// raf has no use on Server Side, use setImmediate
module.exports = setImmediate;

型
在next.config.js中，在webpack: () = {}中使用它，如下所示：

webpack: (config, options) => {
// console.log('fallback', config.resolve.fallback);
if (options.isServer) {
  // provide plugin
  config.plugins.push(
    new options.webpack.ProvidePlugin({
      requestAnimationFrame: path.resolve(__dirname, './raf.js'),
    }),
  );
}

型
现在，你可以调整你现有的配置逻辑了。通过这样做，在生产构建中，NextJS在服务器端注入了requestAnimationFrame函数，无论模块在哪里使用它。

Expo Web +复活解决方案

谢谢@KeitelDOG让我上路。
您应该npm install raf（requestAnimationFrame polyfill）和将这两行添加到根文件夹中的metro.config.js。默认情况下，metro.config.js不存在，因此您可能需要创建它。

const raf = require('raf') // days of work
raf.polyfill() // for these 2 lines 🥲

字符串