Facing build issue after upgrade of react-scripts

Question

After upgrading react-scripts to version 5, i am facing build issue. Some files are missing after running build command. Sharing before and after screen shot of build command.

Also using craco latest version for configuration.

After creating build main.[hash].chunk.js , main.[hash].chunk.css & runtime-main.[hash].js files are missing from build folder.

Craco config:

    const path = require('path');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = () => {
  const plugins = [];
  // if (process.env.NODE_ENV !== "production") {
  //   plugins.push(new BundleAnalyzerPlugin())
  // }

  return {
    eslint: {
      enable: true,
    },
    style: {
      css: {
        loaderOptions: (cssLoaderOptions, { env, paths }) => {
          cssLoaderOptions.modules = {
            localIdentName: "[local]_[hash:base64:5]",
          };
          return cssLoaderOptions;
        },
      },
    },
    webpack: {
      alias: {
        react: path.resolve(__dirname, '../node_modules', 'react'),
        'react-dom': path.resolve(__dirname, '../node_modules', 'react-dom'),
        'modernizr': path.resolve(__dirname, "./.modernizrrc.js")
      },
      plugins,
      configure: webpackConfig => {
        webpackConfig.resolve.fallback = {
          fs: false,
          path: require.resolve("path-browserify")
        };
        const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
          ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
        );
        webpackConfig.optimization= {
          chunkIds: 'natural',
        };        
        
        const [clientSrc] = webpackConfig.resolve.plugins[scopePluginIndex].appSrcs;
        const services = path.resolve(clientSrc, '../..');

        webpackConfig.resolve.plugins[scopePluginIndex].appSrcs.push(services);

        return webpackConfig;
      }
    },
    devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
      devServerConfig = {
        server: {
          type: 'https'
        },
        https: undefined,
        onBeforeSetupMiddleware: undefined,
        onAfterSetupMiddleware: undefined
      };
      
      return devServerConfig;
    },
  }
};

Answer 1

Have you included INLINE_RUNTIME_CHUNK=false in your build script? This will remove the need of a runtime-chunk file by embedding the code into the newly build index.html file instead.

If the newly built index.html runs then it is not an issue