“Unexpected token <” for VueJS running with Web

Question

Note: Before you mark this as a duplicate, I have looked at a few solutions and they don't work:

• [1] https://github.com/webpack/webpack-dev-server/issues/135

• [2] https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#syntax-error-unexpected-token-

• Few other Unexpected token < threads here but they are (probably) unrelated.

I am trying to integrate VueJS into an OSS chat application https://github.com/zulip/zulip . 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:

...
ERROR in ./static/js/components/sidebar.vue
Module parse failed: /srv/zulip/static/js/components/sidebar.vue Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <template>
|     <div>
|         {{ msg }}
 @ ./static/js/src/main.js 3:14-50
...

This is the webpack config:

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]'
                }
            }
        ]
    }
};

Info:

• The first link suggest adding a explicit public path, but that is already done before me.

• There are a few servers running in the code, including django for the main app server and tornado for push events.

• 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/

You can see the changes here: https://github.com/tommyip/zulip/commit/97cf122bda0f7dc09f6c8c3062c55871c315459e

Answer 1

I missed one of the key information, which is the version of Webpack.

The examples shown in Vue and vue-loader's website uses Webpack 2 API, which is slightly different to Webpack 1:

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },

Rules is actually loaders in Webpack 1.