React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object
The issue you have encountered was caused by mixing two different module systems which differ in the way they are resolved and implemented. CommonJS modules are dynamic and contrary to that ES6 modules are statically analyzable.
Tools like Babel transpile ES6 modules to CommonJS as for now because native support is not ready yet. But, there are subtle differences.
By using default export (exports default
) the transpiler emitted a CommonJS module with { default }
property as there can be named and default export alongside in ES6 module. Following example is perfectly valid ES6 module:
export default class Test1 { }
export class Test2 { }
This would result in { default, Test2 }
CommonJS module after transpiling and by using require
you get that object as a return value.
In order to import ES6 module's default export in CommonJS you must use require(module).default
syntax by the reasons mentioned above.
Debugging React.createElement: type is invalid errors
This error is very common when React tries to render a component when there is an issue with the imported module. Most of the time this is caused by missing export
in the module or issues with the path (relative paths are some kind of a joke) and without proper tooling, this may lead to serious hair pulling.
In this case, React couldn't render generic object {__esModule: true, default: function}
and just threw an error.
When using require
there is a possibility to just print out required module to see it's contents which may help to debug the issue.
As a side note, please don't mix CommonJS modules with ES6 modules unless you really need. import
/export
syntax is reserved for the ES6 modules. When using CommonJS modules, just use module.exports
and use require
to import them. In the future, most developers will be using standard module format. Until then, be careful when mixing them together.
Very often..
...it is as simple as:
const MyModule = require('./MyModule');
vs
const {MyModule} = require('./MyModule');