CODEWITHSUNDEEP
webpackvue.js
xcopy
xcopy

Reputation: 2288

Issue bundling vuejs 2 components with webpack

I am migrating to vuejs 2 and am having a very peculiar issue with my vue components. When I require() a component, I am receiving the following error in the webpack bundling process:

ERROR in Unexpected token >

The line number for the error is where the require() call is to load the component.

Here is an example of a test component that I am receiving the error for:

<template>
    <div>
        <button>test</button>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {

            }
        }
    }
</script>

My webpack.config.js file is:

const webpack = require('webpack');
require('es6-promise').polyfill();
var path = require("path");

module.exports = {
    entry: {
        ...
    },
    output: {
        //path: path.join(__dirname, "./dist/js"),
        path: './',
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    devServer: {
        ...
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // make sure to exclude 3rd party code in node_modules
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    },
    resolveLoader: {
        root: __dirname + '/node_modules'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue'
        }
    }
};

Any help would be very much appreciated. I have been stumped on this for several hours now.

Upvotes: 1

Views: 642

Answers (1)

xcopy
xcopy

Reputation: 2288

I actually figured this out. Rather, I figured out what was wrong and how to work around it. Basically, the visual studio integration of webpack with task runner no longer works with vue 2. I have no idea why. However, simply running the commands from command line works perfectly and is much easier anyway.

Upvotes: 1

Related Questions