Adding formatter.js via bower throws errors on page load

sage
1

I’m trying to add formatter.js via bower, but I’m unable to actually use it (it just throws an error).

If I do nothing but bower install formatter --save and then gulp, every page will throw Uncaught TypeError: Cannot read property 'fn' of undefined

Here’s my bower.json:

    {
      "name": "sage",
      "homepage": "https://roots.io/sage/",
      "authors": [
        "Ben Word <ben@benword.com>"
      ],
      "license": "MIT",
      "private": true,
      "dependencies": {
        "bootstrap-sass": "3.3.6",
        "formatter.js": "formatter#^0.1.5"
      },
      "overrides": {
        "bootstrap-sass": {
          "main": [
            "./assets/stylesheets/_bootstrap.scss",
            "./assets/javascripts/bootstrap/transition.js",
            "./assets/javascripts/bootstrap/alert.js",
            "./assets/javascripts/bootstrap/button.js",
            "./assets/javascripts/bootstrap/carousel.js",
            "./assets/javascripts/bootstrap/collapse.js",
            "./assets/javascripts/bootstrap/dropdown.js",
            "./assets/javascripts/bootstrap/modal.js",
            "./assets/javascripts/bootstrap/tooltip.js",
            "./assets/javascripts/bootstrap/popover.js",
            "./assets/javascripts/bootstrap/scrollspy.js",
            "./assets/javascripts/bootstrap/tab.js",
            "./assets/javascripts/bootstrap/affix.js",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
            "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
          ]
        }
      }
    }

and here’s my manifest.json:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
  }
}

It seems like it’s an issue of jQuery not being available to formatter.js. Any ideas?

2

I’ll check it out. In the meantime maybe checkout https://github.com/nosir/cleave.js, it’s jQuery independent.

3

This guy has his main declaration all messed up: https://github.com/firstopinion/formatter.js/blob/master/bower.json#L17-L22

The main property is supposed to be used to include all entry points into the plugin, not all files. He is basically including the plugin 4 times into your code, twice as the regular plugin and twice as the jQuery version.
Either set up an override in your bower.json file to only include ONE of those files for the plugin, or find a different one. You can use the bootstrap-sass override as a base to see how you can choose which files to include automatically when you run gulp.

4

Heh, even overriding the main for that lib causes the same console error unless you use the non-jQuery version.

5

Yeah, that’s what I ran into as well, cfx! Weird…

Appreciate the suggestion around Cleave, though! I’ll go ahead and use that instead. Thanks!