Trying to Install a NPM Package That is Ultimately Not Found

I'm trying to start using some JQuery plugins from the NPM website (the specific one is here: https://www.npmjs.com/package/eonasdan-bootstrap-datetimepicker). I've installed it with:

npm install --save eonasdan-bootstrap-datetimepicker

And then I included it by adding the following to:

bootstrap.js:

window.datetimepicker = require('eonasdan-bootstrap-datetimepicker')($);

app.scss:

@import "node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker";

And then adding the example from their site to a blade view:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

The result is nothing happens. No errors or anything else in the console, absolutely nothing. I can confirm this works with a vanilla HTML page, so it's something to do with Laravel Elixir. What am I doing wrong?

ejdelmonico

9 years ago

Level 53

Reference the other posts about this same subject. You need to add an alias in webpack config or use the script-loader package. In example, to add jQuery-ui:

mix.webpackConfig({
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
});

Kirkland

9 years ago

Level 2

so jquery-ui would ultimately become the function name and the value is the path to the package? Would I need to include more than app.js?

Please or to participate in this conversation.