Heroku "content not from webpack is served from /app/public" despite using all default create-react-app config

Question

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:

2020-05-02T11:18:53.190530+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from

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

2020-05-02T11:18:53.190727+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /

2020-05-02T11:18:53.190910+00:00 app[web.1]: Starting the development server...

2020-05-02T11:18:53.190912+00:00 app[web.1]:

2020-05-02T11:18:53.287654+00:00 heroku[web.1]: State changed from starting to crashed

When I first got this, the statement was accurate. I had a few images that I was loading like src='/image.jpg'. 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.

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?

Project hierarchy:

├── 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

webpack.config.js

mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    // Stop compilation early in production
    bail: isEnvProduction,
    devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && '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 &&
        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 && '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 && '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 =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => 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',
    },

Answer 1

So, I got a Solution, Heroku uses nodejs buildpack as default. You'll need to add that of CRA(Create react App).

First, check the build pack you're using heroku buildpacks -a <appname>

then change to CRA buildpack heroku buildpacks:set mars/create-react-app -a <appname>

Then redeploy.

You can read this article for more configuration