开发模式下首次加载页面报TypeError: require.e is not a function错误求助

问题详情 #

开发模式下首次加载页面时，触发未处理的运行时错误：

Unhandled Runtime Error
TypeError: require.e is not a function

对应出错的代码片段：

8 | import {VideoType} from "../../component/VideoPlayer/Types";
   9 | 
> 10 | const Location = dynamic(() => import('../../component/Location').then((comp) => comp.Location), {
     |                           ^
  11 | ssr: false,
  12 | })

第二次刷新页面后问题自动消失，需解决该首次加载异常。

解决方案 #

针对Next.js动态导入导致的这类开发模式异常，可尝试以下几种有效解决方式：

• 修正动态导入的返回格式：Next.js的dynamic方法期望导入的模块返回包含default导出的对象，原写法直接返回组件导致代码拆分逻辑异常。调整代码为：

  const Location = dynamic(() => import('../../component/Location').then((comp) => ({ default: comp.Location })), {
    ssr: false,
  })
  

• 清理开发缓存：删除项目根目录下的.next文件夹，以及node_modules/.cache目录，之后重启开发服务器。开发模式下的缓存可能导致代码拆分的资源映射错乱，首次加载时无法找到require.e对应的chunk加载逻辑。

• 升级Next.js版本：若使用的是较旧版本的Next.js，这类动态导入的bug大概率已在后续稳定版中修复，直接升级到最新稳定版本即可。

• 临时关闭React Strict Mode排查：在next.config.js中关闭React Strict Mode（将reactStrictMode设为false），部分场景下Strict Mode的双重渲染机制会干扰动态导入的初始化流程。注意这仅作为临时排查手段，不建议长期关闭。

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