'You may need an appropriate loader to handle this file type.' in Vue.js project

Question

I am getting the following error when I am trying to run "gulp" in my vue.js project after I have added an image tag in my Home.vue component [ <img class="img-fluid" src="../images/logoWhite.png"> ] :

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ModuleParseError: Module parse failed: G:\Projects\Cakes\src\images\logoWhite.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

I read that this error might be caused by babel and how it is configured in webpack.config.js. After trying some solutions listed, I still haven't managed to get it work. I have also tried to create a '.babelrc' file with the presets conditions for babel, but still it didn't work.

This is how 'webpack.config.js' file looks like:

var webpack = require('webpack')

module.exports =  {
  entry: [
    './src/main.js'
  ],
  output: {
    path: "/dist/js",
    publicPath: "/dist/",
    filename: "app.js"
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\//,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  resolve: {
    modulesDirectories: ['node_modules']
  }
}

In package.json, I have the following packages as my devDependencies for babel:

"babel-core": "^6.1.21",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.13.2",
"babel-runtime": "^6.3.13"

Thanks in advance guys!

Answer 1

I had the same problem and my solution was to use 'file-loader'

Install:

npm install --save-dev file-loader

Add the module rule to your webpack.config.js

{ test: /\.(png|jpg|gif)$/, loader: 'file-loader?name=./images/[name].[ext]' }

CSS file:

.content {
    background-image: url('./images/background.jpg');
}

Answer 2

The template section of a .vue file is loaded using vue-html-loader, which will attempt to load local resources (such as image tag src values) using require(<resource>)(details).

The error above is due to the fact that you don't have a webpack loader setup to handle .png files, to fix it you'd need to install and configure a suitable loader - something like this, with url-loader, should work:

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }