使用create-react-app的React项目重命名index.js为app.js后构建失败求助

Hey there! Let's clear up what's going on here and get your project working again.

Why does create-react-app look for index.js by default? #

Under the hood, create-react-app (CRA) uses Webpack to bundle your React code. CRA hides all the complex Webpack configuration from you by default, but one of the core settings it presets is the entry point of your application.

By convention, most JavaScript/React projects use index.js as the root entry file—it's a standard that keeps project structures consistent across the ecosystem. So CRA sets this as the default entry in its preconfigured Webpack setup. When you rename index.js to app.js, Webpack can't find the file it expects to start bundling from, which triggers the build failure.

How to make your project run with app.js instead #

You've got a few solid options here, depending on how much control you want over the project configuration:

Option 1: The simplest workaround (no config changes) #

If you don't want to mess with configuration at all, keep index.js but have it import your app.js file. This lets you use app.js as your main code file while keeping CRA happy:

In src/index.js:

// If your app.js exports the root component
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Or if you're writing all logic directly in app.js
import './app.js';

Option 2: Use react-app-rewired (no eject required, recommended) #

If you want to fully replace index.js with app.js as the entry point without exposing all of CRA's hidden config, use react-app-rewired to override the Webpack settings safely:

1. Install the dependency:

npm install react-app-rewired --save-dev
# Or with yarn:
yarn add react-app-rewired --dev

2. Create a config-overrides.js file in your project root directory:

module.exports = function override(config, env) {
  // Update the entry point to point to app.js
  config.entry = './src/app.js';
  return config;
};

3. Update the scripts section in your package.json to use react-app-rewired instead of react-scripts:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. Run npm start or yarn start—your project will now load from app.js without issues.

Option 3: Eject from CRA (irreversible, use with caution) #

If you want full control over all Webpack and build settings, you can eject from CRA. Note that this action is irreversible—once you eject, you can't go back to the simple, managed CRA setup.

1. Run the eject command:

npm run eject
# Or with yarn:
yarn eject

2. In the newly exposed config/webpack.config.js file, search for the entry field. It will look something like this:

entry: {
  main: paths.appIndexJs,
},

3. Replace paths.appIndexJs with './src/app.js', or update the appIndexJs value in the config/paths.js file to point to src/app.js.

4. Save the changes and run npm start—your project will now use app.js as the official entry point.

Hope that helps you get your project up and running smoothly!

内容的提问来源于stack exchange，提问作者jammy