React-hot-loader не работает с React-router-dom

Question

Итак, я наконец-то настроил рабочий проект:

• Электрон (2.0.2)

• Реакция (16.4.0)

• React-router-dom (4.2.2)

• Webpack (4.11.0)

• React-hot-loader (4.2.0)

И как только я начал разрабатывать некоторые реагирующие компоненты, я заметил, что мой проект не будет корректно загружаться в горячем режиме.Если я настраиваю что-то на базовом URL (/), оно обновляется правильно, но если я обновляю что-то на вторичном URL, скажем /test, веб-пакет компилируется, но я получаю сообщение Cannot GET /test.

Я много пробовал и не могу понять, что я делаю неправильно.Я посмотрел на react-router-dom, так как горячая перезагрузка была проблемой еще в версии 3.x, но они говорят, что она должна быть решена сейчас (в 4.x -> Это работает здесь .. ).Также я добавил <base href="/"/> в свой index.html, так что это не так.

Может кто-нибудь сказать мне, что я делаю неправильно?

---

Webpack.common.js (Это объединено с Webpack.dev.js)

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    modules: [path.resolve(__dirname), 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          cacheDirectory: true,
          presets: ['env', 'react'],
          plugins: ['transform-runtime'],
          env: {
            development: {
              plugins: ['react-hot-loader/babel']
            },
            production: {
              presets: ['react-optimize']
            }
          }
        }
      }
    ]
  }
};

---

Webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    'app': [
      'babel-polyfill',
      'react-hot-loader/patch',
      path.join(__dirname, 'src', 'index.js')
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // Enable hot module replacement
  ]
});

---

Index.js

import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";

import { App } from "./app";

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component/>
    </AppContainer>,
    document.getElementById("root")
  );
};

render(App);

if (module.hot) {
  module.hot.accept("./app", () => {
    render(App);
  });
}

---

App.js (моя основная точка входа для моего приложения, поэтому я определяюмоя базовая маршрутизация)

import React, { Component } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import { Test } from './components/test';
import { Test2 } from './components/test2';

export class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/test">Test</NavLink>
          <div>
            <Route exact path="/" component={Test}/>
            <Route path="/test" component={Test2}/>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

А компоненты 'test' и 'test2' являются просто простыми компонентами реагирования с текстом 'hello world'.

Кто-нибудь, кто видит что-то, что я пропускаю или делаю неправильно?

Answer 1

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

---

Webpack.common.js

Первое, что мне нужно было изменить, - это babel-loader.Я украл его из какого-то учебника, и он работал, но я не знал точно, что он сделал, поэтому я избавился от этого кода.Я также ускорил компиляцию моего кода с помощью webpack.DllReferencePlugin.

. Вот обновленный webpack.common.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './src/index.js',
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          plugins: ['react-hot-loader/babel'],
          cacheDirectory: true,
          presets: ['env', 'react'],
        },
      }
    ],
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('../dist/vendor-manifest.json'),
    }),
    new HtmlWebpackPlugin({
      title: '<my-app-name>',
      filename: 'index.html',
      template: './public/index.html',
    }),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, '../dist/*.dll.js'),
      includeSourcemap: false // add this parameter
    })
  ],
};

AddAssetHtmlPlugin требуется, посколькуindex.html создается динамически ( HtmlWebpackPlugin ) для сервера dev, и вы не можете жестко закодировать правильный импорт пакетов для vendor.dll и app.bundle ( здесь ).

---

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true // Allow refreshing of the page
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Enable hot reloading
  ]
});

Что я изменил:

1. Я перенес записьточка до webpack.common.

2. I Удалено 'react-hot-loader/patch' из entry

3. ( необязательно ) Я добавил некоторые параметры конфигурации для webpack-dev-server.

---

Index.js

Этот файл вызвалгорячая перезагрузка, чтобы потерпеть неудачу.Особенно часть if(module.hot) вызвала сбой.Поэтому я изменил его на следующее:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

import { App } from './app';

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <App/>
    </AppContainer>,
    document.getElementById('app'),
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require('./app').default; // Get the updated code
    render(NextApp);
  });
}

Причина, по которой оно работает сейчас, заключается в том, что теперь я загружаю новое приложение и заменяю старое, таким образом сообщая горячему загрузчику, что произошли изменения.Я также мог бы просто использовать module.hot.accept(), но это сделало бы react-hot-loader бесполезным (вы используете горячую перезагрузку веб-пакета), и таким образом я бы также терял состояние в своих компонентах каждый раз, когда обновлял какой-то код.

Итак, поехали.Я надеюсь, что это поможет любому (кроме меня).