How to use the react-scripts/config/paths.appSrc function in react-scripts

// Support eslint for ts and tsx files
  config.module.rules[1] = {
    test: /\.(js|jsx|mjs|ts|tsx)$/,
    enforce: 'pre',
    use: [
      {
        options: {
          formatter: require.resolve('react-dev-utils/eslintFormatter'),
          eslintPath: require.resolve('eslint'),
          useEslintrc: true,
        },
        loader: require.resolve('eslint-loader'),
      },
    ],
    include: paths.appSrc,
  };

  const reactScriptsCssLoaders = [
    {
      loader: 'css-loader',
      options: {
        minimize: true,
        sourceMap: !prod,
        context: '/',
      },
    },

    // copied from react-scripts/config/webpack.config.dev.js
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in

module.exports = (rules, packages) => {
    const babelLoaderPaths = getPaths(isBabelLoader, rules);
    const babelLoader = get(rules, babelLoaderPaths[0].join("."));
    // Include the main app package + all other monorepo packages (this allows us to use monorepo).
    babelLoader.include = [paths.appSrc, ...packages];
    babelLoader.options = {
        // Use original react-scripts babel-loader options.
        ...babelLoader.options,
        // Set path to `babel.config.js` explicitly, as `react-scripts` disable configFile by default.
        // (https://babeljs.io/docs/en/options#configfile)
        configFile: path.join(paths.appSrc, "..", "babel.config.js"),
        // Enable `babelrc` searching (https://babeljs.io/docs/en/options#babelrc)
        babelrc: true,
        // We must explicitly set paths to all babel roots to transpile them accordingly when importing from the main app.
        // (https://babeljs.io/docs/en/options#babelrcroots)
        babelrcRoots: packages
    };
};

module.exports = (rules, packages) => {
    const babelLoaderPaths = getPaths(isBabelLoader, rules);
    const babelLoader = get(rules, babelLoaderPaths[0].join("."));
    // Include the main app package + all other monorepo packages (this allows us to use monorepo).
    babelLoader.include = [paths.appSrc, ...packages];
    babelLoader.options = {
        // Use original react-scripts babel-loader options.
        ...babelLoader.options,
        // Set path to `babel.config.js` explicitly, as `react-scripts` disable configFile by default.
        // (https://babeljs.io/docs/en/options#configfile)
        configFile: path.join(paths.appSrc, "..", "babel.config.js"),
        // Enable `babelrc` searching (https://babeljs.io/docs/en/options#babelrc)
        babelrc: true,
        // We must explicitly set paths to all babel roots to transpile them accordingly when importing from the main app.
        // (https://babeljs.io/docs/en/options#babelrcroots)
        babelrcRoots: packages
    };
};

// back to the "file" loader at the end of the loader list.
        oneOf: [
          // "url" loader works just like "file" loader but it also embeds
          // assets smaller than specified size as data URLs to avoid requests.
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          // Process JS with Babel.
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              compact: true,
            },
          },
          // The notation here is somewhat confusing.
          // "postcss" loader applies autoprefixer to our CSS.
          // "css" loader resolves paths in CSS and adds assets as dependencies.
          // "style" loader normally turns CSS into JS modules injecting <style>,
          // but unlike in development configuration, we do something different.
          // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
          // (second argument), then grabs the result CSS and puts it into a</style>

rules.forEach(rule => {
            if (foundBabel) {
                return;
            }

            if (rule.hasOwnProperty("options") && rule.options.hasOwnProperty("babelrc")) {
                rule.include = [paths.appSrc, ...packages];
                rule.options = {
                    ...merge(rule.options, {
                        babelrc: true,
                        babelrcRoots: packages,
                        plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
                    })
                };

                foundBabel = true;

                return;
            }
            overrideBabel(
                rule.use || rule.oneOf || (Array.isArray(rule.loader) && rule.loader) || []
            );
        });

module.exports = (rules, packages, aliases) => {
    const babelLoaderPaths = getPaths(isBabelLoader, rules);
    const babelLoader = get(rules, babelLoaderPaths[0].join("."));
    babelLoader.include = [paths.appSrc, ...packages];
    babelLoader.options = {
        ...babelLoader.options,
        babelrc: true,
        babelrcRoots: packages,
        ignore: [/node_modules/],
        plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
    };
};

module.exports = (rules, packages, aliases) => {
    const babelLoaderPaths = getPaths(isBabelLoader, rules);
    const babelLoader = get(rules, babelLoaderPaths[0].join("."));
    babelLoader.include = [paths.appSrc, ...packages];
    babelLoader.options = {
        ...babelLoader.options,
        ignore: [/node_modules/],
        babelrc: true,
        babelrcRoots: packages,
        plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
    };
};

module.exports = (rules, packages, aliases) => {
    const babelLoaderPaths = getPaths(isBabelLoader, rules);
    const babelLoader = get(rules, babelLoaderPaths[0].join("."));
    babelLoader.include = [paths.appSrc, ...packages];
    babelLoader.options = {
        ...babelLoader.options,
        babelrc: true,
        babelrcRoots: packages,
        plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
    };
};

}

function getServedPath(publicUrl) {
  const servedUrl = publicUrl ? url.parse(publicUrl).pathname : '/'

  return ensureSlash(servedUrl, true)
}

paths.dotenv = existsSync(appDotEnv) ? appDotEnv : paths.dotenv
paths.appPath = appRootPath + '/'
paths.appPublic = appPublic
paths.appHtml = appPublic + '/index.html'
paths.appBuild = appBuild
paths.appPackageJson = appPackage
paths.yarnLockFile = appRootPath + '/yarn.lock'
paths.appSrc = appSrc
paths.appIndexJs = appSrc + '/index.js'
paths.proxySetup = appSrc + '/setupProxy.js'
paths.testsSetup = appSrc + '/setupTests'
paths.appNodeModules = appNodeModules
paths.servedPath = homepage ? getServedPath(homepage) : '/'
paths.publicUrl = homepage || ''

module.exports = paths