Standard usage not working

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 / vuera

Standard usage not working #61