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!
