Require.js keep infinite reloading

Question

I want to minify my requirejs project by r.js -o app.build.js

After finishing it, the result breaks my website.

As the attached clip, you can see the page is keeping reloading itself and the console show the minified module reloaded again and again

https://www.youtube.com/watch?v=CQvWQ28nG1c&feature=youtu.be

Any idea?

        <script type="text/javascript" src="http://mysite/js/require.js" 
         data-main="http://mysite/js/dist/app.out.js" defer async="true">
         </script>

buggy page is here

http://www.foolpin.com/review/%E9%BB%83%E5%AE%89

app.build.js

    {
        name: "app.main.js",
        mainConfigFile: 'app.main.js',
        out: "dist/app.out.js",
        optimize: "uglify2",
        preserveLicenseComments: false,
        generateSourceMaps: false,
        optimizeAllPluginResources: false,
        findNestedDependencies: false,
        wrap: true,
        wrapShim: true,
        include: ["./require.js"],

    }

app.main.js

    requirejs.config({
        paths: {
            require: './require',
            jquery: './vendor/js/jquery-2.1.1.min',
            underscore: './vendor/js/underscore-min',
            backbone: './vendor/js/backbone-min',
            hbs: './vendor/js/hbs/hbs',
            handlebars: './vendor/js/handlebars-v4.0.5',
        },
        hbs: { // optional
            helpers: true,            // default: true
            templateExtension: 'hbs', // default: 'hbs'
            partialsUrl: ''           // default: ''
        },

        shim: {
            handlebars: {
                exports: 'Handlebars'
            },
            backbone: {
                deps: [
                    'underscore',
                    'jquery'
                ],
                exports: 'Backbone'
            },
            underscore: {
                exports: '_'
            }
        },

    });

    requirejs(["app_config", "app"],function(cfg, App, noop_ahoy){
        return App.initialize();
    });

update

I have multiple files some files has anoymous function for itself

Will it be the problem?

https://gist.github.com/poc7667/555a754a105a88cde13d

    define([
        ...
        "jquery"
    ],function(

Answer 1

The problem is caused by something that may be an easy mistake to do. When you use RequireJS you always load the bundle with the code that you supplied or something similar:

<script type="text/javascript" src="http://mysite/js/require.js" 
         data-main="http://mysite/js/dist/app.out.js" defer async="true">
         </script>

The point being that you just have src="path/to/require.js and data-main="path/to/bundle.js". This is important.

Your mistake was including RequireJS in the bundle, and changing the script tag to something like

<script type="text/javascript" src="http://mysite/js/bundle.js" 
         data-main="http://mysite/js/bundle.js" defer async="true">
         </script>

By some glitch in the Matrix, this causes a recursive loading of the same script over and over again, because somewhere inside bundle.js you require require, and it fetches bundle.js again and everything goes wild. That's the only thing I can think of. Your page as it stands now doesn't seem to use the bundled script anymore, so I can't verify this.

The solution is to not include RequireJS itself in the bundle. It's all there in the documentation.