CODEWITHSUNDEEP
javascriptjqueryrequirejs
jaman7
jaman7

Reputation: 11

requirejs r.js errors after optimization in browser

I'm struggling to get requirejs to work after optimizing with r.js It works fine pre optimization,

errors in browser:

main.js:71 Uncaught ReferenceError: jQuery is not defined

in included plugin mCustomScrollbar to main.js

factory(jQuery,window,document);

file:///home/atm/public/www-build/js/jquery.mCustomScrollbar.js net::ERR_FILE_NOT_FOUND require.js:2 Uncaught Error: Script error for "mCustomScrollbar" http://requirejs.org/docs/errors.html#scripterror.

html:

<script data-main="js/main" src="js/require.js"></script>
<script>
    require(['main'],function(){
      require(['page/page1']);
    });
</script>

main.js config file:

require.config({
    baseUrl: 'js/',
    paths : {
        page: 'page',

        'jquery' : ['https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min',
                    'jquery-2.2.1.min'],
        'mCustomScrollbar' : 'jquery.mCustomScrollbar',
        'jquery-mousewheel' : 'jquery.mousewheel.min'
    }, 
    shim : {
        'mCustomScrollbar' : {
                                deps : ['jquery','jquery-mousewheel']
                            }
    }
});

page1.js

define(['jquery','mCustomScrollbar'], function($){
    $(document).ready(function () { 
        $("#content-3").mCustomScrollbar({
            scrollButtons:{enable:true},
            theme:"dark-thick"
        }); 
    }); 
});

build.js config

({
    appDir: "../www",
    baseUrl: 'js/', // relative to appDir
    dir: "../www-build",
    mainconfigfile: '../www/js/main.js',
    modules: [
        {
            name: "main",
            include: ['jquery','mCustomScrollbar']
        },
        {
            name: 'page/page1',
            include: ['page/page1'],
            exclude: ['main']
        }
    ],
    paths: {
        'jquery': "empty:",
        'mCustomScrollbar' : 'jquery.mCustomScrollbar',
        'jquery-mousewheel' : 'jquery.mousewheel.min'
    },
    shim : {
        'mCustomScrollbar' : { deps : ['jquery','jquery-mousewheel'] }
    },
    optimize: "none",
    optimizeCss: "standard",
    removeCombined: true
})

Upvotes: 0

Views: 605

Answers (3)

jaman7
jaman7

Reputation: 11

ok now is work fully, I fixed the problem, include into plugin mCustomScrollbar 

 define ([ 'jquery', 'jquery-mouseWheel'], function () { 
    'inside code plugin mCustomScrollbar '  
 )};

now all files libs and plugins with one file

Upvotes: 0

jaman7
jaman7

Reputation: 11

i find inside script comment :

* load jquery-mousewheel plugin (via CDN) if it's not present or not loaded via RequireJS (works when * load jquery-mousewheel plugin (via CDN) if it's not present or not loaded via RequireJS

maybe is problem optimize js files with one file

Upvotes: 0

Linh Pham
Linh Pham

Reputation: 3025

main.js:71 Uncaught ReferenceError: jQuery is not defined

This is likely because jquery-mousewheel loaded before jquery. You can try to config dependencies for jquery-mousewheel like this

shim : {
    'mCustomScrollbar' : {
        deps : ['jquery','jquery-mousewheel']
    },
    'jquery-mousewheel' : { 
        deps : ['jquery']
    }
}

Upvotes: 0

Related Questions