Importing Parallax plugin with ES format. How?


Topic: Importing Parallax plugin with ES format. How?

webservices pro premium priority asked 11 months ago

We are importing MDB with ES format as described in the Migrating to MDB v7 docs and everything works except Parallax. This is currently the only plugin we are using.

I've seen a couple others here say ES format was not working with plugins. I don't see how they were able to get it working though.

What am I doing wrong?

import {
    Button,
    Offcanvas,
    ... more modules
    initMDB,
} from 'mdb-pro-directory/js/mdb.es.min.js';

window.Button = Button;
window.Offcanvas = Offcanvas;
... more modules

initMDB({
    Button,
    Offcanvas,
    ... more modules
});

// Parallax module.
import Parallax from 'mdb-pro-directory/src/plugins/parallax/js/parallax.js';

window.Parallax = Parallax;
initMDB({Parallax});

Kamila Pieńkowska staff answered 11 months ago

initMDB is a method needed for components. Please remove this part of your code. Parallax is a separate module.

This is the easiest way to import a single plugin:

  <script type="text/javascript" src="mdb-pro-directory/plugins/js/parallax.min.js"></script>

If you prefer the way you do please let me know if you get any errors after removing: initMDB({Parallax});


webservices pro premium priority commented 11 months ago

Thank you for the clarification. Sorry I did not mention that this is in a Webpack build. I would like to keep it in the build process if possible so that it is in manifest.json.

Do you have any recommendations for how to include it in Webpack?


Grzegorz Bujański staff commented 11 months ago

Try using the same code but without initMDB({Parallax});


webservices pro premium priority commented 11 months ago

Thanks. Unfortunately there were errors during the build process that prevented the build from finishing. I ended up doing what you said so that I could load the script only when there is a parallax on the page. I used Webpack to copy parallax.min.js in to my build directory. Then I just add the script to the page when it is needed. It works out better than how I was originally going to do it :-)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes