Module.exports and es6 Import
React with babel. I have this confusion with imports and module.exports. I assume babel when converting the ES6 code to ES5 converts the imports and exports to require and module.exports respectively.
If I export a function from one module and import the function in another module, the code executes fine. But if I export the function with module.exports and import using "import" the error is thrown at runtime saying it is not a function.
I cooked up an example.
// Tiger.js
function Tiger() {
function roar(terrian){
console.log('Hey i am in ' + terrian + ' and i am roaing');
};
return roar;
}
module.exports = Tiger;
// animal.js
import { Tiger } from './animals';
var animal = Tiger();
animal("jungle");
I used babel with preset es2015 to transcompile it. This gives me the following error
Uncaught TypeError: (0 , _animals.Tiger) is not a function
But if I remove the module.exports = Tiger;
And replace it with export { Tiger };
It works fine.
What am I missing here??
EDIT: I am using browserify as the module bundler.
Solution 1:
export { Tiger }
would be equivalent to module.exports.Tiger = Tiger
.
Conversely, module.exports = Tiger
would be equivalent to export default Tiger
.
So when you use module.exports = Tiger
and then attempt import { Tiger } from './animals'
you're effectively asking for Tiger.Tiger
.
Solution 2:
If you would like to import:
module.exports = Tiger
you may use following construction:
import * as Tiger from './animals'
Then it will work.
Another option is changing the export as described by @Matt Molnar but it is only possible if you are the author of the imported code.
Solution 3:
When module.exports
is not set it points to an empty object ({}
). When you do module.exports = Tiger
, you are telling the runtime the object being exported from that module is the Tiger
object (instead of the default {}
), which in this case is a function.
Since you want to import that same function, the way to import is using the default import (import tiger from './tiger'
). Otherwise, if you want to use named import (import { tiger } from './tiger'
) you must change the module.exports
object or use export
keyword instead of module.exports
object.
Default import/export:
// tiger.js
module.exports = tiger;
// or
export default function tiger() { ... }
// animal.js
import tiger from './tiger';
Named import/export:
// tiger.js
module.exports = { tiger };
// or
module.exports.tiger = tiger
// or
export const tiger = () => { ... }
// or
export function tiger() => { ... }
// animal.js
import { tiger } from './tiger';