Update to v1

[DarwinniwraD]

[Vue warn]: Invalid prop: type check failed for prop "include". Expected Function, got Array.

found in

--->

at /Users/davidcollingwood/Code/emoji-mart-vue/src/components/search.vue

at /Users/davidcollingwood/Code/emoji-mart-vue/src/components/picker.vue

[jm-david]

@DarwinniwraD that's odd...as far as I can tell the search component is expecting an Array

// search.vue:30
include: {
  type: Array
},

Can you give any more context around how you got that error?

[DarwinniwraD]

this is my code snippet

<picker :emoji-size="30" :skin="1" :native="true" :include="['people']" set="apple" color="#00bc28"  @click="pushEmoji"> </picker>

and my UI is revised like this you can see that there is another problem, the emojis can't be selected or loaded sometime. thank you!

[jm-david]

@DarwinniwraD could you double check what version of emoji-mart-vue you are using? It doesn't look like it's rendering quite right. Here's a quick fiddle I did up using the options you've listed above: https://jsfiddle.net/guv71h8k/

[DarwinniwraD]

yes, I have updated it

{
  "name": "",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build-pro": "export NODE_ENV=production; node build/build.js",
    "build-dev": "export NODE_ENV=development; node build/build.js",
    "unit": "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.15.3",
    "emoji-mart-vue": "^1.0.0",
    "fontawesome": "^4.7.2",
    "install": "^0.8.6",
    "moment": "^2.17.1",
    "npm": "^4.1.2",
    "px2rem-webpack-plugin": "^0.2.0-3",
    "query-string": "^4.2.3",
    "vue": "^2.0.1",
    "vue-infinite-loading": "^2.1.2",
    "vuex": "^2.2.1",
    "weui": "^1.1.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chai": "^3.5.0",
    "chromedriver": "^2.21.2",
    "connect-history-api-fallback": "^1.1.0",
    "cross-spawn": "^4.0.2",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-config-standard": "^6.1.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "^2.0.1",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.9.0",
    "font-awesome": "^4.7.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.7.0",
    "lolex": "^1.4.0",
    "mocha": "^3.1.0",
    "nightwatch": "^0.9.8",
    "node-sass": "4.5.2",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "phantomjs-prebuilt": "^2.1.3",
    "sass-loader": "^6.0.3",
    "selenium-server": "2.53.1",
    "shelljs": "^0.7.4",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "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": "^2.6.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Does it mean that this component need to include the "emoji-mart" dependency? Thank you!

[jm-david]

Cool, your package.json file looks correct. Sometimes dependencies can get out of sync though, so I would also check that the currently installed version is also v1. emoji-mart-vue is the Vue equivalent of emoji-mart so you shouldn't need to include both.

[DarwinniwraD]

👌 , 👍

[DarwinniwraD]

here is some import config snippets, maybe it can help you

<script>
...
import {Picker, Emoji} from 'emoji-mart-vue'
...
export default{
      ...
      components: {
         Picker,
         Emoji
      },
     ...
}
...
</script>

[jm-david]

Unfortunately that doesn't give me much information, but take a look at this file node_modules/emoji-mart-vue/package.json and check whether "version" is set to "1.0.0". If in doubt, deleting the entire "node_modules" directory and doing a complete reinstall is always an option.