0

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?

Chen
  • 2,958
  • 5
  • 26
  • 45

1 Answers1

0

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).

Chen
  • 2,958
  • 5
  • 26
  • 45
  • You should accept your own answer if that's the actual answer. Also, this question is tagged with "actionhero" but I don't see any link to it? Maybe worth removing. – nembleton Jul 05 '17 at 02:33
  • 1
    Nice. Thanks. Last thing is for others that might have the same problem to be able to find your question and answer, I'd rename the title to something that is "search friendly" describing the issue you had. Something like "Issue with building React app using Jenkins, some files missing because of file-loader" or something alike. Just a suggestion. – nembleton Jul 05 '17 at 15:00