简体繁体 English

ES6使用React Router导入错误

[英]ES6 Import errors with React Router

原文 2019-03-20 20:06:04 2 1 javascript/ reactjs/ react-final-form/ react-final-form-arrays

I am getting errors that are confusing enough that I have no idea where to look for solutions, and which are concerning because they seem to be hidden away deep in libraries. 我收到的错误非常令人困惑，以至于我不知道在哪里寻找解决方案，而这些问题却令人担忧，因为它们似乎隐藏在库的深处。
I am working with a boilerplate app ( react-boilerplate ) and a forms library ( react-final-forms , react-final-form-arrays ) -- and the errors and odd behavior is caused when importing. 我正在使用样板应用程序（ react-boilerplate ）和表单库（ react-final-forms ， react-final-form-arrays ）-导入时会导致错误和奇怪的行为。 Reproducible steps as follows. 可重复的步骤如下。

from a state where the app is working fine: 从应用正常运行的状态开始：
import { FieldArray } from 'react-final-form-arrays' to my HomePage import { FieldArray } from 'react-final-form-arrays'到我的主页
On hot reload, re-render of HomePage fails, so header and footer are displayed but HomePage doesn't re-render, but there are NO errors on console. 在热重载时，HomePage的重新呈现失败，因此显示了页眉和页脚，但是HomePage并未重新呈现，但是控制台上没有错误。 same result if refresh page 如果刷新页面，结果相同
Navigate to another page and then navigate back to HomePage -- now using router -- and that throws the error(note the import isn't being used on page yet): 导航到另一个页面，然后导航回HomePage（现在使用路由器），这会引发错误（请注意，尚未在页面上使用导入）：

react.development.js?72d0:207 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. react.development.js？72d0：207警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

Check the render method of LoadableComponent . 检查LoadableComponent的渲染方法。 in LoadableComponent (created by Route) in Route (created by App) in Switch (created by App) in div (created by Context.Consumer) in StyledComponent (created by App__AppWrapper) in App in Router (created by ConnectedRouter) in ConnectedRouter (created by Connect(ConnectedRouter)) in Connect(ConnectedRouter) in IntlProvider (created by LanguageProvider) in LanguageProvider (created by Connect(LanguageProvider)) in Connect(LanguageProvider) in Provider 在Switch（由App创建）在Route（由App创建）的LoadableComponent（由Route创建）中（由App创建）在div（由Context.Consumer创建）在div（由App__AppWrapper创建）在Router的App（由ConnectedRouter创建）在ConnectedRouter（已创建）通过IntlProvider中的Connect（ConnectedRouter）中的Connect（ConnectedRouter））（由LanguageProvider创建），LanguageProvider中的Connect（Connected（LanguageProvider）创建），Provider中的Connect（LanguageProvider）中的Connect

remove import, everything back to normal. 删除导入后，一切恢复正常。

The questions around curly brace imports are usually answered that its as simple as the difference between named and default imports. 关于花括号导入的问题通常被回答为，它与命名导入和默认导入之间的区别一样简单。 something clearly is more complicated here. 显然，这里的事情更加复杂。 (I have tried both, but its definitely supposed to be named). （我都尝试过，但是绝对应该命名）。 Is the problem related to loading scripts? 问题与加载脚本有关吗？

1 个解决方案

after banging head against wall for 3 hours, it was a versioning issue. 撞墙撞了3个小时后，这是一个版本控制问题。 npm install by default installed an older version of one of the dependencies than was needed. 默认情况下，npm install安装的依赖项之一的旧版本比需要的版本要旧。 probably can close this question 可能可以解决这个问题