Topic: How are modules initialized?

TOL pro asked 2 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 1 month ago

This line is not neccessaty: <script type="text/javascript" src="assets/mdb/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 file there.

TOL pro answered 1 month 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">
            href="assets/mdb/css/mdb.min.css" />

    <!-- Google Fonts Roboto -->
    <!-- MDB -->
    <link rel="stylesheet" href="assets/mdb/css/mdb.min.css" />

<!-- 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>

<!-- Carousel wrapper -->

<!-- End your project here-->

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

    initMDB({ Carousel });

When i load the page, the Carousel module does not work and at the browser console i get the following error message: 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 2 months ago

Please insert min. 20 characters.


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



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