Ant Design全栈部署至Heroku及react-app-rewired命令找不到问题求助

The error sh: 1: react-app-rewired: not found occurs because the react-app-rewired package isn’t installed in your client project during the Heroku build. Even though you updated your scripts to use it, if the package isn’t listed in your client’s package.json, Heroku can’t install it when running the build command.

Fix This Issue #

• Install react-app-rewired locally in your client directory:
  Open your terminal, navigate to the client folder, and run:

  npm install react-app-rewired --save-dev
  

  This adds the package to your client’s devDependencies (appropriate for build tools like this).

• Verify the package is in package.json:
  Check your client’s package.json to confirm react-app-rewired appears under devDependencies.

• Ensure your Heroku postbuild script installs dev dependencies:
  Your root package.json already includes the correct flag in the postbuild script:

  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  

  The NPM_CONFIG_PRODUCTION=false tells npm to install devDependencies (like react-app-rewired) during the build—without this, Heroku would skip them.

Follow these steps to get your project up and running on Heroku:

1. Project Structure #

Ensure your project is organized with a root server package and a client subdirectory:

your-project/
├── client/
│   ├── package.json
│   ├── config-overrides.js (for Ant Design + react-app-rewired)
│   └── src/ (your React code)
├── server.js (your Express/Node server)
└── package.json (root server config)

2. Configure Ant Design with react-app-rewired #

Set up config-overrides.js in the client folder to optimize Ant Design imports (for tree shaking):

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css', // Use 'less' if you want custom theme support
  }),
);

Install the required dependencies for this config:

cd client
npm install customize-cra babel-plugin-import --save-dev

3. Root Server Configuration #

Update your root package.json to handle deployment:

• Specify Node.js/NPM versions (match your local setup):

  "engines": {
    "node": "16.x",
    "npm": "8.x"
  }
  

• Add the Heroku postbuild script:

  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  }
  

• Serve the client build folder from your server:
  In your Express server (server.js), add code to serve static React build files:

  const path = require('path');
  const express = require('express');
  const app = express();
  
  // Serve static files from the client build directory
  app.use(express.static(path.join(__dirname, 'client/build')));
  
  // Handle all React routing requests
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build/index.html'));
  });
  
  const PORT = process.env.PORT || 5000;
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
  

4. Deploy to Heroku #

• Install the Heroku CLI if you haven’t already.
• Log in to Heroku:

  heroku login
  

• Create a new Heroku app:

  heroku create your-unique-app-name
  

• Push your code to Heroku:

  git add .
  git commit -m "Prepare for Heroku deployment"
  git push heroku main
  

Troubleshooting #

• If you still get react-app-rewired errors, double-check it’s listed in the client’s package.json.
• Use heroku logs --tail to view real-time logs if the build or deployment fails.
• Ensure your server listens on process.env.PORT (Heroku assigns a dynamic port).

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