Importing an old ES5 module for use in a ReactJS component

Question

I\'m trying to use an ES5 module in a new ReactJS application and I\'m struggling to understand how to correctly import that module, such that the main function within it ca

Answer 1

You have to give it an identifier:

import datepicker from 'air-datepicker';

Answer 2

Well, that's a day of my life that I'm never getting back!

The problem was caused by Babel import ordering. Import statements are hoisted - meaning they are evaluated first, before any other code (i.e. my window. assignments) are executed. This is 'by design' in babel.

The only way to avoid Babel hoisting, from what I can tell, is to avoid 'import' altogether and use require instead.

So, in the following order the global $ will have been set when you come to require air-datepicker. If you try to 'import' air-datepicker it won't work because Babel will evaluate all of your import statements before executing the window. assignment.

import $ from 'jquery';
window.$ = $;
require('air-datepicker');

There are one or two other approaches that also would have worked, but they are all less desirable because they need you to manually configure webpack - i.e. 'ejecting' the create-react-app config and going it alone...

Use the imports-loader;

// only works if you disable no-webpack-loader-syntax
require("imports?$=jquery!air-datepicker");

or, use the ProvidePlugin, making the module available for all modules.

Answer 3

If you're using create-react-app, you should be able to import it like

import 'air-datepicker/dist/css/datepicker.min.css';
import 'air-datepicker';

If you added your jQuery using <script> tag in your HTML, you need to add this line before the air-datepicker imports

const $ = window.jQuery;
const jQuery = window.jQuery;

If you added jQuery using npm install, you'll have to add these following lines

import $ from 'jquery';
import jQuery from 'jquery';
window.$ = $;
window.jQuery = jQuery;
//... air-datepicker imports

Make sure to initialize it inside your componentDidMount or somewhere you're sure that the element has been mounted already.

componentDidMount() {
    $('#my-element').datepicker();
}

render() {
    return <div>
        <input 
            id="my-element" 
            type='text' 
            className="datepicker-here" 
            data-position="right top" />
    </div>
}