Topic: Unable to load Datepicker via UMD
unikladmin priority asked 8 months ago
Expected behavior
Pro component (in this case, Datepicker) should load
Actual behavior
Error displayed: Cannot use import statement outside a module
Resources (screenshots, code snippets etc.)
Kamila Pieńkowska staff answered 8 months ago
Here is example on how to import mdb package:
<script type="module">
// MDB import
import * as mdb from '/src/js/mdb.pro.umd.js';
</script>
Kamila Pieńkowska staff commented 8 months ago
Of course you need to change path according to your use case.
unikladmin priority commented 8 months ago
This is the code:
<!-- MDB -->
<script type="text/javascript" src="/UmsWeb/js/mdb.min.js"></script>
<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="/UmsWeb/js/mdb.umd.min.js"></script>
<!-- MDB PLUGINS -->
<script type="text/javascript" src="/UmsWeb/plugins/js/all.min.js"></script>
<script type="module">
import * as mdb from '/UmsWeb/src/mdb/js/mdb.pro.umd.js';
</script>
However, I'm getting another error:
GET https://.../UmsWeb/src/mdb/js/bootstrap/mdb-prefix/offcanvas net::ERR_ABORTED 404 (Not Found)
Kamila Pieńkowska staff commented 8 months ago
If you have this:
<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="/UmsWeb/js/mdb.umd.min.js"></script>
You've allready imported MDB package. There is no need to add:
import * as mdb from '/UmsWeb/src/mdb/js/mdb.pro.umd.js';
Kamila Pieńkowska staff commented 8 months ago
I did not catch this in the screen you provided in the main question, sorry.
unikladmin priority commented 8 months ago
Thanks a lot! It works now
Kamila Pieńkowska staff answered 8 months ago
You need to add type="module"
to your script tag.
unikladmin priority commented 8 months ago
Now I got another error: Uncaught TypeError: Failed to resolve module specifier "mdb-ui-kit". Relative references must start with either "/", "./", or "../".
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No