Topic: mdb is not defined when importing Vector Maps
Expected behavior Vector Maps Should Load Actual behavior
vector-maps.js:730 Uncaught ReferenceError: mdb is not defined
at Bn._setup (vector-maps.js:730:33)
at new Bn (vector-maps.js:174:12)
at vector-maps.js:1116:16
at Array.forEach (<anonymous>)
at vector-maps.js:1112:41
at mdb-vector-maps.js?v=c3f58514:9:85
at ../../../node_modules/mdb-vector-maps/js/vector-maps.min.js (mdb-vector-maps.js?v=c3f58514:10:6)
at __require (chunk-BUSYA2B4.js?v=c3f58514:3:50)
at index.js:190:51
Resources (screenshots, code snippets etc.)
import * as mdb from 'mdb-ui-kit/js/mdb.umd.min'; // lib
window.mdb = mdb // add lib as a global object
import VectorMap from 'mdb-vector-maps';
I was able to fix this by copying the entire vector-maps plugin into my project (instead of importing via node_modules). Then I added import * as mdb from 'mdb-ui-kit/js/mdb.es.min' as an import statement in vector-maps.js. This import statement ultimately resolved the mdb is not defined error. See my Astro file below.
MDB could you please fix the plugin library so vector-maps can be loaded without using type=module? Thanks.
---
import Layout from 'src/layouts/Layout.astro';
import 'src/components/mdb-vector-maps/css/vector-maps.min.css';
---
<Layout title="Title">
<h1>Map</h1>
<section class="mb-10">
<div class="row">
<div class="col-md-9 col-lg-7 col-xl-7 mx-auto text-center">
<h4 class="lead mb-4">Map</h4>
</div>
</div>
</section>
<section>
<div data-mdb-vector-map-init class="vector-map" id="vector-map"></div>
</section>
</Layout>
<script >
import * as mdb from 'mdb-ui-kit/js/mdb.es.min'; // mdb lib
window.mdb = mdb // add lib as a global object
import VectorMap from 'src/components/mdb-vector-maps/src/js/vector-maps';
</script>
Import mdb and plugin in separate script tags or separate JS files. It should help.
und_crc pro premium priority commented 3 months ago
That does not work
und_crc pro premium priority commented 3 months ago
For reference, I am able to import the calendar plugin using the following code without any issues.
import * as mdb from 'mdb-ui-kit/js/mdb.es.min';
window.mdb = mdb;
import Calendar from 'mdb-calendar';
You may import Vector maps like this:
<script type="module">
import * as mdb from './js/mdb.es.min.js';
window.mdb = mdb;
</script>
<script type="module">
import * as VectorMap from './plugins/js/vector-maps.min.js';
</script>
If you don't want to use script tags use the same syntax in JS files but make sure that mdb and VectorMap are imported in different files.
und_crc pro premium priority commented 3 months ago
Importing the script as type=module won't work in our use case. How can I import vector-maps from the mdb node_module (similar to calendar)? Thanks.
This is not a bug.
VectorMaps can be used without "module" script tag but not with es modules. It is clearly stated in our documentation that
Currently, the plugin is only compatible with the basic MDB package imported in UMD format.
und_crc pro premium priority commented 3 months ago
I tried both es and umd modules, but neither worked.
And how did you do it with umd import?
This will work:
<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="js/mdb.umd.min.js"></script>
<!-- MDB PLUGINS -->
<script type="text/javascript" src="plugins/js/vector-maps.min.js"></script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: Browser
- Browser: Edge
- OS: Window
- Provided sample code: No
- Provided link: No