react.js - react lazy build之后运行报错？

Question

const DomElement = lazy(() => import(@/pages/${item.route}))
<Suspense><DomElement /> </Suspense>
build 之后会报错：Cannot assign to read only property '_status' of object '#<Object>'，
但是dev是可以得

Answer 1

你遇到的问题是在使用React的懒加载功能后，构建（build）应用时出现了错误。具体来说，这个错误提示“Cannot assign to read only property '_status' of object '#<Object>'”通常是由于尝试修改一个只读属性导致的。

然而，由于你只提供了一部分代码，我无法完全确定问题的原因。但以下是一些可能的原因和解决方案：

1. 确保item.route存在且正确：你的代码中使用了item.route来动态导入模块。请确保item对象在组件被渲染时总是包含一个有效的route属性，并且该属性的值是正确的。
2. 检查懒加载的组件：请确保你尝试懒加载的组件没有错误，并且没有使用任何可能导致这个问题的代码。例如，不要在组件内部修改任何只读属性。
3. 使用默认导入代替动态导入：如果可能的话，你可以尝试使用默认导入来替代动态导入，看看是否仍然会出现这个错误。例如：

const DomElement = React.lazy(() => import('@/pages/default'));

4. 检查构建配置：确保你的构建配置（例如Webpack）支持React的懒加载功能。如果你使用的是Create React App，那么它应该已经为你配置好了。如果你自己配置了Webpack，请确保你使用了正确的loader和插件。
5. 清除旧的构建缓存：有时候，旧的构建缓存可能会导致问题。尝试清除构建输出目录（例如build或dist），然后重新构建应用。
6. 检查其他依赖项和插件：确保你使用的所有依赖项和插件都是最新的，并且彼此兼容。有时，版本冲突可能会导致奇怪的问题。

如果以上建议都不能解决你的问题，建议你提供更多的代码和上下文信息，以便我能更准确地诊断问题所在。