React应用部署Heroku后仅桌面Chrome可用，求多浏览器兼容问题原因

I've built a React project that fetches and displays news articles. After deploying it to Heroku, I noticed it only works correctly on desktop Chrome. Safari, Firefox throw the same JavaScript console errors, and all mobile browsers fail to render any content at all.

App URL: https://calm-bastion-47290.herokuapp.com/

Server Configuration Code #

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const passport = require("passport");
const path = require("path");

const users = require("./routes/api/users");
const profile = require("./routes/api/profile");

const app = express();

// Body Parser Middleware
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

// DB config
const db = require("./config/keys").mongoURI; //mongodb database url connection

// connect to mongodb
mongoose
  .connect(db)
  .then(() => console.log("MongoDB Connected"))
  .catch(err => console.log(err));

//passport Middleware
app.use(passport.initialize());

//passport config
require("./config/passport")(passport);

//use routes
app.use("/api/users", users);
app.use("/api/profile", profile);

// Server static assets if in production
if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

The app runs perfectly locally, and Chrome handles it without issues. What are the obvious reasons why Safari, Firefox, and mobile browsers can't render the app?

Answer #

Let’s break down the most likely culprits here—since it works locally on Chrome but fails elsewhere after Heroku deployment, the issue almost always ties to browser compatibility with modern JavaScript features or build configuration gaps. Here’s what to check first:

• Missing Babel Transpilation for Unsupported Syntax
  Chrome is more forgiving with cutting-edge JS features, but Safari (especially older versions) and Firefox often require transpilation of ES6+ syntax like arrow functions, optional chaining, or nullish coalescing. If your React app uses these features but your production build isn’t transpiling them down to ES5, browsers that don’t support them will throw syntax errors and stop executing code.

  • Verify your babel.config.js or .babelrc includes @babel/preset-env with appropriate browser targets (like > 0.25%, not dead).
  • Check if you’re using any untranspiled dependencies—some packages ship with untranspiled ES6 code, which can break older browsers. You may need to add them to transpileDependencies in your config or adjust your Webpack setup to include them in Babel processing.

• HTTPS/Mixed Content Issues
  Heroku serves apps over HTTPS by default, but if your app is making HTTP requests to fetch news articles (instead of HTTPS), browsers like Safari and Firefox will block those requests due to mixed content policies. Mobile browsers are especially strict about this.

  • Open the browser console and look for errors like "Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'".
  • Update all API endpoints in your app to use HTTPS instead of HTTP.

• Production Build Asset Path Mismatches
  Sometimes, the way assets are referenced in the production build can cause issues across browsers. If your publicPath in Webpack (or homepage in package.json for Create React App) isn’t set correctly, browsers might fail to load JS/CSS assets.

  • For Create React App, add "homepage": "." to your package.json to ensure relative paths work on Heroku.
  • Check the network tab in browser dev tools—if you see 404 errors for JS bundles, that’s a clear sign the path is wrong.

• Polyfills for Missing Browser APIs
  Modern React features or third-party libraries might rely on browser APIs that aren’t supported in older Safari/Firefox versions (e.g., Promise.allSettled, Array.prototype.at). Without polyfills, these will throw errors.

  • Use core-js to add polyfills for missing features. In your entry file (like index.js), import core-js/stable and regenerator-runtime/runtime if you’re using async/await.
  • Check the console for "is not a function" or "undefined" errors related to built-in methods—those are dead giveaways for missing polyfills.

• Heroku Build Process Issues
  Make sure your Heroku build is actually running the correct production build command. If you’re using Create React App, your package.json should have a build script ("build": "react-scripts build"), and Heroku should automatically run this during deployment.

  • Check your Heroku logs with heroku logs --tail to see if there are any build errors that might have produced a broken bundle.
  • Ensure you’re not accidentally deploying the development build to production—development builds include extra code that might not be compatible across all browsers.

Start with checking the browser console for specific error messages—they’ll point you directly to the problem. For example, a syntax error will tell you which line has unsupported JS, while a mixed content error will flag insecure requests.

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