mdb is not defined when importing Vector Maps

Topic: mdb is not defined when importing Vector Maps

und_crc priority asked 2 months 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';

Add comment

und_crc priority answered 1 month ago

0 0 Best answer

<p>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 <code>import * as mdb from 'mdb-ui-kit/js/mdb.es.min'</code> as an import statement in <code>vector-maps.js</code>. This import statement ultimately resolved the <code>mdb is not defined</code> error. See my Astro file below.</p>

<p>MDB could you please fix the plugin library so vector-maps can be loaded without using <code>type=module</code>? Thanks.</p>

<pre class="prettyprint"><code>---
import Layout from 'src/layouts/Layout.astro';
import 'src/components/mdb-vector-maps/css/vector-maps.min.css';
---

</div>
        </div>
    </section>

Please insert min. 20 characters.

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>

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 0 Best answer

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>

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 0 Best answer

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 priority commented 1 month ago

I tried both es and umd modules, but neither worked.

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 0 Best answer

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 1 month 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.

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 0 Best answer

Import mdb and plugin in separate script tags or separate JS files. It should help.

und_crc priority commented 1 month ago

That does not work

und_crc priority commented 1 month 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';

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: 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

und_crc

0Support score
1Questions 1Answers 0Snippets