Import javascript in html with npm

Question

I am trying to add this github component to my project. I followed the instruction to use npm

npm install pikaday --save

and the pikaday and moment modules are in the node module folder, but when I run my html file:

<body>
<input type="text" id="datepicker" value="9 Jun 2016">
<script src="pikaday.js"></script>
<script src="moment.js"></script>
<script>
    var Pikaday = require('pikaday')
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        onSelect: function() {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
</script>
</body>

I got the following error:

GET http://localhost:3000/pikaday.js 
(index):14 GET http://localhost:3000/moment.js 
(index):17 Uncaught ReferenceError: Pikaday is not defined
    at (index):17

I change the path to

<script src="/node_modules/pikaday/pikaday.js"></script>

but got the same error

you need to use a module bundler like webpack or browserify to load the modules — karthick
– karthick, Commented Jun 1, 2017 at 21:38

Johnsons Gaming · Accepted Answer · 2017-06-01 23:15:23Z

3

Your going to need to make that available as a static file. If you're using express:

app.use('/static/pikaday/pikaday.js', express.static('./node_modules/pikaday/pikaday.js')

Then in your html:

<script src="/static/pikaday/pikaday.js"></script>

answered Jun 1, 2017 at 23:15

Johnsons Gaming

1014 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafael Gonçalves · Accepted Answer · 2017-06-01 21:34:40Z

0

As far as I know is if you'll use by npm, you'll need to use other framework like webpack to build once javascript file with your whole js code, because the node_modules dir should not be deployed to your server.

The snippet var Pikaday = require('pikaday') doesn't work in browsers, only over the node.js server.

if you don't want to build a bundle with your js, you may just download the files and configure into your assets

answered Jun 1, 2017 at 21:34

Rafael Gonçalves

13 bronze badges

Collectives™ on Stack Overflow

Import javascript in html with npm

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related