title: "Unexpected token <" for VueJS running with Webpack
body: <p>Note: <strong>Before you mark this as a duplicate</strong>, I have looked at a few solutions and they don't work:</p>
  
  <ul>
  <li>[1] <a href="https://github.com/webpack/webpack-dev-server/issues/135" rel="nofollow noreferrer">https://github.com/webpack/webpack-dev-server/issues/135</a></li>
  <li><p>[2] <a href="https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#syntax-error-unexpected-token-" rel="nofollow noreferrer">https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#syntax-error-unexpected-token-</a></p></li>
  <li><p>Few other <code>Unexpected token &lt;</code> threads here but they are (probably) unrelated.</p></li>
  </ul>
  
  <p>I am trying to integrate VueJS into an OSS chat application <a href="https://github.com/zulip/zulip" rel="nofollow noreferrer">https://github.com/zulip/zulip</a> . I tried to use the standard configuration template from vue-loader which includes single-file-components and hot reload, but when I try to run the server, I get this error:</p>
  
  <pre><code>...
  ERROR in ./static/js/components/sidebar.vue
  Module parse failed: /srv/zulip/static/js/components/sidebar.vue Line 1: Unexpected token &lt;
  You may need an appropriate loader to handle this file type.
  | &lt;template&gt;
  |     &lt;div&gt;
  |         {{ msg }}
   @ ./static/js/src/main.js 3:14-50
  ...
  </code></pre>
  
  <p>This is the webpack config:</p>
  
  <pre><code>var webpack = require('webpack')
  
  module.exports = {
      entry: [
          'webpack-dev-server/client?http://0.0.0.0:9991/socket.io',
          './static/js/src/main.js',
      ],
      devtool: 'eval',
      output: {
          publicPath: 'http://0.0.0.0:9991/webpack/',
          path: './static/js',
          filename: 'bundle.js',
      },
      devServer: {
          port: 9994,
          stats: "errors-only",
          watchOptions: {
              aggregateTimeout: 300,
              poll: 1000,
          },
      },
      module: {
          rules: [
              {
                  test: /\.vue$/,
                  loader: 'vue-loader'
              },
              {
                  test: /\.(png|jpg|gif|svg)$/,
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]?[hash]'
                  }
              }
          ]
      }
  };
  </code></pre>
  
  <p>Info:</p>
  
  <ul>
  <li><p>The first link suggest adding a explicit public path, but that is already done before me.</p></li>
  <li><p>There are a few servers running in the code, including django for the main app server and tornado for push events.</p></li>
  <li><p>The app only exposes port 9991 outside of the development host (vagrant). The webpack-dev-server uses 9994 but is redirected to localhost:9991/webpack/</p></li>
  </ul>
  
  <p>You can see the changes here: <a href="https://github.com/tommyip/zulip/commit/97cf122bda0f7dc09f6c8c3062c55871c315459e" rel="nofollow noreferrer">https://github.com/tommyip/zulip/commit/97cf122bda0f7dc09f6c8c3062c55871c315459e</a></p>