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

throw err;
});

// Ensure environment variables are read.
require("react-scripts/config/env");

const fs = require("fs-extra");
const chalk = require("react-dev-utils/chalk");
const webpack = require("webpack");
const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
const paths = require("react-scripts/config/paths");
const configFactory = require("react-scripts/config/webpack.config");

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

const configDevelopment = configFactory("development");
const configProduction = configFactory("production");
const config = configDevelopment;
config.entry = configProduction.entry;
config.output.path = configProduction.output.path;
config.plugins = config.plugins.filter(
  p => p.constructor.name !== "HotModuleReplacementPlugin"
);

fs.emptyDirSync(paths.appBuild);
const compiler = webpack(config);
compiler.watch({ ignored: [paths.appNodeModules] }, (err, stats) => {
  let messages;

const extractTextPluginOptions = shouldUseRelativeAssetPaths
  ? // Making sure that the publicPath goes back to to build folder.
    { publicPath: Array(cssFilename.split('/').length).join('../') }
  : {};

// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
module.exports = {
  // Don't attempt to continue if there are any errors.
  bail: true,
  // We generate sourcemaps in production. This is slow but gives good results.
  // You can exclude the *.map files from the build during deployment.
  devtool: shouldUseSourceMap ? 'source-map' : false,
  // In production, we only want to load the polyfills and the app code.
  entry: [require.resolve('react-scripts/config/polyfills'), paths.appIndexJs],
  output: {
    // The build folder.
    path: paths.appBuild,
    // Generated JS file names (with nested folders).
    // There will be one main bundle, and one file per asynchronous chunk.
    // We don't currently advertise code splitting but Webpack supports it.
    filename: 'static/js/[name].[chunkhash:8].js',
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
    // We inferred the "public path" (such as / or /my-project) from homepage.
    publicPath: publicPath,
    // Point sourcemap entries to original disk location (format as URL on Windows)
    devtoolModuleFilenameTemplate: info =>
      path
        .relative(paths.appSrc, info.absoluteResourcePath)
        .replace(/\\/g, '/'),
  },

function rewireTypescript(config, env, typescriptLoaderOptions = {}) {
  // Monkey patch react-scripts paths to use just `src` instead of
  // `src/index.js` specifically. Hopefully this can get removed at some point.
  // @see https://github.com/facebookincubator/create-react-app/issues/3052
  let paths = require('react-scripts/config/paths')
  if (paths) {
    paths.appIndexJs = path.resolve(fs.realpathSync(process.cwd()), 'src')
  }

  // Change the hardcoded `index.js` to just `index`, so that it will resolve as
  // whichever file is available. The use of `fs` is to handle things like
  // symlinks.
  config.entry = config.entry
    .slice(0, config.entry.length - 1)
    .concat([path.resolve(fs.realpathSync(process.cwd()), 'src/index')])

  // Add Typescript files to automatic file resolution for Webpack.
  config.resolve.extensions = (config.resolve.extensions || []).concat([
    '.web.ts',
    '.ts',
    '.tsx'
  ])

import path from "path";
import * as webpack from "webpack";
import reactScriptsPaths from "react-scripts/config/paths";
import { getLoader, Matcher } from "react-app-rewired";
import { getValidatedConfig } from "./webpackUtils";

// Switch out the entry point index.js for index.tsx.
// We need to do this on module import to intercept react-script's preflight
// module check.
reactScriptsPaths.appIndexJs = reactScriptsPaths.appIndexJs.replace(
  /src[\\\/]index.js$/,
  `src${path.sep}index.tsx`
);

export default function(c: webpack.Configuration): webpack.Configuration {
  // Validate and narrow type
  const config = getValidatedConfig(c);

  config.resolve.extensions.unshift(".web.ts", ".web.tsx", ".ts", ".tsx");

  // Locate the Webpack loader responsible for handling Javascript assets and
  // add TypeScript file extensions.

  // TODO: Remove this after beta. Special handling for pre-2.0.0-next.fb6e6f70.
  // JavaScript modules were supported in prior versions, so we need to take
  // the additional file extension into account.

/* eslint-disable */
const {
  override,
  fixBabelImports,
  addLessLoader,
  // addBundleVisualizer ,
} = require('customize-cra');
const paths = require('react-scripts/config/paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

paths.appIndexJs = `${paths.appSrc}/pages/index.js`;
// paths.appLoginJs = `${paths.appSrc}/pages/login.js`;
paths.servedPath = './';

const getEntryConfig = env => {
  const arr = 'development' === env ? [require.resolve('react-dev-utils/webpackHotDevClient')] : [];
  return entry => {
    return [...arr, `${paths.appSrc}/pages/${entry}.js`];
  };
};

const removePlugin = (plugins, name) => {
  const list = plugins.filter(it => !(it.constructor && it.constructor.name && name === it.constructor.name));
  if (list.length === plugins.length) {
    throw new Error(`Can not found plugin: ${name}.`);
  }
  return list;

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

function rewirePaths() {
  require('react-scripts/config/env');

  const paths = require('react-scripts/config/paths');

  if (!fs.existsSync(paths.appIndexJs)) {
    paths.appIndexJs = path.resolve(paths.appPath, 'src/index.ts');
  }
  if (!fs.existsSync(paths.appPublic)) {
    paths.appPublic = path.resolve(__dirname, '../config/webpack/public');
    paths.appHtml = path.resolve(paths.appPublic, 'index.html');
  }

  require.cache[require.resolve('react-scripts/config/paths')].exports = paths;
}

function rewirePaths() {
  require('react-scripts/config/env');

  const paths = require('react-scripts/config/paths');

  if (!fs.existsSync(paths.appIndexJs)) {
    paths.appIndexJs = path.resolve(paths.appPath, 'src/index.ts');
  }
  if (!fs.existsSync(paths.appPublic)) {
    paths.appPublic = path.resolve(__dirname, '../config/webpack/public');
    paths.appHtml = path.resolve(paths.appPublic, 'index.html');
  }

  require.cache[require.resolve('react-scripts/config/paths')].exports = paths;
}

function rewirePaths() {
  require('react-scripts/config/env');

  const paths = require('react-scripts/config/paths');

  if (!fs.existsSync(paths.appIndexJs)) {
    paths.appIndexJs = path.resolve(paths.appPath, 'src/index.ts');
  }
  if (!fs.existsSync(paths.appPublic)) {
    paths.appPublic = path.resolve(__dirname, '../config/webpack/public');
    paths.appHtml = path.resolve(paths.appPublic, 'index.html');
  }

  require.cache[require.resolve('react-scripts/config/paths')].exports = paths;
}