title: Webpack Error: Module not found: Error: Cannot resolve 'file' or 'directory'
body: <p>I am using create-react-app to teach myself React. However, I came across an error which isn't making any sense to me.</p>
  
  <p>The error is: </p>
  
  <p><code>Error: Child compilation failed:
    Module not found: Error: Cannot resolve 'file' or 'directory' ./src/name-icon.  png in C:\Users\Jacob\college-canoe:
    Error: Cannot resolve 'file' or 'directory' ./src/name-icon.png in C:\Users\Ja  cob\college-canoe</code></p>
  
  <p>I see what WebPack "thinks" the problem is, but my code doesn't actually call for name-icon anywhere. It used to, but I changed the name to nameIcon. The only snippet of code that actually is using that image is:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import nameIcon from './photos/nameIcon.png';
  
  export default class NavBar extends Component {
    render() {
      return (
    &lt;div className="navbar-container"&gt;
      &lt;ul className="navbar-top-right"&gt;
        &lt;img className="icon" src={nameIcon} /&gt;
        &lt;li&gt;&lt;a className="navbar" href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a className="navbar" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a className="navbar" href="#"&gt;Compare&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a className="navbar" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>The problem even persists when I comment out the code using nameIcon. I'm totally lost here and any help would be great.</p>
  
  <p><strong>EDIT: added in webpack.config.js</strong></p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var CaseSensitivePathsPlugin = require('../index.js'); // use inside the npm package
  
  // We use the NODE_ENV in our automation commands to differentiate environments
  var production =
    process.env.NODE_ENV === 'production' ||
    process.env.NODE_ENV === 'preprod';
  
  // Setup our plugins.
  var plugins = [
    // attaches the webpack-generated JS to our main HTML file
    new HtmlWebpackPlugin({template: './src/index.html'}),
    // create global access to the NODE_ENV within our Webpacked code:
    new webpack.DefinePlugin({
      __ENV__: JSON.stringify(process.env.NODE_ENV)
    }),
    // http://gaearon.github.io/react-hot-loader/getstarted/
    new webpack.HotModuleReplacementPlugin(),
    // Mac doesn't care about case, but linux servers do, so enforce...
    new CaseSensitivePathsPlugin()
  ];
  
  // In production we do a bit more...
  if (production) {
    plugins.concat(
      [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        })
      ]);
  }
  
  const devEntry = [
      'webpack-dev-server/client?http://0.0.0.0:3000', // tells client where to get hot reloads
      'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
      'babel-polyfill', // for full ES6 compatibility on older devices
      './src/init.js'
    ];
  const prodEntry = [
      'babel-polyfill', // for full ES6 compatibility on older devices
      './src/init.js'
  ];
  
  const theEntry = (production) ? prodEntry : devEntry;
  
  module.exports = {
  
    // Bundle to our dist folder as a main.js file.
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'main.js',
      publicPath: '/'
    },
  
    devtool: 'sourcemap',
  
    // Our master entry point.
    entry: theEntry,
  
    // Extra helpers to make require or include easier.
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    },
  
    module: {
      loaders: [{
        test: /\.(js|jsx)$/,
        // in dev only, hotload
        loader: production ? 'babel' : 'react-hot!babel',
        // other babel options are specified in .babelrc
        exclude: /node_modules/
      }, {
        test: /\.json$/,
        loader: 'json'
      }]
    },
  
    plugins: plugins
  };
  </code></pre>
  
  <p><strong>EDIT 2: Added project structure.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/FowMl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FowMl.png" alt="Project Structure"></a></p>
  
  <p><strong>EDIT 3: Still have no idea what the problem is, but renaming nameIcon as name-icon and putting it back into /src/ and having a second copy in my /photos/ folder somehow fixed it. I'll have to come back to this later at some point.</strong></p>