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'
 }
 },
};

• Sylvester: if i remove the $(document).ready(function () then it throws Uncaught ReferenceError: Rellax is not defined
• Ben Crook: 1. Add domReady! as a dependency rather than using the jQuery .ready method. 2. What happens if you remove the rellax code and dependency? That can narrow it down to either rellax itself or whether it's how you've added the JS.
• Sylvester: Hi ben, i remove .ready and added ['jquery', 'rellax', 'domReady!'], still its the same, gettng rellax undefined
• Rakesh Jesadiya: please share your full path of js 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?

• Sylvester: Hi I am still getting the error as Rellax is not defined, the file is getting called for sure but looks like its not initialised
• Ben Crook: It sounds like it's either a problem with rellax or how you're using it, unless I'm missing something if this file and rellax are loading fine it doesn't sound like a Magento issue.
• Sylvester: I tried this with simple html and css. It seemed to work fine but here with requirejs it seems to be a problem. Any idea how to debug it?
• Ben Crook: It may even be an issue with Rellax: github.com/dixonandmoe/rellax/issues/61 and github.com/dixonandmoe/rellax/issues/22
• Sylvester: one of the issues being that it was not working as the rellax was called before defining, but in our case using requireJS that shouldnt happen, so what do i do here to resolve this, been stuck with this for 3 days already