Search code examples
angularjsherokugruntjsplaid

How to keep Grunt dom_munger from stripping your CDN dependencies?

I have an object, Plaid, that is provided by a drop-in module from Plaid, called Plaid Link. Locally, the code works perfectly in my AngularJS front-end.

The module is loaded via my AngularJS app's index.html file, right next to all of the other script tags loaded for my application.

Index.html

<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>

Here is the code where Plaid is called: (from an AngularJS controller)

$scope.addAccount = function(bankChosen) {

    $log.debug("Plaid object: ", Plaid);
    var linkHandler = Plaid.create({ // the troublesome line 
        env: 'tartan',
        clientName: 'Example Project',
        key: 'test_key',
        product: 'connect',
        onSuccess: function(public_token) {
            Restangular.one('plaid').customPOST(
                {
                    public_token: public_token,
                    user_id: $scope.currentUser.id,
                    institution_code: bankChosen
                },
                'addAccount'
            );
        },
        onExit: function() {
            $state.go('dashboard.successState');
        },
    });

    linkHandler.open(bankChosen);

};

However, when I push to the production environment, currently hosted on Heroku, it gives the javascript error ReferenceError: Plaid is not defined when it tries to load. It is breaking error when deployed to production.

What could be causing this module to be unavailable during production?

The script that loads the CDN could be getting stripped away by a standard grunt task that does that sort of thing? Or maybe I am supposed to be loading the module from the CDN in some other way in a production-environment setting? I really don't know...

Update: I found one thing that might be stripping the loaded module

From the Grunt dom-munger docs

Use this task to read and transform your HTML documents. Typical use cases include:

  1. Read the references from your script or link tags and pass those to concat,uglify, etc automatically.

2. Update HTML to remove script references or anything that is not intended for your production builds.

  1. Add, update, or remove any DOM elements for any reason.

dom_munger is part of my application's build process, which happens when it is deployed (!). Grunt is the likely culprit here.

Does anybody know how to load the script tag above, with dom_munger as still part of my app's grunt build step?

Solution

  • The problem was that during the build step Grunt strips away the script tags in my application. So I had to append the tag back on to my body tag using dom_munger's update --> options --> append option.

    ...only then could I get the CDN script to be linked to properly after the app was built using grunt build.

    The line looks like this in my Gruntfile. 

    --> The key added line is this one
{selector:'body',html:'<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>'},


dom_munger:{
    [.....]
  update: {
    options: {
      append: [
        {selector:'body',html:'<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>'},
      ]
    },
    src:'index.html',
    dest: 'dist/index.html'
  }

    Quite the mysterious error for me. I hope this helps somebody else out at some point!