Magento 2: can't use materialize.js on my custom module

Question

I'm trying to use materialize slider in my custom module, my try was:

Vendor/Module_Name/view/requirejs-config.js:

var config = {
map: {
    '*': {
        materialize: 'SliderHome/js/materialize'
    }
}};

materialize.js file is in Vendor/Module_Name/view/web/js/materialize.js

then in my template view (.phtml file) I put at the end this script:

<script type="text/javascript">

require(['jquery', 'materialize'], function ($) {

$(function () {
    var height = setHeightSlider();
    var buttonHeight = 40;
    $('.slider-arrow').css('top', (height/2)-(buttonHeight/2));
    $('.slider').slider({
        indicators: false,
        height: height,
        interval: 10000
    });

    $('#prev-photo').click(function () {
        $('.slider').slider('prev');
    });
    $('#next-photo').click(function () {
        $('.slider').slider('next');
    });
});

function setHeightSlider() {
    var width = $(window).width();
    var height = 550;
    if (width > 1824) {
        // larger screens

        height = 700;
    } else if (width > 1224 && width < 1824) {
        // Desktops and laptops

        height = 500;
    } else if (width < 1224) {
        // tablet

        height = 350;
    }
    return height;
} });</script>

When the page is loaded I get this error:

Error: Script error for: materialize

Can anyone help me? Thanks

Answer 1

You need to place both your requirejs and js file in a scope folder, either adminhtml, frontend or base, inside the view folder.

Depending on wether you need it in the admin, frontend or in both.

When done check the require js file included in the head if it contains your config.