1

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

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

tommyip
  • 430
  • 7
  • 16
  • can you look at or share the contents of /srv/zulip/static/js/components/sidebar.vue – NiallJG Jan 25 '17 at 14:27
  • 1
    Take a look at the github commit that I post, it includes all the changes I made to integrate VueJS. – tommyip Jan 25 '17 at 14:28
  • You are still using webpack 1 syntax for your module config. Are you sure that is not causing problems? Webpack 2 syntax is `{ test: /\.vue$/, use: [{ loader: 'vue-loader'}] }` – connexo Jan 09 '18 at 15:12
  • @connexo yes that was the problem, I posted the solution in the answer below. – tommyip Jan 10 '18 at 16:06

1 Answers1

2

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.

tommyip
  • 430
  • 7
  • 16