React HMR не рендерится, даже если обнаружено обновление - PullRequest
Новая
       17

React HMR не рендерится, даже если обнаружено обновление

0 голосов
/ 14 октября 2018

У меня есть следующее в моем index.jsx: 

const store = configureStore();
const MOUNT_NODE = document.getElementById('root');

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <Routes />
    </Provider>,
    MOUNT_NODE,
  );
};

if (module.hot) {
  module.hot.accept('routes.jsx', () => {
    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
    render();
  });
}
render();

Это делает начальное приложение.Теперь, когда я изменяю любой файл, я получаю следующий журнал в консоли браузера: 

[HMR] bundle rebuilding
[HMR] bundle rebuilt in 285ms
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/js/components/SomeComponent/SomeComponent.jsx
[HMR]  - ./src/js/components/App.jsx
[HMR]  - ./src/js/routes.jsx
[HMR] App is up to date.

Этот журнал предполагает, что обновление было обнаружено и что модули были обновлены.Кроме того, я вижу на вкладке «сеть», что загружен новый скрипт, и мигает тег <head>, показывая, что он загрузил новый скрипт.Я проверил скрипт, и он содержит мои изменения.

Пока я не вижу обновления моей страницы.Вся страница быстро мигает, показывая, что вызывается функция render(), но изменений нет.

Я использую большую часть настроек HMR и веб-пакета с https://github.com/react-boilerplate/react-boilerplate.

Я озадачен тем, где искать, чтобы узнать, что случилось.Любая помощь приветствуется.

РЕДАКТИРОВАТЬ:

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

РЕДАКТИРОВАТЬ 2:

Когда я пытаюсь использовать module.hot.accept (() => {}), кажется,работать, но тогда редукторы не работают, и я получаю эту ошибку:

Поставщик не поддерживает изменение store на лету.Скорее всего, вы видите эту ошибку, потому что вы обновили Redux 2.x и React Redux 2.x, которые больше не поддерживают горячие перезагрузки.См. https://github.com/reactjs/react-redux/releases/tag/v2.0.0 для инструкций по миграции.

Итак, единственный способ что-либо сделать с этим, это иметь два module.hot.accept s один с App.jsx, а другой с reducers.jsx.Все еще не повезло выяснить, что именно не так.

1 Ответ

0 голосов
/ 25 мая 2019

У меня была такая же проблема

Для кого-нибудь в будущем вы пробовали это? 

//My root component (that also use redux), but can be any component one by one in case you want to specific compontents with hot reload


import {hot} from "react-hot-loader/root"
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from "react-redux"
import { ExtReact } from '@sencha/ext-react' 

import store from "./redux/store"
import Layout from './Layout';

// Enable responsiveConfig app-wide. You can remove this if you don't plan to build a responsive UI.

/**
 * The main application view
 */



class App extends Component {
  render() {
    return (
      <Router>
        <Provider store={store}>
          <Layout />
        </Provider>
      </Router>
    );
  }
}

export default hot(App);
...