Topic: How are modules initialized?
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.)
Here we explain difference between ES and UMD import https://mdbootstrap.com/docs/standard/getting-started/migration-guide/#section-javascript
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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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