"Uncaught Error: Config file /config/runtime.json cannot be read." in console

Question

I am developing a project with laravel-backend and react-frontend. There are no other problems with the backend, and when I run the front, nothing is displayed on localhost:3000, and the following error appears in the console window.

config.js:805 Uncaught Error: Config file /config/runtime.json cannot be read. Error code is: undefined. Error message is: FileSystem.readFileSync is not a function
    at push../node_modules/config/lib/config.js.util.parseFile (config.js:805:1)
    at push../node_modules/config/lib/config.js.util.loadFileConfigs (config.js:685:1)
    at new Config (config.js:116:1)
    at Object.<anonymous> (config.js:1442:1)
    at ./node_modules/config/lib/config.js (config.js:1453:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (api.js:14:1)
    at ./src/@mock-api/data/apps.chat.js (apps.chat.js:453:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (users.js:151:1)
    at ./src/@mock-api/index.js (index.js:13:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (constants.js:49:1)
    at ./src/index.js (index.js:87:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at 1 (store.js:44:1)
    at __webpack_require__ (bootstrap:856:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:65

These errors appeared at the last step in fixing npm errors.

This is a webpack.config.js file.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js', // Adjust the entry point according to your project structure
  output: {
    path: path.resolve(__dirname, 'dist'), // Output directory
    filename: 'bundle.js', // Output bundle file name
  },
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src'), // Add your source directory here if needed
    ],
    extensions: ['.js', '.jsx', '.json'], // Add any other extensions you might need
    fallback: {
      fs: false,
      path: require.resolve('path-browserify'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.BROWSER': true
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html', // Path to your HTML template
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // Serve content from the 'dist' directory
    port: 3000, // Choose your preferred port
    open: true, // Open the browser automatically when the server starts
    setupMiddlewares: function (devServer) {
      // Your middleware setup code here
    },
  },
  //   node: {
  //     fs: 'empty'
  //   }
};

enter image description here