以下模块无法热更新：（需要完全重新加载）

Posted 2023-03-13

【中文标题】以下模块无法热更新：（需要完全重新加载）

【英文标题】：The following modules couldn't be hot updated: (Full reload needed)

【发布时间】：2016-10-03 21:39:59

【问题描述】：

我正在尝试在 react/typescript（使用 TSX）环境中设置热模块重新加载。我已经使用the react/redux real-world example 作为模型来推动事情的发展，这就是我目前所拥有的：

server.js

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = new (require('express'))()
var port = 3000

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler,  noInfo: true, publicPath: config.output.publicPath ))
app.use(webpackHotMiddleware(compiler))

app.use(function(req, res) 
  res.sendFile(__dirname + '/index.html')
)

app.listen(port, function(error) 
  if (error) 
    console.error(error)
   else 
    console.info("==> ????  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  
)

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        path.resolve('./src/index.tsx'),    
    ],
    output: 
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    ,
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin( template: './index.html' )
    ],
    module: 
        loaders: [
             test: /\.tsx?$/, loader: 'ts-loader' 
        ]
    ,
    resolve: 
        extensions: ['', '.ts', '.tsx', '.js', '.json']
    ,

index.tsx

import * as React from 'react';
import  render  from 'react-dom';
import Root from './containers/root';

render(
    <Root />,
    document.getElementById('root')
);

containers/root.tsx

import * as React from 'react';

export default class Root extends React.Component<void, void> 
    render(): JSX.Element 
        return (
            <p>boom pow</p>
        );
    

将根元素中的 <p>boom pow</p> 更改为 <p>boom boom pow</p> 会在浏览器的 javascript 控制台中启动此操作：

[HMR] bundle rebuilding
client.js?3ac5:126 [HMR] bundle rebuilt in 557ms
process-update.js?e13e:27 [HMR] Checking for updates on the server...
process-update.js?e13e:81 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
process-update.js?e13e:89 [HMR]  - ./src/containers/root.tsx
process-update.js?e13e:89 [HMR]  - ./src/index.tsx

据我所知，我已经通过these steps，但仍然没有运气。

我错过了什么？

【问题讨论】：

您的配置和代码中的所有“热门”部分在哪里？加载器的“react-hot”，您的条目上的“webpack/hot/only-dev-server”，hot: true 在您的 webpack 开发服务器上编译配置？

【参考方案1】：

如果有人仍然对此感到困惑，请参阅自述文件：https://github.com/webpack-contrib/webpack-hot-middleware/blob/master/README.md

这个模块只关心将浏览器客户端连接到 webpack 服务器并接收更新的机制。它将订阅来自服务器的更改并使用 webpack 的 HMR API 执行这些更改。实际上使您的应用程序能够使用热重载来进行无缝更改超出了范围，通常由另一个库处理。

webpack-hot-middleware 不处理热重载，例如您需要使用 react-hot-loader

【参考方案2】：

正如评论者所说，这个问题在我的加载器中丢失了——我不确定这是否与它有关，但我也切换到在 typescript 之后使用 babel——并将 typescript 编译为 ES6。新配置如下：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        path.resolve('./src/index.ts'), 
    ],
    output: 
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    ,
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin( template: path.resolve('./src/index.html') )
    ],
    module: 
        loaders: [
               test: /\.tsx?$/, 
                loaders: [
                    'react-hot',
                    'babel?presets[]=es2015',                  
                    'ts-loader'
                ] 
            ,
               test: /\.json$/, 
                loader: 'json'
            
        ]
    ,
    resolve: 
        extensions: ['', '.ts', '.tsx', '.js', '.json']
    ,