Issue with building React app using Jenkins, some files missing because of file-loader

Question

I'm building a react app using Jenkins, and the build succeeds. However, some components fail to load and I get an error:

Uncaught Error: Cannot find module './sun.png'

Local, everything works fine.

the app structure (server):

/public/images/<images_are_here>

Icon component:

import React from 'react';

const Icon = ({icon, size}) => {

  const iconStyle = {
      "height" : size + 'px',
      "width" : size + 'px',
      "pointerEvents": "none"
  };

  return (
    <img src={require('../../../public/images/' + icon)} style={iconStyle} alt=""/>
  );
};

export default Icon;

Webpack.config.js:

module.exports = {
entry: ['babel-polyfill', __dirname + '/src/index.js'],
output: {
    path: __dirname + '/public/js',
    filename: 'bundle.js',
    publicPath: "/public/images/"
},
module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: '/node_modules/',
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'stage-0',
                    'react'
                ]
            }
        },
        {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.(jpg|png|svg)$/,
            use: ['file-loader?name=[name].[ext]']
        }
        ]
    }
};

Using Rails in the past, I remember the assets used be pre-compiled, generating hashes, where the client knew how to interpolate. What is the case for react + webpack?

Answer 1

Well, replacing the file-loader with url-loader solved the problem. I'll dig in and update when I'll find the actual reason for that, because it's a a strange behaviour (IMO).