Topic: How are modules initialized?

TOL pro asked 6 months ago


Expected behavior Initialization of modules Actual behavior I am using the pro version os Standard MDB. The problem is that it is not yet clear to me how to import and activate mdb modules. The examples have some Javascript code like:

// Initialization for ES Users
import { Carousel, initMDB } from "mdb-ui-kit";
initMDB({ Carousel })

But i don't know where to perform theese calls. Are they commands to be called in npm? Or should i add them inside some js file?

It would be convenient if there was a complete example of how to create a project. Also, i can't trace any solid explanation on what is ES Mode.

Resources (screenshots, code snippets etc.)


Kamila Pieńkowska staff answered 6 months ago


This line is not neccessaty: <script type="text/javascript" src="assets/mdb/js/mdb.es.min.js" />

You should import es modules in the <script type="module"> tag as you do now.

Depending on the bundler you use mdb-ui-kit may be direction enough or you may need to point to mdb.es.min.js file there.


TOL pro answered 6 months ago


Lets say that i want to use the Carousel feature in a web page. The structure of the page is:

<!DOCTYPE html>
<html lang="en">
<head>
    <link
            rel="stylesheet"
            href="assets/mdb/css/mdb.min.css" />

    <!-- Google Fonts Roboto -->
    <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"/>
    <!-- MDB -->
    <link rel="stylesheet" href="assets/mdb/css/mdb.min.css" />

</head>
<body>
<!-- Start your project here-->
<div class="container">


<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel" data-mdb-carousel-init>
... 
...
...

</div>
<!-- Carousel wrapper -->


</div>
<!-- End your project here-->

<!-- MDB -->
<script type="text/javascript" src="assets/mdb/js/mdb.es.min.js" />
<script type="module">
    import { Carousel, initMDB } from "mdb-ui-kit";

    initMDB({ Carousel });
</script>
</body>
</html>

When i load the page, the Carousel module does not work and at the browser console i get the following error message:

mdb.es.min.js:5034 Uncaught SyntaxError: Unexpected token 'export'

I know i am missing something fundamental here since i have not deep experience on javascript. But please give me a hint in order to be able to use all the features of the pto version


Kamila Pieńkowska staff answered 6 months ago



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No