Uncaught TypeError: Cannot read property 'install' of undefined

I have been using vue-masonry for some time in my project but have recently bought and Mac and now cannot get it to work. The project compiles fine but gives the following error at runtime:

Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?a427:4338)
    at eval (main.js?1c90:15)
    at Object.<anonymous> (app.js:2281)
    at __webpack_require__ (app.js:660)
    at fn (app.js:86)
    at Object.<anonymous> (app.js:3687)
    at __webpack_require__ (app.js:660)
    at app.js:709
    at app.js:712

When I comment out the line Vue.use(VueMasonryPlugin) from my main.js file, the Vue app renders correctly (although there is obviously an error on the route that contains the masonry content). Here is my main.js:

import Vue from 'vue'
import Buefy from 'buefy'
import App from './App'
import Vuelidate from 'vuelidate'
import firebase from 'firebase'
import VueMasonryPlugin from 'vue-masonry'
import VueLocalStorage from 'vue-localstorage'
import VueAnalytics from 'vue-analytics'
import router from './router'
import store from './store'

Vue.use(Buefy)
Vue.use(Vuelidate)
Vue.use(VueMasonryPlugin)
Vue.use(VueLocalStorage, {name: 'ls'})
Vue.use(VueAnalytics, {id: 'UA-[REMOVED]', router})

Vue.config.productionTip = false

firebase.initializeApp({
  [REMOVED]
})

let appSetup = false

firebase.auth().onAuthStateChanged(() => {
  if (!appSetup) {
    /* eslint-disable no-new */
    appSetup = true
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  }
})

And here is my package.json:

  [REMOVED]
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "buefy": "^0.4.0",
    "firebase": "^4.1.1",
    "moment": "^2.18.1",
    "vue": "^2.2.2",
    "vue-analytics": "^4.2.1",
    "vue-localstorage": "^0.3.0",
    "vue-masonry": "^0.10.10",
    "vue-router": "^2.2.0",
    "vuefire": "^1.4.2",
    "vuelidate": "^0.4.3",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-istanbul": "^3.1.2",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
    "chromedriver": "^2.27.2",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.0",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.14.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^2.0.1",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sinon-chai": "^1.2.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.5.3",
    "opn": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.5",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "sinon": "^2.3.2",
    "sinon-chai": "^2.8.0",
    "sw-precache-webpack-plugin": "^0.11.2",
    "url-loader": "^0.5.7",
    "vue-loader": "^12.2.1",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.2.4",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Any help that you could give would be much appreciated. Thanks!

[hrmshandy]

I have some problem,

use { } in import, like this: import {VueMasonryPlugin} from ‘vue-masonry’;

It works for me.

[shershen08]

@matthewpull can you try this solution as @hrmshandy propoed:

import {VueMasonryPlugin} from 'vue-masonry';