How to use Custom Module Js to RequireJS

Question

I add my custom Module to JS to requirejs-config.js File

 var config = {
 paths: {
 'Test/jquery':"Test_Header/js/jquery.min" ,
 'Test/popup':"Test_Header/js/jquery.magnific-popup" ,
 'Test/three':"Test_Header/js/three" ,
 'Test/async':"Test_Header/js/async" ,
 'Test/orbit':"Test_Header/js/OrbitControls" ,
 'Test/theta':"Test_Header/js/theta-viewer" 
 },
 shim: {
 'Test/jquery': {
 deps: ['jquery']
 },
 'Test/popup': {
 deps: ['jquery']
 },
 'Test/three': {
 deps: ['jquery']
 },
 'Test/async': {
 deps: ['jquery']
 },
 'Test/orbit': {
 deps: ['jquery']
 },
 'Test/theta': {
 deps: ['jquery']
 }
 }
 };

After I call this js to Template File:

 require(['jquery', 'Test/popup', 'Test/async', 'Test/theta' ],function($) {
 $(window).load(function () {
 $('#td').click(function () {
 if(load==false) {
 $('#threed').css('display', 'block');
 $('.cpimage').css('display', 'none');
 var viewer = new ThetaViewer( document.getElementById('threed') );
 viewer.images = ["<?php echo $tsy; ?>"];
 viewer.interval = 200;
 viewer.autoRotate = true;
 viewer.load();
 }
 });
 });
 });

Now All Js File Are Loading Fine in Net Tab, But Throw Error IN Console ReferenceError: async is not defined

Reference:{async load }

async load

Reference: [async error]

enter image description here

All Js are Loaded, But throw this Error. I tested All js Are working IN locally fine, But, While Integrating Magento2(requirejs), throw this error. Suggest Me Why This Issue Occur and How to Solve this.

Answer 1

requirejs-config.js mapping should be in below format. You need to load your async.js before three.js and popup.js because either three.js or popup.js depends on async

Try below code:

var config = {
 paths: {
 'Test/jquery':"Test_Header/js/jquery.min" ,
 'Test/async':"Test_Header/js/async" ,
 'Test/popup':"Test_Header/js/jquery.magnific-popup" ,
 'Test/three':"Test_Header/js/three" ,
 'Test/orbit':"Test_Header/js/OrbitControls" ,
 'Test/theta':"Test_Header/js/theta-viewer" 
 },
 shim: {
 'Test/jquery': {
 deps: ['jquery']
 },
 'Test/async': {
 deps: ['jquery']
 },
 'Test/popup': {
 deps: ['jquery']
 },
 'Test/three': {
 deps: ['jquery']
 },
 'Test/orbit': {
 deps: ['jquery']
 },
 'Test/theta': {
 deps: ['jquery']
 }
 }
 };

• Rajkumar Elumalai: I tried you suggest , But still have same issue
• Manthan Dave: @Rajkumar.E Try without shim. use this code - var config = { map: { '*': { 'Test/jquery':"Test_Header/js/jquery.min" , 'Test/async':"Test_Header/js/async" , 'Test/popup':"Test_Header/js/jquery.magnific-popup" , 'Test/three':"Test_Header/js/three" , 'Test/orbit':"Test_Header/js/OrbitControls" , 'Test/theta':"Test_Header/js/theta-viewer" } } }

Answer 2

requirejs-config.js mapping should be in below formate.

var config = {
 map: {
 '*': {
 noConflict: "Codilar_Place/js/noconflict",
 mabelJquery: "Codilar_Place/js/jquery",
 mabelSlider: "Codilar_Place/js/slider",
 mabelScript: "Codilar_Place/js/script",
 mabelScriptFile: "Codilar_Place/js/script-file",
 mabelSelectBox: "Codilar_Place/js/selectbox"
 }
 }
};

if you want to define dependency then define shim part.

hope this will help.