Webpack-encore: vue-loader, webpack "need an appropriate loader" for templates in .vue files with vue loader 15.0.10

[sumitpateltech]

I am facing issue while running vue app with webpack.

Error :

ERROR in ./src/App.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
`| <template>
 |     <div>
 |   <p>Hello World!</p>`
 @ ./src/app.js 2:0-27 6:19-22
 @ multi ./src/app.js

My dependencies are

"devDependencies": {
"css-loader": "^0.28.11",
"vue-loader": "^15.0.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"

}

In my webpack.config.dev.js

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development',
entry: [
    './src/app.js'
],
module: {
    rules: [{
        test: /\.vue$/,
        use: 'vue-loader'
    }]
},
plugins: [
    new VueLoaderPlugin()
]
}

[Lyrkan]

Hi @sumitpateltech,

Are you using Encore? Your webpack.config.js file contains a raw Webpack config so I'm not sure that your issue is related to this project.

Two remarks there though:

• Your file should have the extension .vue (lowercase only) to be matched by the vue-loader rule
• It seems that there is a compatibility issue with vue-loader 15 when using Encore (see #311), so I'd recomment adding vue-loader@^14.2.2 instead (and removing the VueLoaderPlugin)

[sumitpateltech]

it's working fine with vue-loader@^14.2.2 but it's not working in vue-loader@^15.0.10 event I am not using Encore.

[Lyrkan]

@sumitpateltech: You should probably open an issue on the following project then: https://github.com/vuejs/vue-loader

I'm closing this one since this is unrelated to Encore.

[avcheck24]

Please go through this comment if you are using Encore otherwise this.

[dgray16]

My case is not related to encore exactly but to webpack.
With 4.29 I got unexpected token error.
With 4.28.4 works as expected.

Salute to @tomattos

[exptom]

@dgray16 I'm getting exactly the same issue after upgrading to webpack 4.29

[Lyrkan]

Hi @dgray16 and @exptom,

Is this really related to this issue? Do you also have the "You may need an appropriate loader to handle.vue files" message?

If that's not the case, could you open another issue with as many details as possible? (exact error message, webpack.config.js file, versions of your dependencies, etc.)

[Lyrkan]

I think that's probably the same issue than this one: https://github.com/webpack/webpack/issues/8656

You could try the workaround given by Sokra in the following comment: https://github.com/webpack/webpack/issues/8656#issuecomment-456010969

[akshaybharambe14]

for me, reinstalling babel and webpack fixed this issue.

npm install babel-core babel-loader babel-preset-es2015 webpack --save-devnpm install babel-core babel-loader babel-preset-es2015 webpack --save-dev

[RogueCode007]

I'm also facing this same issue, i've tried the suggested solution by installing [email protected] but it still throws up the same error:
Error:

ERROR in ./src/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div id="container">
|     <div id="header">
 @ ./src/index.js 2:0-27 10:17-20

Here's my webpack.config.js file:

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader'
          }
        ],
      }, {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {js: 'awesome-typescript-loader?silent=true'}
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'stage-3', 'env', 'vue']
      }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },

  devtool: '#eval-source-map'
}  

Here's my package.json:

"dependencies": {
    "@babel/plugin-transform-runtime": "^7.10.4",
    "@babel/runtime": "^7.10.4",
    "babel-preset-es2015": "^6.24.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.6.11"
  },
"devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "babel-preset-stage-3": "^6.24.1",
    "babel-preset-vue": "^2.0.2",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "terser-webpack-plugin": "^3.0.6",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

[versedi]

@RogueCode007 Vue files work for me out of the box with

  Encore.enableVueLoader(() => { }, {
    useJsx: true,
  })

Why are you modifying webpack configuration directly instead of via Encore?