title: node-sass and sass-loader - Module build failed: TypeError: this.getResolve is not a function at Object.loader
body: <p>I am simply trying to follow a tutorial which tells me to install both node-sass and sass-loader. When I do I get the following error:</p>
  
  <pre><code> ERROR  Failed to compile with 1 errors                                                                       6:21:28 PM
   error  in ./src/components/TodoList.vue
  
  Module build failed: TypeError: this.getResolve is not a function
      at Object.loader (C:\xampp\htdocs\projects\todo-vue\node_modules\sass-loader\dist\index.js:52:26)
  
   @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3de47834","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=0!./src/components/TodoList.vue 4:14-377 13:3-17:5 14:22-385
   @ ./src/components/TodoList.vue
   @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&amp;index=0!./src/App.vue
   @ ./src/App.vue
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
  </code></pre>
  
  <p>My package.json file</p>
  
  <pre><code>{
    "name": "todo-vue",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "Jethro Hazelhurst &lt;j.hazelhurst1994@gmail.com&gt;",
    "private": true,
    "scripts": {
      "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
      "start": "npm run dev",
      "build": "node build/build.js"
    },
    "dependencies": {
      "node-sass": "^4.13.0",
      "sass-loader": "^8.0.0",
      "vue": "^2.5.2"
    },
    "devDependencies": {
      "autoprefixer": "^7.1.2",
      "babel-core": "^6.22.1",
      "babel-helper-vue-jsx-merge-props": "^2.0.3",
      "babel-loader": "^7.1.1",
      "babel-plugin-syntax-jsx": "^6.18.0",
      "babel-plugin-transform-runtime": "^6.22.0",
      "babel-plugin-transform-vue-jsx": "^3.5.0",
      "babel-preset-env": "^1.3.2",
      "babel-preset-stage-2": "^6.22.0",
      "chalk": "^2.0.1",
      "copy-webpack-plugin": "^4.0.1",
      "css-loader": "^3.2.0",
      "extract-text-webpack-plugin": "^3.0.0",
      "file-loader": "^1.1.4",
      "friendly-errors-webpack-plugin": "^1.6.1",
      "html-webpack-plugin": "^2.30.1",
      "node-notifier": "^5.1.2",
      "optimize-css-assets-webpack-plugin": "^3.2.0",
      "ora": "^1.2.0",
      "portfinder": "^1.0.13",
      "postcss-import": "^11.0.0",
      "postcss-loader": "^2.0.8",
      "postcss-url": "^7.2.1",
      "rimraf": "^2.6.0",
      "semver": "^5.3.0",
      "shelljs": "^0.7.6",
      "uglifyjs-webpack-plugin": "^1.1.1",
      "url-loader": "^2.2.0",
      "vue-loader": "^13.3.0",
      "vue-style-loader": "^3.0.1",
      "vue-template-compiler": "^2.5.2",
      "webpack": "^3.12.0",
      "webpack-bundle-analyzer": "^3.6.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0"
    },
    "engines": {
      "node": "&gt;= 6.0.0",
      "npm": "&gt;= 3.0.0"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  }
  </code></pre>
  
  <p>My Vue file where I am setting <code>&lt;style lang="scss"&gt;</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;input type="text" class="todo-input" placeholder="What needs to be done"&gt;
          Todo list goes here
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'todo-list',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>No idea where I am going wrong here.</p>