use vue-loader.Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

[springeye]

scripts.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import named from 'vinyl-named';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import plumber from 'gulp-plumber';
import livereload from 'gulp-livereload';
import args from './lib/args';

const ENV = args.production ? 'production' : 'development';

gulp.task('scripts', (cb) => {
  return gulp.src('app/scripts/*.js')
    .pipe(plumber())
    .pipe(named())
    .pipe(gulpWebpack({
      devtool: args.sourcemaps ? 'source-map': null,
      watch: args.watch,
      plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify(ENV)
          },
          '__ENV__': JSON.stringify(ENV),
          '__VENDOR__': JSON.stringify(args.vendor)
        }),
      ].concat(args.production ? [
        new webpack.optimize.UglifyJsPlugin()
      ] : []),
      module: {
        preLoaders: [{
          test: /\.js$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }, {
          test: /\.vue$/,
          loader: 'eslint',
          exclude: /node_modules/
        },],
        loaders: [{
          test: /\.js$/,
          loader: 'babel'
        },{
          test: /\.vue$/,
          loader: 'vue'
        },]
      },
      eslint: {
        configFile: '.eslintrc'
      }
    }))
    .pipe(gulp.dest(`dist/${args.vendor}/scripts`))
    .pipe(gulpif(args.watch, livereload()));
});

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"/>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue 2.0!'
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Run

npm run dev:chrome

show error:

ERROR in ./app/scripts/App.vue

/Users/apple/codes/hbox-chrome-extension/app/scripts/App.vue
  8:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

✖ 1 problem (1 error, 0 warnings)

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=template&index=0!./app/scripts/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/logo.png in /Users/apple/codes/hbox-chrome-extension/app/scripts
 @ ./~/vue-loader/lib/template-compiler.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=template&index=0!./app/scripts/App.vue 1:198-226

[HaNdTriX]

Thanks @henjue for your report!

First of all you might want to change the glob pattern to tell webpack to include .vue files for webpack.

...
return gulp.src('app/scripts/*.{js,vue}')
...

Secondary I recommend to configure eslint for vue files like this:

...
  preLoaders: [{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/
  }],
...

And lastly I believe this error is caused by eslint. It is therefor not a bug cause by this generator. You probably can resolve it by adding the correct vue-eslint config.

[springeye]

thks!