React-hot-loader не распространяет изменения

Моя проблема в том, что react-hot-reload обнаруживает изменения и модули, которые необходимо обновить, и, по-видимому, обновляет модули, но в моем браузере ничего не меняется.

Вот версия библиотек, которые я использую:

  • реагировать - 16.8.3
  • react-dom (исправлено react-hot-loader) — 16.8.3
  • реактивный горячий загрузчик — 4.8.0
  • веб-пакет — 4.29.6

Ниже моя конфигурация webpack-dev-сервера:

historyApiFallback: true,
hot: true,
stats: 'none',
quiet: true,
port: port,
host: host,

Соответствующая часть моей конфигурации webpack

entry: [
  'react-hot-loader/patch',
  'webpack-dev-server/client?http://localhost:8080',
  'webpack/hot/only-dev-server',
  './src/index.js',
],
resolve : {
  alias: {
    'react-dom': '@hot-loader/react-dom'
  }
},

Мой .babelrc:

"plugins": [
  "@babel/plugin-transform-flow-strip-types",
  "@babel/plugin-proposal-class-properties",
  "react-hot-loader/babel"
]

Мой начальный компонент:

import React, { Component } from 'react'
import { hot } from 'react-hot-loader/root'

class App extends Component<PropTypes, StateTypes> {
  render (): React$Element<*> {
    return (
        <Router>
            <Switch>
                <Route
                    path = "/home"
                    render = { (props: Object): React$Element<*> => <HomeView {...props } /> }
                />
                <Route component = { IntroView } />
            </Switch>
        </Router>
    )
  }
}

export default hot(App)

Наконец, мой входной файл:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

const appContainer = document.getElementById('appContainer')

if (module.hot) {
  module.hot.accept()
  if (appContainer) ReactDOM.render(<App />, appContainer)
} else if (appContainer) {
  ReactDOM.render(<App />, appContainer)
}

Если я сделаю какое-либо изменение кода, которое должно было вызвать обновление, это моя консоль:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
XHR finished loading: GET "http://localhost:8080/df32ff4...hot-update.json.
[HMR] Updated modules:
[HMR] - ./src/library/protons/ModalWorkflow/sandbox/workflowStepOne.js
[HMR] - ./src/library/protons/ModalWorkflow/sandbox/index.js
[HMR] - ./src/configs/routes.js
[HRM] - ./src/views/intro/index.js
[HRM] - ./src/view/home/index.js
[HRM] - ./src/app.js
[HRM] App is up to date.

Браузер вообще не отражает изменения кода. Никаких ошибок, никаких предупреждений.

Пробовал несколько разных подходов, чтобы проверить любую потенциальную ошибку, но на данный момент я нахожусь в этом безнадежном положении, понятия не имею, что еще я мог бы попробовать.

Точно такая же проблема и никакой информации нигде. Он «работает», но на самом деле ничего не делает в 99% случаев, когда обновляется и сообщает мне, что он обновлен.

Slbox 12.10.2019 01:13

Мне никогда не удавалось заставить реагировать-горячий загрузчик v4 работать должным образом. Примерно каждые 6 месяцев я делаю попытку, но у меня те же проблемы, что и здесь. Пока что я остаюсь с v3, и он работает так, как должен. Мой сегодняшний комментарий исходит из предупреждения о том, что React удалит методы жизненного цикла, необходимые для AppContainer v3, 'componentWillReceiveProps', и поэтому v3 перестанет работать, если не будет исправлено.

Kev 10.11.2019 23:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
2
792
0

Другие вопросы по теме