Picturefill 2 matchMedia Polyfill conflicting with enquire.js match Media Polyfill (IE9)

[Quirksmode]

Hi,

Unfortunately the Picturefill 2 matchMedia Polyfill is conflicting with enquire.js matchMedia Polyfill (IE9)

I get the following error: Object doesn't support property or method 'addListener' enquire.js, line 152 character 9

Is there a way to get them to play nice?

[WickyNilliams]

I'm guessing the lib you refer to had the polyfill embedded? IMO this is a problem their end, I'm opposed to including polyfills directly in a lib for this reason. Ultimately it shifts a slight burden onto the developer, but it affords flexibility (pick the polyfill that suits your needs) and reduces code size (only one polyfill included).

Have you asked them to consider removing the polyfill from the lib?

[Quirksmode]

Thanks for getting back to me so quickly. So if I were to remove this matchMedia, could I then just use a single instance of it for both? They are both for matchMedia, but are different Polyfills, does this matter?

On 18 Jan 2015, at 14:16, Nick Williams notifications@github.com wrote:

I'm guessing the lib you refer to had the polyfill embedded? IMO this is a problem their end, I'm opposed to including polyfills directly in a lib for this reason. Ultimately it shifts a slight burden onto the developer, but it affords flexibility (pick the polyfill that suits your needs) and reduces code size (only one polyfill included).

Have you asked them to consider removing the polyfill from the lib?

— Reply to this email directly or view it on GitHub https://github.com/WickyNilliams/enquire.js/issues/128#issuecomment-70409740.

[WickyNilliams]

Yes, we've seen similar issues in the past with respond.js, see here #52. The fix for that was exactly as you described, they forked respond and removed the polyfill it included itself. Then you can include just one polyfill, and it should work with both (since polyfill matches browser API, any decent polyfill should be a drop in replacement).

Though now I think of it, might it be simply that you need to include the matchMedia addListener polyfill?https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.addListener.js

[Quirksmode]

Thank you so much, the addListener worked brilliantly, I was able to remove the other matchMedia.js :-)

On 18 Jan 2015, at 14:27, Nick Williams notifications@github.com wrote:

Yes, we've seen similar issues in the past with respond.js, see here #52 https://github.com/WickyNilliams/enquire.js/issues/52. The fix for that was exactly as you described, they forked respond and removed the polyfill it included itself. Then you can include just one polyfill, and it should work with both (since polyfill matches browser API, any decent polyfill should be a drop in replacement).

Though now I think of it, might it be simply that you need to include the matchMedia addListener polyfill?https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.addListener.js https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.addListener.js — Reply to this email directly or view it on GitHub https://github.com/WickyNilliams/enquire.js/issues/128#issuecomment-70410117.

[WickyNilliams]

Glad to hear it was that simple

[puittenbroek]

I had a problem with enquire and matchMedia via bower. (Also using gulp which in turns does stuff with the main bower files) I ended up doing this in our project bower.json which resolved the issue in IE9. Based on the comments placed here :)

{
  "name": "our.project",
  "dependencies": {
    "enquire": "2.0.0",
    "matchMedia": "matchmedia#~0.2.0"
  },
  "overrides": {
    "matchMedia": {
      "main": [
        "matchMedia.js",
        "matchMedia.addListener.js"
      ]
    },
    "enquire": {
      "dependencies": {
        "matchMedia": "matchmedia#~0.2.0"
      }
    }
  }
}