Import JavaScript file and call functions using webpack, ES6, ReactJS

Question

Trying to do something I would think would be very simple. I would like to import an existing JavaScript library and then call it's functions. So for example I would like to import blah.js and then call blah().

import React from 'react'; import {blah} from 'blah/js/blah.js';  class MyClass extends React.Component {     constructor() {         super();     }      componentDidMount() {         window.addEventListener('resize', this.handleResize);     }      componentWillUnmount() {         window.removeEventListener('resize', this.handleResize);     }      handleResize() {         blah.blah();     }      render() {           ....     } }  export default MyClass; 

Just wondering what magical combination of things I have to do to make this work. Maybe I'm just missing the point. The example gives the error "TypeError: _blah.blah is undefined".

Answer 1

Named exports:

Let's say you create a file called utils.js, with utility functions that you want to make available for other modules (e.g. a React component). Then you would make each function a named export:

export function add(x, y) {   return x + y }  export function mutiply(x, y) {   return x * y } 

Assuming that utils.js is located in the same directory as your React component, you can use its exports like this:

import { add, multiply } from './utils.js'; ... add(2, 3) // Can be called wherever in your component, and would return 5. 

Or if you prefer, place the entire module's contents under a common namespace:

import * as utils from './utils.js';  ... utils.multiply(2,3) 

Default exports:

If you on the other hand have a module that only does one thing (could be a React class, a normal function, a constant, or anything else) and want to make that thing available to others, you can use a default export. Let's say we have a file log.js, with only one function that logs out whatever argument it's called with:

export default function log(message) {   console.log(message); } 

This can now be used like this:

import log from './log.js'; ... log('test') // Would print 'test' in the console. 

You don't have to call it log when you import it, you could actually call it whatever you want:

import logToConsole from './log.js'; ... logToConsole('test') // Would also print 'test' in the console. 

Combined:

A module can have both a default export (max 1), and named exports (imported either one by one, or using * with an alias). React actually has this, consider:

import React, { Component, PropTypes } from 'react';