React-hot-loader не перерисовывает компоненты

У меня есть приложение, которое обслуживает представление EJS с моим пакетом React.js, загруженным в тег скрипта.

Я следовал инструкциям для react-hot-loader v3 и @next, ни один из них не работает. В консоли нет ошибок, и компоненты не перерисовываются при изменении.

Вот моя точка входа в приложение:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { AppContainer } from 'react-hot-loader'

import { store } from './routes';

import App from './containers/App';

const render = Component => {
  ReactDOM.render(
    <Provider store={store}>
      <MuiThemeProvider>
        <AppContainer>
          <Component />
        </AppContainer>
      </MuiThemeProvider>
    </Provider>,
    document.getElementById('root'))
};

render(App);
//registerServiceWorker();

// Webpack Hot Module Replacement API
if (module.hot) {
  console.log('module.hot exists');
  module.hot.accept('./containers/App', () => {
    console.log('Reloading app');
    render(App);
  })
}

Вот файлы приложения, которые вызывает точка входа:

import React from 'react';
import Navigation from '../components/Navigation';
import { hot } from 'react-hot-loader'
import createRoutes from '../routes';

const routes = createRoutes();

const App = () => {
  return ([
    <Navigation key="app-navigation" />,
    <main style={{ height: 'calc(100% - 85px)' }} key="app-main">{routes}</main>
  ])
};

export default hot(module)(App)

Вот моя конфигурация разработчика веб-пакета:

const devBrowserRender = {
    devtool: 'source-map',
    context: PATHS.app,
    entry: {
      app: ['babel-polyfill', 'react-hot-loader/patch',
        './index']
    },
    node,
    devServer: {
      contentBase: PATHS.assets,
      hot: true
    },
    output: {
      path: PATHS.assets,
      filename: '[name].dev.js',
      publicPath: PATHS.public
    },
    module: { rules: rules({ production: false, browser: true }) },
    resolve,
    plugins: plugins({ production: false })
  };

Вот мои правила JavaScript:

  const presets = [["es2015", { "modules": false }], 'react', 'stage-0'];

  const plugins = production ? [
    'transform-react-remove-prop-types',
    'transform-react-constant-elements',
    'transform-react-inline-elements'
  ] : [];

  return {
    test: /\.js$|\.jsx$/,
    loader: 'babel-loader',
    options: {
      presets,
      plugins
    },
    exclude: PATHS.modules
  };

Плагины для разработчиков:

  if (!production) {
    return [
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.EnvironmentPlugin(['NODE_ENV']),
      new webpack.DefinePlugin(compileTimeConstantForMinification),
      new ExtractTextPlugin({
        filename: '[contenthash].css',
        allChunks: true
      }),
      // new webpack.optimize.UglifyJsPlugin({ compress }),
      new ManifestPlugin({
        fileName: 'manifest.json'
      })
    ];
  }

Я предполагаю, что это происходит из-за непонимания того, как работает react-hot-loader, но я не могу найти никакой другой информации о том, почему это не работает в документах или примерах.


person Tom    schedule 15.02.2018    source источник


Ответы (1)


Я знаю боль настройки этого материала.

Вам необходимо включить следующие строки в раздел ввода

entry: {
  app: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './index.js'
  ]
}

затем, когда вы устанавливаете конфигурацию babel-loader, вам нужно добавить react-hot-loader/babel

const plugins = production ? [
  'transform-react-remove-prop-types',
  'transform-react-constant-elements',
  'transform-react-inline-elements'
] : ['react-hot-loader/babel'];

Здесь У меня есть простая конфигурация с этой функцией.

Надеюсь, поможет.

person Arnold Gandarillas    schedule 15.02.2018