title: Heroku "content not from webpack is served from /app/public" despite using all default create-react-app config
body: <p>I'm deploying a pretty basic front-end only React app (essentially a static site) to Heroku via an auto-deploy integration with Github. I've done this before with a more complicated app and had no issues. But now I'm getting the following output in my logs when I deploy:</p>
  
  <blockquote>
    <p>2020-05-02T11:18:53.190530+00:00 app[web.1]: [34mℹ[39m
    [90m｢wds｣[39m: webpack output is served from </p>
    
    <p>2020-05-02T11:18:53.190635+00:00 app[web.1]: [34mℹ[39m
    [90m｢wds｣[39m: Content not from webpack is served from /app/public</p>
    
    <p>2020-05-02T11:18:53.190727+00:00 app[web.1]: [34mℹ[39m
    [90m｢wds｣[39m: 404s will fallback to /</p>
    
    <p>2020-05-02T11:18:53.190910+00:00 app[web.1]: Starting the development
    server...</p>
    
    <p>2020-05-02T11:18:53.190912+00:00 app[web.1]: </p>
    
    <p>2020-05-02T11:18:53.287654+00:00 heroku[web.1]: State changed from
    starting to crashed</p>
  </blockquote>
  
  <p>When I first got this, the statement was accurate. I had a few images that I was loading like <code>src='/image.jpg'</code>. But I moved all assets that I'm actually using in my app into src/images and am importing them as components now. I've gone over every file in my src directory four times and there are no longer any references to files in the public directory. </p>
  
  <p>I haven't done any custom Webpack configuration, it's all default CRA. So why does it still throw this error and how do I resolve it? </p>
  
  <p>Project hierarchy:</p>
  
  <pre><code>├── src
  │   └── index.js
  │   └── app.js (etc)
  │   └── images (this is where I am importing any images into my components now)
  ├── public
  │   ├── index.html
  │   ├── favicon.jpg
  │   │── manifest.json
  │   └── robots.txt
  ├── package.json
  ├── package-lock.json
  ├── .gitignore
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>mode: isEnvProduction ? 'production' : isEnvDevelopment &amp;&amp; 'development',
      // Stop compilation early in production
      bail: isEnvProduction,
      devtool: isEnvProduction
        ? shouldUseSourceMap
          ? 'source-map'
          : false
        : isEnvDevelopment &amp;&amp; 'cheap-module-source-map',
      // These are the "entry points" to our application.
      // This means they will be the "root" imports that are included in JS bundle.
      entry: [
        // Include an alternative client for WebpackDevServer. A client's job is to
        // connect to WebpackDevServer by a socket and get notified about changes.
        // When you save a file, the client will either apply hot updates (in case
        // of CSS changes), or refresh the page (in case of JS changes). When you
        // make a syntax error, this client will display a syntax error overlay.
        // Note: instead of the default WebpackDevServer client, we use a custom one
        // to bring better experience for Create React App users. You can replace
        // the line below with these two lines if you prefer the stock client:
        // require.resolve('webpack-dev-server/client') + '?/',
        // require.resolve('webpack/hot/dev-server'),
        isEnvDevelopment &amp;&amp;
          require.resolve('react-dev-utils/webpackHotDevClient'),
        // Finally, this is your app's code:
        paths.appIndexJs,
        // We include the app code last so that if there is a runtime error during
        // initialization, it doesn't blow up the WebpackDevServer client, and
        // changing JS code would still trigger a refresh.
      ].filter(Boolean),
  output: {
        // The build folder.
        path: isEnvProduction ? paths.appBuild : undefined,
        // Add /* filename */ comments to generated require()s in the output.
        pathinfo: isEnvDevelopment,
        // There will be one main bundle, and one file per asynchronous chunk.
        // In development, it does not produce real files.
        filename: isEnvProduction
          ? 'static/js/[name].[contenthash:8].js'
          : isEnvDevelopment &amp;&amp; 'static/js/bundle.js',
        // TODO: remove this when upgrading to webpack 5
        futureEmitAssets: true,
        // There are also additional JS chunk files if you use code splitting.
        chunkFilename: isEnvProduction
          ? 'static/js/[name].[contenthash:8].chunk.js'
          : isEnvDevelopment &amp;&amp; 'static/js/[name].chunk.js',
        // webpack uses `publicPath` to determine where the app is being served from.
        // It requires a trailing slash, or the file assets will get an incorrect path.
        // We inferred the "public path" (such as / or /my-project) from homepage.
        publicPath: paths.publicUrlOrPath,
        // Point sourcemap entries to original disk location (format as URL on Windows)
        devtoolModuleFilenameTemplate: isEnvProduction
          ? info =&gt;
              path
                .relative(paths.appSrc, info.absoluteResourcePath)
                .replace(/\\/g, '/')
          : isEnvDevelopment &amp;&amp;
            (info =&gt; path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
        // Prevents conflicts when multiple webpack runtimes (from different apps)
        // are used on the same page.
        jsonpFunction: `webpackJsonp${appPackageJson.name}`,
        // this defaults to 'window', but by setting it to 'this' then
        // module chunks which are built will work in web workers as well.
        globalObject: 'this',
      },
  </code></pre>