ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?

Question

I have a Webpack running with ReactJS, and I am attempting to grab an image and display it but getting an error: Uncaught Error: Cannot find module "../media/interiorTest.jpg"

And here is what I tried:

  <div>
    <img src={require("../media/interiorTest.jpg")}/>
  </div>

And the directory tree is (I am trying to fetch interiorTest.jpg from home-page.js):

And my webpack.config.js is:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        test: /\.(js|jsx)$/,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: [
    new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: {comments: false },
      mangle: false,
      sourcemap: false,
      minimize: true,
      mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] }
    }),
    new ExtractTextPlugin('src/public/stylesheets/app.css', {
      allChunks: true
    })
  ]
};

module.exports = config;

../ would take you just into `components` folder.. so make it `../../public/media`. Or if the public is really public you should just use plain old `src="/media/interiorTest.jpg"` — Hardy, Sep 09 '16 at 20:02
@Hardy Tried the first but got the error: `Uncaught Error: Cannot find module "../../public/media/interiorTest.jpg"` and when I tried the second suggestion without the src={require()} and just src="", I got `GET http://localhost:8080/media/interiorTest.jpg 404 (Not Found)` — , Sep 09 '16 at 20:21
Did you forget to paste your loader definition matching jpg? — Juho Vepsäläinen, Sep 10 '16 at 03:42
@JuhoVepsäläinen No the webpack.config.js is exactly how I'm using. Sorry but what do you mean by pasting loader definition matching jog? — , Sep 10 '16 at 03:46
@JuhoVepsäläinen Just checking in to see if you've seen my last comment. Please let me know — , Sep 10 '16 at 05:21
@LyManeug Try changing the src to `src="/src/public/media/interiorTest.jpg"`, It should work since your contentBase is the parent directory of `src` — Dhruv Kumar Jha, Sep 10 '16 at 06:41
@RandomUser Wow Thank you so much! Finally worked! Please make the answer so I can accept it. Sorry but what do you mean contentBase? — , Sep 10 '16 at 07:42

score 1 · Accepted Answer · answered Sep 10 '16 at 08:03

By looking at the code in webpack.config.js and the screenshot you included, Your directory structure looks like

app/
    src/
         actions/
         components/
         ...
         public/

And in webpack.config.js you have this code

  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },

contentBase property defines the directory from where files will be loaded when the server is running, And since you have set it as './', It means the files/data will be loaded from the app directory.

And that's the reason to link files from public directory you have to include /src/public in path as well, something like src="/src/public/folder/where/image/is-located/image.jpg"

In this case

  <div>
    <img src="/src/public/media/interiorTest.jpg" alt="" />
  </div>

Note

Usually the code is divided into two folders, src to store the code you're working on and public for webpack to store the compiled code and for static assets. And we just set /public as the contentBase.

It will be worth your time to do some research regarding directory structure for react and javascript applications
Its good to have alt="" for images, Just enter the alt text as it best describes the image.

Wow you are seriously the realest! Thank you ton! Learned so much. Accepted the answer and upvoted. Could you please take a look at this as well? In need of your expertise http://stackoverflow.com/questions/39423965/reactjs-how-to-fix-an-element-to-its-current-position-despite-rendering-of-new — , Sep 10 '16 at 08:17

ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?

1 Answers1