I am currently facing the below error on my code when I run it.

 ERROR in ./node_modules/vue-phone-number-input/dist/img/flags.9c96e0ed.png 1:0 Module parse 
 failed: Unexpected character '�' (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 (Source code omitted for this binary file) ne-number- 
 input.css @ ./node_modules/vue-phone-number-input/dist/vue-phone-number-input.css 
 (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-phone-number-input/dist/vue-phone- 
 number-input.css) 4:36-71 @ ./node_modules/vue-phone-number-input/dist/vue-phone-number- 
 input.css @ ./src/main.js

I have tried several solution that is suggested on Google but still not able to resolve the error.

Below is the code sample:

let webpack = require('webpack'),
path = require('path'),
{VueLoaderPlugin} = require('vue-loader');

console.log( path.resolve(__dirname, './public'));

module.exports = {
entry: "./src/main.js",

output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'app.js',
    //publicPath: './public'
    publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
    publicPath: '/assets/', // server-relative
    publicPath: 'assets/', // relative to HTML page
    publicPath: '../assets/', // relative to HTML page
    publicPath: '', // relative to HTML page (same directory)
},

resolve: {
    alias: {
        '@app': path.resolve(__dirname, './src'),
        'vue$': 'vue/dist/vue.esm.js'
    }
},

module: {
    rules: [
        {
            test: /\.vue$/,
            use: [
                { loader: 'vue-loader' }
            ],
        },
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        }
    ]
},

plugins: [
    new VueLoaderPlugin()
]
};

Can anybody kindly help to enlighten me on this?

Thank you in advance.

CodePudding user response：

under your modules section, you need to add a handler for png files. Maybe file-loader? https://www.npmjs.com/package/file-loader