Problem with jQuery about amdclean HOT 25 CLOSED

@tybenz Are you going to be in San Diego today? We could meet up and figure this out.

from amdclean.

Heck yeah. I'll be getting in around 5. Maybe the speaker dinner?

from amdclean.

Can we bring laptops to the dinner lol.

from amdclean.

Haha. Not sure. Maybe before or after depending on how quickly I can get checked in.

from amdclean.

This ended up being a situation where the globalObject option needed to be set to true. Glad we got it sorted.

Update: The globalObject option has been removed and this issue should no longer happen with the latest versions of AMDclean.

from amdclean.

I'm having the same issue, and I'm not sure how to resolve it. I tried putting "globalObject":true in my config, and "globalModules": ["jquery"] but neither one fixed the issue.

Any suggestions? I can send more specific files offline if that's helpful.

from amdclean.

This config.js ended up making it work: https://gist.github.com/tybenz/a64377cc3a03f50290e0

Let me know if that helps

from amdclean.

@probertson What version of AMDclean are you using?

In the latest version of AMDclean, the globalObject option has been removed and the onBuildWrite hook is no longer being used. Instead, the onModuleBundleComplete Require.js hook is used and you shouldn't be running into the above issue at all.

from amdclean.

Unfortunately, part of my difficulty is that I'm working with a couple of layers of abstraction.

I'm trying to add AMDClean to an existing gulp build, so I'm using the gulp-amdclean package, which wraps AMDClean. I just installed it yesterday, and it's AMDClean v2.0.0 and gulp-amdclean v0.2.1.

Looking at the source for gulp-amdclean, I don't see it using onModuleBundleComplete (which isn't too surprising, since it's not hooking into r.js at all).

If I understand things completely, the output of r.js is passed into amdclean.clean() in node:
https://github.com/rstone770/gulp-amdclean/blob/master/src/gulp-amdclean.js#L29

The r.js output is the same as what I've been using -- I'm just trying to add amdclean to it so we can avoid the need for RequireJS in production.

I've created a simplified version of the code that still shows the problem:
https://gist.github.com/probertson/2fc1db46e6fcc5980194

The files are:

• amdclean-options.js -- the options object I'm passing to amdclean
• r.js-output.js -- the raw r.js output (presumably what's being fed into amdclean, in case you want to try it directly
• index_main.js -- the source JS file that r.js is compiling (it lives in the /js/ subfolder normally, but I couldn't put that into the gist)
• index.html -- a corresponding html page, for testing

from amdclean.

@probertson Could you try updating to the latest version of AMDclean (2.2.0)? You are right about how the gulp-amdclean plugin works though (it expects to receive post Require.js optimizer output).

Note: You no longer need to set the wrap option, since AMDclean uses what you provided as the default now.

from amdclean.

Also, I would recommend just using the Require.js node module. AMDclean itself is doing this (since it is building itself with AMDclean). https://github.com/gfranko/amdclean/blob/master/gulpfile.js#L43

from amdclean.

@gfranko I'm having a similar issue (jquery is undefined) that wasn't solved by adding the "globalObject": true setting to my config (or by adding "jquery" to the globalModules array). I'm using version 2.1.1, though I see you've just released 2.2.0.

Happy to give more details about the setup or shoot you the files to look at.

from amdclean.

@danvoss2 Yea, could you update to 2.2.0 and let me know if you are still running into the same issue? If you are, I'd be happy to see your setup/files and figure it out.

Also, make sure you are using the onModuleBundleComplete Require.js hook and NOT the onBuildWrite hook. Like this:

onModuleBundleComplete: function (data) {
  var fs = module.require('fs'),
    amdclean = module.require('amdclean'),
    outputFile = data.path,
    cleanedCode = amdclean.clean({
      'filePath': outputFile
    });

  fs.writeFileSync(outputFile, cleanedCode);
}

from amdclean.

No luck with 2.2.0.

Here're the pertinent snippets from Gruntfile.js (note that I have tried this with both 'globalObject': true and 'globalModules': ['jquery'], and different combinations thereof):

        requirejs: {
            compile: {
                options: {
                    baseUrl: 'js/',
                    mainConfigFile: 'js/config.js',
                    name: 'main',
                    out: '../webapp/assets/js/main.js',
                    //generateSourceMaps: true,
                    preserveLicenseComments: false,
                    optimize: "none",
                    onModuleBundleComplete: function (data) {
                        var fs = require('fs'),
                            amdclean = require('amdclean'),
                            outputFile = data.path;

                        fs.writeFileSync(outputFile, amdclean.clean({
                            'filePath': outputFile
                        }));
                    }
                }
            }
        }

And here's the config.js:

require.config({
    paths: {
        'jquery': '../bower_components/jquery/jquery.min'
    }
});

And main.js:

require([
  'mods/loginApp'
], function (loginApp) {
    "use strict";
    //Call loginApp module to initialize events and such
    loginApp.initialize();
});

And loginApp.js:

define(["jquery", "mods/placeholders", "mods/adloader", "mods/cookies"], function ($, placeholders, adloader, cookies) {
    "use strict";
    var initialize = function(){
        var $landingPage = $("#landing-page");
        cookies.areCookiesEnabled();
        placeholders.setupPlaceholders();
    };

    return {
        initialize: initialize
    };
});

And here's placeholders.js as a representative example of those dependencies (they declare jquery as their only dependency):

define(["jquery"], function ($) {
    "use strict";

    return {
        //Do something sexy with placeholder text
    };
});

Appreciate your help and let me know if you need anything else.

from amdclean.

@danvoss2 Would it be possible for you to send me your project's source code without AMDclean and then with AMDclean? Also, let me know if you want to just email me and take this discussion off Github: [email protected]

from amdclean.

@danvoss2 @probertson

I believe I have found the issues:

• Make sure to set the Require.js skipModuleInsertion option to true. By default, Require.js creates a define() wrapper for files that are not wrapped in a define() (e.g. main.js and jquery). This can cause issues with AMDclean.
• Make sure you are not pointing to minified files when building with AMDclean (you were pointing at the minified version of jQuery).

I also updated the AMDclean README to point out these potential issues.

from amdclean.

@gfranko Yep, that fixed it for me. Thanks!

from amdclean.

Ok new jQuery problem. skipModuleInsertion worked like a charm for me when I was including jQuery in my build.

But now I'm thinking I don't want to include jQuery as a part of my build. I'm working on this component library that I'm using in a few different places.

Some pages that need the library already have jQuery included, and if we decide to give this away as a 2rd-party component library we want people to be able to choose their own jQuery.

I tried building while excluding jQuery, but I'm winding up with the same problem. AMD Clean is trying to pass jquery (notice lowercase "q") to the IIFEs that defines my modules, but jquery is undefined.

from amdclean.

So here are my current thoughts on building libraries that contain third-party dependencies:

• Don't list any third-party dependencies as dependencies in your source files
• Hoist all third-party dependencies as local variables in your source files, at build time, so that the dependencies are available to all of your library's modules.
• Set the third-party dependency local variable values within your library source code

Check out how AMDclean does it for an example (AMDclean depends on Esprima, Estraverse, Escodegen, and Lodash)

Hoisting local variables at build time: https://github.com/gfranko/amdclean/blob/master/gulpfile.js#L65

Setting the conditional third-party values based on environment: https://github.com/gfranko/amdclean/blob/master/src/modules/index.js#L38

I know this is a bit hacky, but I can't think of a better way to do it at the moment. Let me know what you think.

from amdclean.

This makes sense. At the time I thought it would be helpful to have jQuery as a dependency in "dev mode" - working with requires without compiling. I was trying to have the best of both worlds.

But I think you're right. It's probably best just to leave jQuery out of it entirely and have the library assume it's already globally available. Makes thing much easier. Thanks!

from amdclean.

I've been buried with other things for a while, but I finally got a chance to circle back to this so I wanted to add my "conclusion."

I was using a minified jQuery in my build source. When I switch to using the developer version, it works just fine. So the solution (for me) was to make sure to use un-minified jQuery.

Thanks again for all your help.

from amdclean.

@probertson Thanks for letting us know your solution!

from amdclean.

@gfranko

I'm having a similar issue with jquery. I am using the unminifed version of jQuery 1.9.x and have skipModuleInsertion set to true

require.config.js

require.config({
  baseUrl: "./",
  paths: {
    "jquery": "../components/jquery/jquery",
    "requirelib": "../components/requirejs/require"
  },
  waitSeconds: 15
});

Gruntfile.js (partial)

    requirejs: {
      compile: {
        options: {
          mainConfigFile: "./src/js/require.config.js",
          name: "fep",
          out: "dist/feperf.js",
          optimize: "none",
          skipModuleInsertion: true,
          onModuleBundleComplete: function (data) {
            var fs = require('fs'),
              amdclean = require('amdclean'),
              outputFile = data.path;

            fs.writeFileSync(outputFile, amdclean.clean({
              'filePath': outputFile,
              'prefixMode': 'camelCase',
              'globalModules': ['fep']
            }));
          }
        }
      }
    }

For some reason, jquery never gets written to the jQuery object. The global jQuery object exists (window.jQuery, || window.$) but the alias "jquery" from my require.config.js never gets created/mapped/written properly.

from amdclean.

@b1lly Do you happen to have a git repo that I could look at?

from amdclean.

@gfranko Yeah, look at the requirejs branch though. https://github.com/b1lly/feperf/

from amdclean.