React + SSR + webpack + node, unexpected token �PNG

I'm having webapp in react with server side rendering feature running on node server. I'm using local images from assets directory (as shown below:

<img src={require('../../../assets/img/image.png')} width="400" />

which is running fine on the client side, but on the server side, node tries to read the content of the image file and throw below mentioned error.

(function (exports, require, module, __filename, __dirname) { �PNG
SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:605:28)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)

I've tried using file-loader, url-loader but nothing working. webpack configuration for file-loader:

module: {
    rules: [
    {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
    },
    {
        test: /\.(png|jpg|gif)$/,
        use: [
        {
            loader: 'file-loader',
            options: {}
        }
        ]
    }
    ]
},

Can anyone please let me know what the issue here. Or is there any other way possible to use a local image other than require(). Any help would be appreciated.

Thanks ~Satish

Recommended topics

Hot tags