Standard usage not working

[holmesworcester]

I'm trying to use Vue in React using the standard usage but it's returning the following error message. It seems like Babel still expects the .vue files to be valid JSX.

It's worth noting that I'm also very new to react, webpack, and everything.

The error:

Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:0)

  3 | </template>
  4 | 
> 5 | <script>
    | ^
  6 | export default {
  7 | 	data () {
  8 | 		return {

BabelLoaderError: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:0)

  3 | </template>
  4 | 
> 5 | <script>
    | ^
  6 | export default {
  7 | 	data () {
  8 | 		return {

My babel.rc:

{
   "presets":["es2015", "react", "stage-0"],
   "plugins": ["vuera/babel"]
}

My webpack.config.js:

{
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var plugins = [
  new ExtractTextPlugin('[name]', {
      allChunks: true
  })
]

if (process.env.NODE_ENV == "production") {
  plugins.push(
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
  )
}

//create entries
var pages = [
  'index',
]

var entries = {}
for (var i = 0; i < pages.length; i++){
  var fileName = pages[i]

  entries['js/' + fileName + '.js'] = path.resolve(__dirname, 'main', 'static', 'js', 'pages', fileName + '.jsx')
  entries['css/' + fileName + '.css'] = path.resolve(__dirname, 'main', 'static', 'sass', fileName + '.scss')
}

const compiler = {
  entry: entries,
  resolve: {
    alias: {
      components: path.resolve(__dirname, 'main', 'static', 'js', 'components'),
      utilities: path.resolve(__dirname, 'main', 'static', 'js', 'utilities'),
      images: path.resolve(__dirname, 'main', 'static', 'images'),
      sass: path.resolve(__dirname, 'main', 'static', 'sass'),
    },
    extensions: ['', '.js', '.jsx', '.png', '.jpg', '.svg'],
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        test: /\.(jsx|js|vue)$/,
      },
      {
        test: /\.module\.scss$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass',
        //loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
      },
      {
          test: /^((?!\.module).)*\.scss$/,
          loader: ExtractTextPlugin.extract('css!sass')
      },
      {
        test: /\.(png|jpg|svg)$/,
        loader: 'url-loader',
      },
    ],
  },
  output: {
    path: "./main/static/dist",
    filename: "[name]",
  },
  plugins: plugins
};

module.exports = compiler;

}

[akxcv]

I think the problem is that you didn't set up your project correctly for using Vue's single file components. Please take a look at https://vuejs.org/v2/guide/single-file-components.html