Mobiscroll.nav is not a function error

Gesture enabled responsive lists
1

I bought javascript component license [ Gesture enabled listview ]
and I downlaod it from [ download.mobiscroll.com ] after I check all checkbox ( cards forms gridlayout listview popup scrollview )

and I tried to use it with demo example [ Scrollview for Javascript ] after I setup what I downloaded.
but there are error, [ Uncaught TypeError: mobiscroll.nav is not a function ]

what is this error and how can I solve this error?

var categoryNav, contentView; // init categories navigation categoryNav = mobiscroll.nav('.md-category', { theme: 'ios', themeVariant: 'light', type: 'tab', onItemTap: function (event, inst) { contentView.navigate(document.querySelector('.' + event.target.getAttribute('data-page'))); } }); // init content scrollview contentView = mobiscroll.scrollview('.md-content', { theme: 'ios', themeVariant: 'light', layout: 1, paging: true, threshold: 15, cssClass: 'md-page', onAnimationStart: function (event, inst) { var selectedIndex = parseInt((-(event.destinationX / inst.contWidth)).toString(), 10), selectedItem = document.querySelectorAll('.md-category li')[selectedIndex]; if (!selectedItem.classList.contains('mbsc-ms-item-sel')) { categoryNav.navigate(selectedItem); } } }); // init content listview mobiscroll.listview('.md-list', { theme: 'ios', themeVariant: 'light', swipe: false, striped: true, enhance: true }); body, mbsc-page>.mbsc-page { margin: 0; padding: 0; height: 100%; overflow: visible; } .md-paging, .md-paging>div, .md-paging .md-page { height: 100%; padding: 0; overflow: hidden; } .md-paging .md-list-cont, .md-paging .mbsc-scv-item>.mbsc-lv-cont { -webkit-box-flex: 1; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; } .md-paging .mbsc-lv-img { pointer-events: none; border-radius: 2.8em; height: 2.8em; }
  • Pop
  • Rock
  • Jazz
  • Piano
  • Electric
<ul class="md-content mbsc-cloak">
    <li class="md-pop">
        <ul class="md-music-lv md-list mbsc-cloak">
            <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Adele_1x.png" />
                <h4>Hello</h4>
                <p>Adele</p>
            </li>
            <!-- Showing partial data. Download full source. -->
        </ul>

    </li>

    <li class="md-rock">
        <ul class="md-music-lv md-list mbsc-cloak">
            <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Elle_King_1x.png" />
                <h4>Ex's & Oh's</h4>
                <p>Elle King</p>
            </li>
        </ul>

    </li>

    <li class="md-jazz">
        <ul class="md-music-lv md-list mbsc-cloak">
            <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Jeff_Lorber_1x.png" />
                <h4>Get Up</h4>
                <p>Jeff Lorber Fusion</p>
            </li>
        </ul>

    </li>

    <li class="md-piano">
        <ul class="md-music-lv md-list mbsc-cloak">
            <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Rachmaninoff_1x.png" />
                <h4>Etudes Tableaux</h4>
                <p>Rachmaninoff</p>
            </li>
        </ul>

    </li>

    <li class="md-electric">
        <ul class="md-music-lv md-list mbsc-cloak">
            <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Major-Lazer_1x.png" />
                <h4>Lean On</h4>
                <p>Major Lazer & DJ Snake Featuring M0</p>
            </li>
        </ul>
    </li>
</ul>
2

Hi @hyeongrae_jo :wave:

Sorry about the trouble :wink:

This error occurred because the Navigation component was not included in your custom package.

The Download Page was fixed, now you should be able to download the Navigation component as well :wink:

Let me know if that solved this problem!

3

Hi,

I have the same issue. I went and double checked to see Navigation is selected in my download page and it is still not working. Please check and let me know.

Regards.

4

Hello @Walla_Balakrishnan :wave:

Sorry to hear that!

If you got the same mobiscroll.nav is not a function the problem should be the same.
This is error message occurs when a specific Mobiscroll component is not working, you can read more information in this article: Common errors and how to fix them | Mobiscroll Help Center - section 5.

Make sure to include and download the Navigation component as well and to use the latest downloaded package.

5

Was there a regression of this bug? I’m having the same issue with my downloaded custom-built package. The demo examples from the ScrollView example page doesn’t work, but the named imports do work.

Note: I only notice this on the custom download package. I tried downloading the package from the mobiscroll NPM server and everything worked as designed.

Sample Code:

import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

Error Received on running npm start (create-react-app script)

./src/exampleCode/sampleTable/SampleTable.js
Attempted import error: '@mobiscroll/react' does not contain a default export (imported as 'mobiscroll').

The Below Import does work when I tried it from the output of the mobiscroll command:

import {Eventcalendar} from '@mobiscroll/react'; /* or import any other component */
import '@mobiscroll/react/dist/css/mobiscroll.react.scss';
6

Hello @James_Alexander :wave:

This is not a bug, I just checked your download logs and the problem is the following:

  • you downloaded (custom built) the Mobiscroll v5, which doesn’t have a Navigation component. At the moment the Navigation component is only available with Mobiscroll v4. In this case if you want to use the v5 components with Navigation, you need to use the two versions (v4 and v5) together. Here you can find a step by step guide about how you can achieve that: Using Mobiscroll v4 alongside v5 | Mobiscroll Help Center.
  • then, when you installed Mobiscroll from NPM, you run this command: mobiscroll config react config command which installs the Mobiscroll v4. If you want to install v5 from NPM, you should use the mobiscroll config react --version=5 command.

Also, this article about what’s the difference between v4 and v5 should be useful:What's the difference between v4 and v5 | Mobiscroll Help Center.