I need to use Materialize framework in Magento 2.

As per the documentation, to add external css/js resources I edited default_head_blocks.xml as

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <!-- Add local resources -->
    <css src="css/my-styles.css"/>

    <!-- The following two ways to add local JavaScript files are equal -->
    <script src="Magento_Catalog::js/sample1.js"/>
    <link src="js/sample.js"/>

    <!-- Add external resources -->
    <css src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" src_type="url" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js" src_type="url" />

Now I'm getting the error as "Module name "jquery" has not been loaded yet". Screenshot belowenter image description here

Is there any better way to include the files? Need some help...

1 Answer 1


As to the docu of materialize.js you have to import jquery first. Thus you have to use requireJs to load materialize.js

You can read here how to do so: How To add JS file in frontend for all pages

Here is the documentation on how to do so: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js-resources.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.