Using wiredep and Bower - "Cannot read property 'Item' of undefined"

[xelhark]

I am using bower install to install isotope on my project.

The 'wiredep' task of grunt automatically includes the files listed in the 'main' section of the bower file, which are currently:

"main": [
    "js/item.js",
    "js/layout-mode.js",
    "js/isotope.js",
    "js/layout-modes/vertical.js",
    "js/layout-modes/fit-rows.js",
    "js/layout-modes/masonry.js"
  ],

The main page suggests we include dist/isotope.pkgd.js though.

Why this inconsistency?

I also had trouble starting isotope untile I included the pkgd version. The problem I am having now is that the grunt task will automatically revert my pkgd version to the versions specified in the main. Is there a reason why the 'main' section doesn't include the pkgd version?

[silvenon]

I really like that it's requiring all the deps instead of just including the packaged version. It's developer-friendly; if something goes wrong, it's easier to tell which module the error is coming from.

The pkgd version is, as I understand it, Isotope concatenated with those deps plus Bridget, which enables integration with jQuery.

So all you need to do to make Isotope work with jQuery is bower install --save jquery-bridget and make sure to include it before Isotope (and after jQuery). To do this with wiredep simply move the jquery-bridget dep above isotope in bower.json. Then run wiredep.

I think the reason why an additional step is needed is to make it work with jQuery is to:

1. make the script as small as possible (no need to include Bridget if you're using Isotope without jQuery)
2. to be more non-jQuery friendly :smiley: I find it annoying when libs that don't depend on (but are compatible with) jQuery set jQuery as a dep

The author of Isotope can correct my if I'm wrong somewhere.

[desandro]

Bower's main has been a contentious subject for a while. Now that npm has grown up to support front-end pacakges, I think it makes sense to align with its definition: main is the main file, use as entry point for the other files in the package. There should only be one per file extension.

The next version of Isotope will change main: 'js/isotope.js'.

main should not point to packaged/distribution files. Package files are designed for host-and-link use cases, as it includes all the dependencies of package. This would to package duplication, when using packages with the same dependencies. This is something that package management aims to resolve.

[EHLOVader]

Although the jquery-bridget dependency should not be included in the main of your bower.json since it is external this seems to point towards the same issue I had with the dependency being a devDependency instead of normal dependency.

You can see the overrides in my PR which was closed since it is easily solved with this block in your bower.json

  "overrides": {
    "isotope": {
      "main": [
        "js/item.js",
        "js/layout-mode.js",
        "js/isotope.js",
        "js/layout-modes/vertical.js",
        "js/layout-modes/fit-rows.js",
        "js/layout-modes/masonry.js"
      ],
      "dependencies": {
        "get-size": ">=1.1.8 <1.3",
        "matches-selector": ">=1 <2",
        "outlayer": "1.3.x",
        "masonry": "3.2.x",
        "jquery": ">=1.4.3 <2",
        "jquery-bridget": "1.1.x"
      }
    },
    "outlayer": {
      "main": [
        "item.js",
        "outlayer.js"
      ]
    }
  }

Note that I have added the necessary main section that wiredep will need with the new adjustments made to follow bower's recommendations to provide only a single entry point file while also not compiling the entire package into a single entry point file or requiring the external (but yet still internal) files for use. As well as the same override for outlayer which will suffer the same problems and throw errors otherwise.

[desandro]

To use Isotope with wiredep, add this override to your bower.json or wiredep config.

"overrides": {
  "isotope": {
    "main": [
      "js/item.js",
      "js/layout-mode.js",
      "js/isotope.js",
      "js/layout-modes/vertical.js",
      "js/layout-modes/fit-rows.js",
      "js/layout-modes/masonry.js"
    ]
  },
  "outlayer": {
    "main": [
      "item.js",
      "outlayer.js"
    ]
  }
}

[EHLOVader]

Since this was necrobumbed... felt the need to address the missing dependencies property from your overrides.

The most recent issue thread you referred here and provided a definitive answer for, others had also mentioned they fixed it with the pkgd version of the js. I believe one factor of that one, besides being concatenated version of your own codebase was the inclusion of jquery-bridget which I added to the dependencies in my overrides included above.

Unless there were some major dependency version differences which I can address I would consider favoring the full override for complete compatibility with all users.

[desandro]

Thanks for the feedback! I left out jquery-bridget as dependency, because it's not a dependency of Isotope. If you like, you can add this to your own Bower config and it should work just fine with wiredep, no extra config stuff required.

As for the pkgd file: yes, this does work, but I recommend against using it as it includes all Isotope dependencies in one file, which can lead to duplicated dependencies.

[markhowellsmead]

The overrides key needs to be "isotope-layout" and not "isotope" if you're using bower install isotope-layout --save.