Блог

Обновление на консоли в браузере Windows (где приложение не загружается, только фоновое изображение) У меня ошибка:

 Uncaught TypeError: Cannot read property 'apply' of undefined
  

Эта ошибка не отображается в браузере внутри Ubuntu, в котором она на самом деле работает. Я расследую это

Я использую Oracle VM VirtualBox с ОС Debian Ubuntu для разработки этого приложения MERN. Я перенес его на Heroku. В журналах нет сообщений об ошибках, и веб-сайт отлично открывается внутри virtualbox.

Но в моем браузере Windows он отображает только фоновое изображение (слегка искаженное) и делает то же самое, когда я пытаюсь получить к нему доступ с мобильного устройства.

У меня было много ошибок, приведших к этому моменту, первоначально мое приложение технически «работало», но с Cannot get / ошибкой на экране, которая, как я выяснил, на самом деле работала, но просто отображала серверную часть моего приложения (я проверил, перейдя по URL-адресам, которые я настроил в Express, и мои данныебыло ли)

Итак, я установил cors и path (следуя другому сообщению stackoverflow) и настроил server.js , и теперь это вроде как работает. Но я не уверен, в чем проблема.

Структура приложения такова, что в корневом каталоге у меня есть все, что мне нужно (server.js файл, маршруты, модели, модули и т.д.), Включая каталог / клиент, в котором находится интерфейсное приложение React.

Мое server.js файл

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

Мой 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" amp;amp; exit 1",
    "client-install": "cd client amp;amp; npm install",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "cd client amp;amp; npm start",
    "dev": "concurrently "npm run server" "npm run client"",
    "heroku-postbuild": "cd client amp;amp; npm install amp;amp; 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"
  }
}
  

Кажется, что сервер запущен, но не может подключить клиента. Команда Bash amp;amp; (и) не работала в Windows. Заменить одним amp; оператором.

Решена проблема!

По-видимому, проблема была в Redux. Я заметил в браузере, где мое приложение не отображалось должным образом, в консоли была ошибка: Uncaught TypeError: Cannot read property 'apply' of undefined

Это привело меня к https://github.com/reduxjs/redux/issues/2359 который имеет ряд различных решений.

В конечном счете, удаление кода REDUX_EXTENSION_TOOLS из хранилища redux позволило моему приложению heroku правильно отображаться в разных браузерах, включая мой телефон.

store.js файл:

 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__ amp;amp; window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);
export default store;