Can I use unpkg or browserify to include single NPM packages in a frontend project?

Question

So I'm working with JS on the frontend, building something for a client. Details aren't super important except that I do not have access to node.

I'm using unpkg to include various NPM packages in the browser (like React/ReactDOM/Babel for instance). These packages have a UMD build so they work out of the box.

However, there are a few packages I'd like to use that do not have a UMD build (namely react-dates or react-datepicker). I've tried serving different files via unpkg and referencing the exported modules. Since they don't have UMD builds, I'll either get an error module is not defined which makes sense, or that the module I'm referencing DatePicker is not defined.

So I thought maybe I could build a single file with browserify but I've never used it before and any docs I could find are lacking. Heres what I did

var DatePicker = require("react-dates");

In a file called test.js and then:

browserify test.js -o bundle.js

Output that, upload it to the client assets, reference it like:

<script src="/js/bundle.js"></script>

But var DatePicker = require("DatePicker") throws error require is not defined (I thought that was the point of browserify?) and console.log(DatePicker) throws is not defined as well.

At this point I'm at a loss. I'm being stubborn but I really really just want to use a react datepicker and avoid adding jQuery to this project for the sole purpose of a datepicker. As far as I can tell unpkg is not an option but I feel like browserify could work and I'm just doing something wrong.

Any help is greatly appreciated!

Answer 1

You don't have to do this, you can find the needed files in the dist folder (New folder\node_modules\react-datepicker) after you "npm install react-datepicker" within a folder, but be sure you have a package file into that, otherwise the install won't work.

The files should look like this

EDIT:

The requirejs code that you need is

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

<script>
    requirejs.config({
        paths: {
            'react': 'https://unpkg.com/[email protected]/dist/react',
            'react-dom': 'https://unpkg.com/[email protected]/dist/react-dom',
            'prop-types': 'https://unpkg.com/[email protected]/prop-types',
            'react-onclickoutside': 'https://unpkg.com/[email protected]/dist/react-onclickoutside',
            'react-popper': 'https://unpkg.com/[email protected]/dist/react-popper',
            'moment': 'https://unpkg.com/[email protected]/moment',
            'datepicker': 'https://unpkg.com/[email protected]/dist/react-datepicker'
        }
    });

    requirejs(['react', 'react-dom', 'prop-types', 'react-onclickoutside', 'react-popper', 'moment', 'datepicker'], function(React, ReactDOM, PropTypes, onClickOutside, Popper, moment, DatePicker) {
        ReactDOM.render(
            React.createElement('p', {}, 'Hello, World!'),
            document.getElementById('root')
        )
    });

but as far as I got, datepicker requested for "module" which is not defined, this can be the same problem as here. I will investigate more about this issue.