How are modules initialized?

Topic: How are modules initialized?

TOL pro asked 1 month 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.)

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 0 Best answer

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.

Add comment

TOL pro answered 1 month ago

0 0 Best answer

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

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

</head>
<body>

<div class="container">

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

</div>

</div>

<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>
</code></pre>

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

<p>mdb.es.min.js:5034 Uncaught SyntaxError: Unexpected token 'export'</p>

<p>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</p>

Please insert min. 20 characters.

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

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 4 Best answer

Here we explain difference between ES and UMD import https://mdbootstrap.com/docs/standard/getting-started/migration-guide/#section-javascript

Add comment

Write

Create snippet

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

TOL

Pro User 0Support score
2Questions 2Answers 0Snippets