vue-loader, webpack "need an appropriate loader" for templates in .vue files

[donnyjeremiah]

Which package or loader should I use to let webpack transform the templates in my .vue files. Should I use vue-html-loader or is it not used for Vue 2.0?

ERROR in ./src/App.vue
Module parse failed: C:\node\aaaaa\customer\src\App.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template lang="html">
|   <div id="app">
|     <h1>This is from App.vue</h1>
 @ ./src/main.js 2:0-27

My dependencies are

"devDependencies": {
  "babel-core": "^6.0.0",
  "babel-loader": "^6.0.0",
  "babel-preset-es2015": "^6.0.0",
  "css-loader": "^0.25.0",
  "vue-loader": "^10.0.0",
  "vue-template-compiler": "^2.1.0",
  "webpack": "^2.1.0-beta.25"
}

In my webpack.config.js

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: './src',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: './src',
        exclude: /node_modules/,
        query: { //https://github.com/babel/babel-loader
          presets: ['es2015']
        }
      }
    ]
  }

[yyx990803]

There seems to be nothing wrong in the config, please provide an actual repo for reproduction. Alternatively please use vue-cli to scaffold your project.

[dumuchenglin123]

me too ,the same question, I want to know why???

[ggJSC]

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

This is my config and I'm trying to simply get a single bundle.js file in order to be used by a different part of the system that handles file loading yes the moment it tries to handle any .vue files it fails with "need appropriate loader".

Reopen this, it's obviously not resolved. Some of us can't figure out how to integrate vue-cli with our current backend.

[eminoda]

checkout vue-loader version,if use 15.x.x ,may be emit this error.
u can do this below:

1. update new vue-clie
2. change vue-loader version(i use "vue-loader": "^13.3.0", ok)

symfony/webpack-encore#311

[Neonit]

14.x.x worked for me, while 15.x.x didn't.

[yyx990803]

This is an extremely old issue and unlikely related to anything in v15.0.0. If you are running into anything with v15, open a new issue with proper reproductions.