Topic: mdb is not defined when importing Vector Maps
und_crc priority asked 3 weeks ago
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';
und_crc priority answered 2 weeks ago
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>
Kamila Pieńkowska staff answered 2 weeks ago
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>
Kamila Pieńkowska staff answered 2 weeks ago
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.
Kamila Pieńkowska staff answered 2 weeks ago
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 priority commented 2 weeks 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.
Kamila Pieńkowska staff answered 3 weeks ago
Import mdb and plugin in separate script tags or separate JS files. It should help.
und_crc priority commented 2 weeks ago
That does not work
und_crc priority commented 2 weeks 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';
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.3.2
- Device: Browser
- Browser: Edge
- OS: Window
- Provided sample code: No
- Provided link: No