I am working on customizing the Magento 2 Blank theme and trying to add owl carousel however am getting this error

Uncaught TypeError: Cannot read property 'fn' of undefined
at :8888/pub/static/frontend/blank/blank_child/en_US/owl.carousel/owl.carousel.min.js:1
at :8888/pub/static/frontend/blank/blank_child/en_US/owl.carousel/owl.carousel.min.js:1
(index):479 Uncaught TypeError: $(...).owlCarousel is not a function
at (index):479
at Object.execCb (require.js:1650)
at Module.check (require.js:866)
at Module.<anonymous> (require.js:1113)
at require.js:132
at require.js:1156
at each (require.js:57)
at Module.emit (require.js:1155)
at Module.check (require.js:917)
at Module.enable (require.js:1143)

I have created a child theme of blank and placed the basic files in my app/design/frontend/blank/blank_child folder

I believe Jquery is already included in the blank theme in Magento 2.2.5? So I then created a require js file and put it in app/design/frontend/blank/web/requirejs-config.js

The contents of the file is:

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

 var config = {
map: {
    '*': {
        'rowBuilder':             'Magento_Theme/js/row-builder',
        'toggleAdvanced':         'mage/toggle',
        'translateInline':        'mage/translate-inline',
        'sticky':                 'mage/sticky',
        'tabs':                   'mage/tabs',
        'zoom':                   'mage/zoom',
        'collapsible':            'mage/collapsible',
        'dropdownDialog':         'mage/dropdown',
        'dropdown':               'mage/dropdowns',
        'accordion':              'mage/accordion',
        'loader':                 'mage/loader',
        'tooltip':                'mage/tooltip',
        'deletableItem':          'mage/deletable-item',
        'itemTable':              'mage/item-table',
        'fieldsetControls':       'mage/fieldset-controls',
        'fieldsetResetControl':   'mage/fieldset-controls',
        'redirectUrl':            'mage/redirect-url',
        'loaderAjax':             'mage/loader',
        'menu':                   'mage/menu',
        'popupWindow':            'mage/popup-window',
        'validation':             'mage/validation/validation',
        'welcome':                'Magento_Theme/js/view/welcome',
        'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs'
paths: {
    'jquery/ui': 'jquery/jquery-ui'
deps: [
config: {
    mixins: {
        'Magento_Theme/js/view/breadcrumbs': {
            'Magento_Theme/js/view/add-home-breadcrumb': true
 var config = {
              paths: {            
        'owlcarousel': "web/owl.carousel"
shim: {
    "web/owl.carousel.min": ["jquery"]

I then have the owl.carousel js files in a path that is app/design/frontend/blank/web/owl.carousel/

I have the owl.carousel css file located in app/design/frontend/blank/web/owl.carousel/assets/

  • In yourrequirejs-config.js try replacing the key owl.carousel/owl.carousel.min to match the one in paths owlcarousel
    – Sam
    Jun 12, 2019 at 20:57
  • I changed the shim section to be "web/owl.carousel.min": ["jquery"] Do I need to recompile and deploy? I am in dev mode
    – Jayreis
    Jun 12, 2019 at 21:11
  • Sorry if I was a bit misleading, what I mean was the shim line should become, "owlcarousel": ["jquery"] as the key under shim needs to be the same as under paths. I'd suggest referring to the answers in the following thread for implementing owl slider magento.stackexchange.com/questions/123727/…
    – Sam
    Jun 12, 2019 at 21:35
  • 2
    Thank you I followed the post on magento.stackexchange.com/questions/123727/ and that worked.
    – Jayreis
    Jun 12, 2019 at 22:23


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.