ES6 Import errors with React Router

Question

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. Reproducible steps as follows.

from a state where the app is working fine:
import { FieldArray } from 'react-final-form-arrays' to my HomePage
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. 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):

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.

Check the render method of 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

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?

Does the react-final-form-arrays have any dependancies it relies on like anything babel specific? Does the <FieldArray /> Component need to be a child of a react-final-form <Form /> component ? — Francis Leigh
I am not sure what you mean, there are dependencies of course but they should be installed automatically. and FieldArray breaks everything on import before even adding it to the page. — Azeli

Azeli Azeli · Accepted Answer · 2019-03-20T23:46:37

after banging head against wall for 3 hours, it was a versioning issue. npm install by default installed an older version of one of the dependencies than was needed. probably can close this question

ES6 Import errors with React Router

1 Answers