Importing Parallax plugin with ES format. How?

Topic: Importing Parallax plugin with ES format. How?

webservices priority asked 4 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});

Add comment

Kamila Pieńkowska staff answered 4 months ago

0 0 Best answer

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 priority commented 4 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 4 months ago

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

webservices priority commented 4 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 :-)

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.1.0
Device: All
Browser: All
OS: All
Provided sample code: No
Provided link: Yes

webservices

5Support score
13Questions 5Answers 6Snippets