1

I have a React project that uses webpack with some file-loader rules. I was trying to import/require an image in my React component (JSX) like this:

<img src={require('../../assets/images/msg.png')} />

in a macOS computer and it throws this error:

ERROR in ./src/components/Header/index.js
Module not found: Error: Can't resolve '../../assets/images/search.jpg' in '/Users/leonimurilo/Personal projects/4Petson/src/components/Header'
 @ ./src/components/Header/index.js 165:56-97
 @ ./src/components/App/index.js
 @ ./src/routes.js
 @ ./src/index.js
 @ multi ./src/webpack-public-path webpack-hot-middleware/client?reload=true ./src/index.js

surprisingly when I tried to run the project in a windows 7 computer, it worked perfectly!

Here is my webpack module object:

  module: {
    rules: [
      {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
      {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
      {test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']}
    ]
  }

Can someone help me solving this?

Leoni
  • 116
  • 9
  • Possible duplicate of [How to load image files with webpack file-loader](https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader) – Aaqib Oct 26 '17 at 21:43
  • What I don't understand is why it works on windows but not on Mac – Leoni Oct 26 '17 at 22:02
  • I have same problem. Have you solve this ? IF yes then please help me out. Thanks – Hiren Jan 30 '19 at 05:54

1 Answers1

0

Even though the versions were the same, updating file-loader to the latest version fixed the issue.

Leoni
  • 116
  • 9