RequireJs magento2 loading custom js plugin results in DOMException: Failed to execute 'querySelectorAll'

Question

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDocument]' is not a valid selector.

this is my code in main.js file.

require([ 'rellax'], function ($) {
    $(document).ready(function () {
    console.log("entered the function rellax");
    var rellax = new Rellax('.rellax', {
        callback: function (position) {
            console.log(position);
            }
        });
    });
});

This is my requirejs-config.js

var config = {

    deps: [
        "js/main"
    ],
    map: {
    '*': {
        slick: 'js/slick.min',
        rellax: 'js/rellax.min'
        }
    },
};

Answer 1

Try this:

require(['jquery', 'rellax', 'domReady!'], function ($, rellax, domReady) {
    console.log("entered the function rellax");

    var rellax = new Rellax('.rellax', {
        callback: function (position) {
            console.log(position);
        }
    });
});

I have added jQuery and domReady! as a dependency and removed the jQuery .ready() method.

If you are getting errors about rellax being undefined then it sounds like you're either using Rellax wrong or your paths are incorrect. If you still get the error, is the console log working?