Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot read property 'map' of undefined

See original GitHub issue

Hi guys,

I’m trying to use your extremely useful plugin in the default Vue.js webpack template. It comes preconfigured and is required in its latest version (@1.5.1). Using Atom, normal JS files lint just well, but in .vue components I receive the following error:

Error: Cannot read property 'map' of undefined
TypeError: Cannot read property 'map' of undefined
    at /Users/robin/Development/skappbar.dev/node_modules/eslint-plugin-html/src/index.js:86:39
    at Array.forEach (native)
    at Object.postprocess (/Users/robin/Development/skappbar.dev/node_modules/eslint-plugin-html/src/index.js:85:19)
    at processText (/Users/robin/Development/skappbar.dev/node_modules/eslint/lib/cli-engine.js:252:30)
    at CLIEngine.executeOnText (/Users/robin/Development/skappbar.dev/node_modules/eslint/lib/cli-engine.js:761:26)
    at Object.cli.execute (/Users/robin/Development/skappbar.dev/node_modules/eslint/lib/cli.js:181:36)
    at lintJob (/Users/robin/.atom/packages/linter-eslint/lib/worker.js:35:10)
    at /Users/robin/.atom/packages/linter-eslint/lib/worker.js:69:20
    at Emitter.emit (/Users/robin/.atom/packages/linter-eslint/node_modules/process-communication/node_modules/sb-event-kit/lib/emitter.js:70:19)
    at /Users/robin/.atom/packages/linter-eslint/node_modules/process-communication/node_modules/sb-communication/lib/main.js:22:23

While typing / saving the file.

The file is the default Hello.vue from the webpack template:

<template>
  <div class="hello">
    <h1>{{ msg }}<span>hello World!!!</span></h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!',
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1 {
  color: #42b983;
  span {
      color: red;
  }
}
</style>

My package.json:

{
  "name": "skappbar.dev",
  "version": "1.0.0",
  "description": "XXX",
  "author": "XXX",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "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": {
    "vue": "^1.0.21",
    "babel-runtime": "^6.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.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": "^2.1.5",
    "css-loader": "^0.23.0",
    "eslint": "^2.10.2",
    "eslint-config-airbnb-base": "^3.0.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-import": "^1.8.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.12.0",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.15",
    "karma-coverage": "^0.5.5",
    "karma-mocha": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.24",
    "karma-webpack": "^1.7.0",
    "lolex": "^1.4.0",
    "mocha": "^2.4.5",
    "nightwatch": "^0.8.18",
    "ora": "^0.2.0",
    "phantomjs-prebuilt": "^2.1.3",
    "sass-loader": "^4.0.0",
    "selenium-server": "2.53.0",
    "shelljs": "^0.6.0",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.3.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
  }
}

Using it on node a v6.3.1 and everything else runs smoothly.

Any idea on why this is happening and how it can be fixed would be greatly appreciated.