Javascript 网页包的HMR已损坏

我按照步骤在我的SSR React+Express应用程序中添加了webpack热中间件，但它不起作用

server.js

从“express”导入express；
从“cors”导入cors；
从“dotenv”导入dotenv；
从“网页包”导入网页包；
从“头盔”导入头盔；
从“React”导入React；
从“api/server”导入{searchTrack}；
从“react dom/server”导入{renderToString}；
从“反应路由器配置”导入{renderRoutes}；
从“react router dom”导入{StaticRouter}；
从“组件”导入{Layout}；
从“./frontend/routes/serverRoutes”导入服务器路由；
从“/getManifest”导入getManifest；
dotenv.config（）；
const{ENV，PORT_DEV，PORT_PRO}=process.ENV；
const port=ENV==“开发”？PORT_DEV:PORT_PRO；
常量app=express（）；
应用程序使用(
科尔斯({
来源：[“*”]，
})
);
如果（环境==“开发”）{
摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩""""",；
log（“环境：，“开发工作”）；
const webpackConfig=require（“../../webpack.config”）；
const webpackDevMiddleware=require（“webpack-dev中间件”）；
const webpackHotMiddleware=require（“webpackHotMiddleware”）；
const compiler=webpack（webpackConfig）；
常量服务器配置={
端口：port_DEV，
热：是的，
};
app.use（webpackDevMiddleware（compiler，serverConfig））；
app.use（webpackHotMiddleware（compiler））；
}
如果（环境==“生产”）{
应用程序使用（（请求、响应、下一步）=>{
如果（！request.hashManifest）{
request.hashManifest=getManifest（）；
}
next（）；
});
app.use（express.static（`${uu dirname}/public`）；
应用程序使用（helmet.permittedCrossDomainPolicys（））；
应用程序禁用（“x供电”）；
}
const setResponse=（html，清单）=>{
const mainStyles=manifest？manifest[“main.css”]：“assets/main.css”；
const mainBuild=manifest？manifest[“main.js”]：“assets/main.js”；
const vendorBuild=manifest？manifest[“vendors.js”]：“assets/vendor.js”；
返回`
歌词
${html}
`;
};
const renderApp=（请求、响应）=>{
常量html=renderToString(
{renderRoutes（服务器路由）}
);
send（setResponse（html，request.hashManifest））；
};
app.get（“/searchTracks/：search/：sort”，（请求，res）=>{
const{search，sort}=req.params；
searchTrack（搜索、排序）
.那么(
（回应）=>
response.status==200&&
res.send（response.data.message.body.track\u list）
)
.catch（（错误）=>console.log（错误））；
});
app.get（“*”，renderApp）；
app.listen（process.env.PORT | | PORT，（错误）=>{
如果（错误）{
log（“错误：，“无法运行服务器”）；
}否则{
log（`Server running on port${port}-${ENV}`）；
摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩摩""""",；
}
});

webpack.config.js

const path=require（“路径”）；
const webpack=需要（“webpack”）；
const MiniCssExtractPlugin=require（“迷你css提取插件”）；
const CompressionWebpackPlugin=require（“压缩网页包插件”）；
const TerserPlugin=require（“terser网页包插件”）；
const ManifestPlugin=require（“网页包清单插件”）；
require（“dotenv”）.config（）；
const isDev=process.env.env==“开发”；
const entry=[”/src/frontend/index.js“]；
如果（isDev）{
推(
“webpack热中间件/客户端？路径=/\uuuuuWebpack\uHMR&timeout=2000&reload=true”
);
}
控制台日志（条目）；
module.exports={
devtool:！isDev？“隐藏源代码映射”：“评估廉价源代码映射”，
进入
模式：process.env.env，
输出：{
path:path.resolve（uu dirname，“src/server/public”），
文件名：isDev？“assets/main.js”：“assets/main-[hash].js”，
公共路径：“/”，
},
决心：{
别名：{
样式：path.resolve（uu dirname，“./src/frontend/assets”），
组件：path.resolve（uu dirname，“./src/frontend/components”），
api:path.resolve（uu dirname，“./src/api”），
},
扩展名：[“.js”、“.jsx”]，
},
优化：{
对,，
最小化：[新的TerserPlugin（）]，
分割块：{
块：“异步”，
姓名：对，
缓存组：{
供应商：{
名称：“供应商”，
块：“全部”，
ReuseeExistingChunk:true，
优先事项：1，
文件名：isDev？“assets/vendor.js”：“assets/vendor-[hash].js”，
是的，
测试（模块、块）{
const name=module.nameForCondition&&module.nameForCondition（）；
返回块(
（区块）=>
chunk.name！=“供应商”&&/[\\/]节点\模块[\\/]/.test（名称）
);
},
},
},
},
},
模块：{
规则：[
{
测试：/\（js|jsx）$/，
排除：/node_模块/，
使用：{
加载器：“巴别塔加载器”，
},
},
{
测试：/\.styl$/,，
使用：[“样式加载器”、“css加载器”、“手写笔加载器”]，
},
{
测试：/\（s*）css$/，
使用：[
{
加载器：MiniCssExtractPlugin.loader，
},
“css加载器”，
],
},
{
测试：/\（png | gif | jpg）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：“资产/[hash].[ext]”，
},
},
],
},
],
},
开发服务器：{
历史上的倒退：是的，
},
插件：[
isDev？新的webpack.HotModuleReplacementPlugin（）：（）=>{}，
！伊斯德夫
？新的压缩网页包插件({
测试：/\.js$\.css$/,，
文件名：“[file].gz”，
})
: () => {},
！isDev？new ManifestPlugin（）：（）=>{}，
新的MinicsSextract插件({
文件名：isDev？“assets/main.css”：“assets/main-[hash].css”，
}),
],
};

babel.rc

{
“预设”：[
“@babel/preset env”，
“@babel/pr