Замена горячего модуля React не работает там, где горячий - PullRequest
0 голосов
/ 16 октября 2018

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

Я пыталсяразные подходы, module.hot, import {hot} from 'react-hot-loader' и import {AppContainer} from 'react-hot-loader, но каждый раз, когда я переключаюсь на hotOnly в devServer, он показывает журнал, но DOM никогда не обновляется.В проекте используется redux и response-router-dom.


Конфигурация Webpack упрощена

 devServer: {
        compress: true,
        historyApiFallback: true,
        hotOnly: true,
        inline: true,
        open: true,
        port: 9090,
        proxy: {
            '*': {
                // Force update in Spring Boot
                target: 'http://localhost:8081',
                secure: false,
                prependPath: false,
            },
        },
        // Create proxied port to avoid collisions
        public: 'http://localhost:9090',
    },
    devtool: 'source-map',
    mode: 'development',
    module: {
        rules: [
            {
                // Check for eslint errors
                enforce: 'pre',
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true,
                    cache: true,
                    failOnError: true,
                },
            },
            {
                // Compile main index
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    cacheDirectory: true,
                    presets: ['env', 'react', 'stage-0'],
                    plugins: ['react-hot-loader/babel'],
                },
            },
            {
                test: /\.css$/,
                loader: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: false,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new WriteFilePlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    stats: 'errors-only',
    watchOptions: {
        ignored: [paths.salesReactFolder, 'node_modules'],
    },

Запись в Webpack

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

render(App);

// webpack Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./App', () => {
        // eslint-disable-next-line global-require
        render(require('./App'));
    });
}

App.jsx

const App = () => (
    <Provider store={store}>
        <AppRouter />
    </Provider>
);

export default hot(module)(App);

Я удалил импорт для более удобного чтения, любые идеи о том, что должно = изменить наесть ли реагирующая замена горячего модуля для правильной работы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...