Rollup-plugin-vue: Failed to integrate babel with vue: Unexpected token <template>

Created on 3 Sep 2018  路  2Comments  路  Source: vuejs/rollup-plugin-vue

Expected behavior

Successfully integrate babel

Actual behavior

Failed to integrate babel

Steps to reproduce the behavior

$ git clone https://coding.net/u/hilojack/p/my-rollup-issue/git vue2
$ cd vue2
$  npm i
$ rollup -c -w
[!] (babel plugin) SyntaxError: /Users/hilojack/www/egg/vue2/src/App.vue: Unexpected token (1:0)
src/App.vue (1:0)
SyntaxError: /Users/hilojack/www/egg/vue2/src/App.vue: Unexpected token (1:0)
> 1 | <template>
    | ^
  2 |     <div class="container">

rollup.config.js

import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import VuePlugin from "rollup-plugin-vue";

import replace from 'rollup-plugin-replace';

import uglify from 'rollup-plugin-uglify';
//import postcss from 'rollup-plugin-postcss';

export default{
    //input: "src/main.js",
    input: ["src/index.js"],
    output: {
        format: "esm",
        name: "myBundle",
        dir: "dist",
        //file: "dist/bundle.js",
        paths: {
            vue: "https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.esm.browser.js",
        }
    },
    experimentalCodeSplitting: true,
    external: ["lodash", "vue"],
    watch: {
        //exclude: ['node_modules/**', 'dist/**',], //default  ignore
        include: ['src/**','src/App.vue'],
    },
    plugins:[
        babel({ exclude: 'node_modules/**' }),
        json(),
        //resolve({ jsnext: true, main: true, browser: true, }),
        resolve({ browser: true, }),
        commonjs(),
        VuePlugin(),
        replace({
          exclude: 'node_modules/**',
          ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
        }),
        (process.env.NODE_ENV === 'production' && uglify()),
    ],
};

Most helpful comment

Plugin order matters here, putting VuePlugin() at the start of the list would help.

All 2 comments

Plugin order matters here, putting VuePlugin() at the start of the list would help.

Add babel({ exclude: 'node_modules/**', include: '**/*.js' }).

Was this page helpful?
0 / 5 - 0 ratings