how to use external package

[kdstrides]

Let say i want to use axios or other packages and i install them either using NPM or YARN, how they will be used for theme development?

[blanklob]

I wouldn't actually recommend to use axios for Ajax, use fetch instead, but if you insist, all you need to do is install axios with
yarn add axiosthen import it in your base/src/scripts/base.js file, simple as that.

[kdstrides]

ohh well axios was just an example, but i need jQuery and Slick slider, and yes i tried doing that but somehow i noticed it was not working correctly, it just do following and on theme i am getting $ not defined error,

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var slick_carousel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! slick-carousel */ "./node_modules/slick-carousel/slick/slick.js");
/* harmony import */ var slick_carousel__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(slick_carousel__WEBPACK_IMPORTED_MODULE_1__);

Code i tried,

/*
 *  BASE/APP
 */

import $ from 'jquery'
import slick from 'slick-carousel'

[blanklob]

It's worked for me, I installed JQuery with yarn add jqueryand slick with yarn add slick-carousel it's worked well.
Check the Console log.

Code

/*
 *  BASE/APP
 */

// import './utils/utils.fetch'
// import './utils/utils.search'
// import './utils/utils.router'

import $ from 'jquery';
import slick from 'slick-carousel';

console.log('console.log(slick, $):', slick, $);

Screenshot

[kdstrides]

ummm very strange i did tried the same, but did not worked for me
let me try one more time and if issuer persist i shall post back.

[blanklob]

I saw the same issue here ,It's probably because you forgot to uncomment the vendors.js file in the layout/theme.liquid, you will find that the line that imports vendors.js is commented, so all you need to is uncomment it or copy below:

<!-- Start vendor third party libaries -->
<script src="{{- 'vendors.js' | asset_url -}}" defer></script>
<!-- End vendor third party libaries -->