Heroku 应用程序仅适用于 Chrome 桌面 // React.Js 应用程序答案

【问题标题】：Heroku app only works on Chrome Desktop // React.Js ApplicationHeroku 应用程序仅适用于 Chrome 桌面 // React.Js 应用程序
【发布时间】：2019-11-07 22:16:56
【问题描述】：

最近完成了一个获取新闻文章并显示它们的 React 项目。最近部署到 Heroku，发现只有桌面上的 Chrome 似乎可以运行它。

当我查看 Javascript 控制台时，Safari 和 Firefox 都给我同样的错误。Javascript error

链接到 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 应用程序的任何部分的任何明显原因？

【问题讨论】：

嗯，你已经启用了源映射，所以我实际上可以查看你所有的前端代码：gist.githubusercontent.com/DakshMiglani/…
@DakshMiglani 为什么它没有在 Safari、Firefox 或移动浏览器上呈现？
我认为它找不到reducer函数，并且这段代码sn-p中没有给出任何内容来理解问题。

标签： javascript html reactjs heroku redux

【解决方案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 扩展的浏览器才能查看页面。

【讨论】：

您应该对此进行扩展以成为真正出色的答案。 为什么会导致这个问题？
我以前也遇到过这种情况。你打败了我！我认为 Chrome 也不会在没有 Redux Devtools 作为扩展的情况下运行它。我认为它与 Redux 中间件混淆了。

【解决方案2】：

这个问题是由 redux-devtools-extension 引起的。

您很可能在所有未安装 redux-devtools-extension 的浏览器控制台中出现以下错误：

TypeError: undefined is not an object (evalating '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 创建商店的更多详细信息或其他可能性，请参阅Advanced store setup

【讨论】：