Heroku 應用程序僅適用於 Chrome 桌面 // React.Js 應用程序

Question

最近完成了一個 React 項目，該項目獲取新聞文章並顯示它們。 最近部署到 Heroku，發現似乎只有桌面版 Chrome 可以運行它。

當我查看 Javascript 控制台時，Safari 和 Firefox 都給我同樣的錯誤。 Javascript 錯誤

鏈接到 heroku 應用程序 - https://calm-bastion-47290.herokuapp.com/ ？

服務器設置

    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}`));

我認為我的代碼沒有任何問題，因為它在本地完美運行，而 chrome 處理得很好。 Safari、Firefox 和移動設備上的任何瀏覽器根本無法呈現我的 Web 應用程序的任何部分的任何明顯原因？

Answer 1

剛剛有同樣的問題。 確保在部署之前取出 redux 開發工具。

在您的 store.js 文件中包含以下內容，以免在生產中使用“redux devtools”。

if(process.env.NODE_ENV === 'production') {
    store = createStore(rootReducer, initialState, compose(
        applyMiddleware(...middleware)
    ));
} else {
    store = createStore(rootReducer, initialState, compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    ));
}

這個想法是在開發過程中只包含 REDUX_DEVTOOLS。 在生產中不應該使用它，因為只有帶有 redux devtool 擴展的瀏覽器才能查看頁面。

Answer 2

出現這個問題是因為 redux-devtools-extension。

您很可能在所有未安裝 redux-devtools-extension 的瀏覽器控制台中遇到以下錯誤：

類型錯誤：未定義不是對象（評估“b.apply”）

這是因為window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()您最有可能實現的是返回 undefined，這意味着 .apply() 正在 undefined 上被調用，從而導致錯誤。

要么像@Vindao 在他真正偉大的答案中提到的那樣從生產中完全刪除它，要么使用以下代碼，如果當前瀏覽器不支持，它根本不會使用 redux-devtools-extension：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 
const store = createStore(rootReducer, initialState, composeEnhancers(
    applyMiddleware(...middleware)
  ));

有關如何使用 Redux-devtools-extensions 創建商店的更多詳細信息或其他可能性，請參閱高級商店設置