title: Vue router - cannot lazy load component - Unexpected Token
body: <p>I am trying to <a href="https://router.vuejs.org/en/advanced/lazy-loading.html" rel="noreferrer">lazy load</a> the Login component for my login route. When building webpack I get:</p>
  
  <pre><code>SyntaxError: Unexpected Token
  </code></pre>
  
  <p>The Login.vue component works fine if I import and assign it the same way I do the Home route.</p>
  
  <p>I'm baffled because I believe this code should work based on <a href="https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/" rel="noreferrer">this blog</a>. </p>
  
  <p>The line that fails below is:</p>
  
  <pre><code>component: () =&gt; import('../components/Login.vue'),
  </code></pre>
  
  <h2>router.js</h2>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from '../components/Home.vue'
  
  
  Vue.use(VueRouter)
  
  
  export default new VueRouter({
      mode: 'history',
  
      routes: [
          {
              path: '/',
              name: 'home',
              component: Home,
              meta: {
                  permission: "anonymous",
              },
          },
  
          {
              path: '/login/',
              name: 'login',
              component: () =&gt; import('../components/Login.vue'),
              meta: {
                  permission: "anonymous",
              },
          },
      ],
  })
  </code></pre>
  
  <h2>package.json</h2>
  
  <pre><code>"dependencies": {
      "vue": "^2.3.4"
  },
  "devDependencies": {
      "babel-core": "^6.25.0",
      "babel-eslint": "^7.2.2",
      "babel-loader": "^7.1.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-stage-2": "^6.22.0",
      "cross-env": "^3.0.0",
      "css-loader": "^0.26.4",
      "eslint": "^3.12.2",
      "eslint-config-standard": "^6.2.1",
      "eslint-friendly-formatter": "^2.0.5",
      "eslint-loader": "^1.5.0",
      "eslint-plugin-html": "^1.7.0",
      "eslint-plugin-promise": "^3.4.0",
      "eslint-plugin-standard": "^2.0.1",
      "file-loader": "^0.9.0",
      "less": "^2.7.2",
      "less-loader": "^4.0.5",
      "style-loader": "^0.18.2",
      "uiv": "^0.11.4",
      "vee-validate": "^2.0.0-rc.7",
      "vue-acl": "^2.1.10",
      "vue-js-cookie": "^2.0.0",
      "vue-loader": "^13.0.2",
      "vue-quill-editor": "^2.2.4",
      "vue-resource": "^1.3.4",
      "vue-router": "^2.7.0",
      "vue-template-compiler": "^2.1.0",
      "vuex": "^2.3.1",
      "webpack": "^2.7.0",
      "webpack-bundle-tracker": "^0.2.0",
      "webpack-dev-server": "^2.5.1"
  }
  </code></pre>
  
  <h2>Screenshot of compilation error</h2>
  
  <p><a href="https://i.stack.imgur.com/RHggf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RHggf.png" alt="Screenshot of error during compilation"></a></p>