React.lazy符合规范却报“需动态import()结果”警告怎么办？

你按React官方文档写的懒加载代码，在Parcel环境下触发了lazy: Expected the result of a dynamic import() call警告，但代码逻辑明明没问题？这是Parcel早期版本的兼容性问题，可按以下方式解决：

检查组件导出方式 #

React.lazy要求动态导入的模块必须提供默认导出。如果你的OtherComponent是用命名导出（比如export function OtherComponent() {}），需要调整import语句，手动指定默认导出：

const OtherComponent = lazy(() => 
  import('./OtherComponent').then(mod => ({ default: mod.OtherComponent }))
);

如果是默认导出（export default function OtherComponent() {}），跳过这一步，看下面的方案。

升级Parcel版本 #

这个警告是Parcel 1.x版本的已知bug，后续官方已经修复。直接升级到最新稳定版，就能解决这个识别错误的问题。

临时规避方案（无法升级时） #

如果暂时没法升级Parcel，可以给动态import加一层Promise包装，强制Parcel正确识别动态导入的模块结构：

const OtherComponent = lazy(() => Promise.resolve(import('./OtherComponent')));

原因说明 #

Parcel早期对动态import的处理逻辑和React.lazy的预期不匹配：它直接把动态导入的组件函数返回给了lazy，而不是返回包含default属性的模块对象，导致React.lazy误判输入不符合要求。

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