Why is One of my Dev Dependencies not working?

Ok, so I decided to rip all my cdn's out of my header file and import the various JS packages into L8 using npm. One of those is called bootstrap-datepicker and I can not get it to load into my application.

Ok - so I downloaded it and NPM has updated my packages.json file:

"dependencies": {
        "bootstrap-datepicker": "^1.9.0",
        "moment": "^2.29.1",
        "vue": "^2.6.12"
    }

I have run npm install, and if I look into the node_modules folder I can see it there.

I also added require('moment') in my resources/app.js file

I have run npm run development

I also have in my header a link: <script src="{{asset('bootstrap-datepicker')}}" defer></script>

Nevertheless, when I run my page I am getting a 404.

Any ideas where I am going wrong?

Many thanks !

sr57

5 years ago

Level 39

Hi @vincej

1-Have a look to the error in your browser dev

2-If you think, it's your boorstrap js file, have a look in your brower source for this html page and check if the link points to the correct path

vincej

5 years ago

Level 15

Thank you for your response! I'm not sure I follow.

The only thing my browser dev says is

Failed to load resource: the server responded with a status of 404 (Not Found)

Bootstrap js does not usually need a link in your header. I believe MIX folds it into app.js
As stated above, I also have in my header a link: <script src="{{asset('bootstrap-datepicker')}}" defer></script>

apex1

5 years ago

Best Answer

Level 12

The asset() helper is for your own assets (.css/.js/etc) that webpack/mix will compile to your public folder. You shouldn't be using it to bring in third party libraries.

If you don't want to use a cdn, then you would import it in your bootstrap.js or app.js file and then, if you wish, bind it to the global window object.

Something like this (in bootstrap.js or app.js):

window.bootstrapDatePicker = require('bootstrap-datepicker');

You wouldn't need a script tag for 'bootstrap-datepicker' since mix will compile all the packages imported/required in your app.js file.

vincej

5 years ago

Level 15

Perfect ! It is working nicely! Thank you ! Perhaps I need to reread the docs. However I have watched Jeffrey's tutorial on MIx. I am totally new to NPM and Mix, having always previously just used CDN's. Now I feel it is time to grow a little :o)

However, importing bootstrap-datepicker off of NPM did not bring down the css as part of the package - odd. So all I could think of doing was going to the CDN, pulling down the minified css and sticking in my public folder with a link in my header. That works - but, question: is that what you would have done?

For me things are still not clear how to import stuff. Things like JQuery, Twitter Bootstrap, Axios just work out of the box, where as imported packages give me a headache. It is still unclear to me the difference between bootstrap.jsand app.js, they appear to be used interchangeably.

Thanks again ! Best answer reward.

Please or to participate in this conversation.