MERN && Heroku：我的应用程序显示在 VirtualBox/Linux 环境中，但不在 Windows 或移动设备上

Question

Update On the console in the windows browser(where the app is not loading, just the background image) I have an error:

Uncaught TypeError: Cannot read property 'apply' of undefined

This error is not showing up on the browser inside Ubuntu that it's actually working in. I'm investigating this

---

I'm using Oracle VM VirtualBox with Debian Ubuntu OS to develop this MERN app. I pushed it up to Heroku. The logs don't have any error msgs, and the website opens just fine inside the virtualbox.

But on my windows browser, it only displays the background image (slightly distorted), and does the same when I try to access it on mobile.

I had a lot of errors leading up to this point, originally my app was technically "working" but with Cannot get / error on the screen, that I figured out was actually working but just displaying the BackEnd half of my app (I tested by going to the URLs I have setup in Express, and my data was there)

So I installed cors and path (following another stackoverflow post) and configured server.js and now it sort of works. But I'm not sure what the problem is.

The app's structure is, in the root directory I have whatever backEnd stuff I need (server.js file, routes, models, modules etc) including a directory /client which is where the React front-end app is.

My server.js file

const mongoose = require('mongoose');
const express = require('express');
const app = express();
const config = require('config');
const cors = require('cors');
const path = require('path');

// Middleware
app.use(express.json());

// DB Config
// You can get all your config/ values with config.get('')
const db = config.get('mongoURI');

// Connect to MongoDB
mongoose
    .connect(process.env.URI || db, { 
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true
    })
    .then(() => console.log("Connected to MongoDB.."))
    .catch(err => console.log(err));

// Available Routes
const tournaments = require('./routes/api/tournaments');
const users = require('./routes/api/users');
// Use Routes
app.use(cors());
app.use('/tournaments', tournaments);
app.use('/users', users);

// For Heroku deployment
if(process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, 'client', 'build')));
    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
    });
};

// Run Server
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port: ${port}`));

My package.json

{
  "name": "smash-hosting",
  "version": "1.0.0",
  "description": "",
  "engines": {
    "node": "12.16.2"
  },
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client-install": "cd client && npm install",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "cd client && npm start",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "concurrently": "^5.0.0",
    "config": "^3.2.4",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.26.0",
    "mongoose": "^5.7.12",
    "nodemon": "^1.19.4",
    "path": "^0.12.7",
    "react-icons": "^3.10.0",
    "react-tournament-bracket": "^0.2.4"
  },
  "devDependencies": {
    "nodemon": "^1.19.4"
  }
}

Answer 1

It seems the server is running but can't get the client to connect. Bash command && (and) didn't work in windows. Replace with a single & operator.

Answer 2

Solved the problem!

The issue was with Redux apparently. I noticed in the browser where my app was not rendering properly, there was an error in the console: Uncaught TypeError: Cannot read property 'apply' of undefined

That led me to https://github.com/reduxjs/redux/issues/2359 which has a number of various solutions.

Ultimately, removing the REDUX_EXTENSION_TOOLS code from the redux store allowed my heroku app to render properly on different browsers including my phone.

store.js file:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
    rootReducer,
    initialState,
    compose(
        applyMiddleware(...middleware)
        // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);
export default store;