[英]Optimizing React Application - in terms of React Only [React.JS]
[英]Heroku app only works on Chrome Desktop // React.Js Application
最近完成了一个 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 应用程序的任何部分的任何明显原因?
刚刚有同样的问题。 确保在部署之前取出 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 扩展的浏览器才能查看页面。
出现这个问题是因为 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 创建商店的更多详细信息或其他可能性,请参阅高级商店设置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.