如果项目目录名称包含点，例如 username.github.io，热模块重新加载以及更改时刷新服务器将停止工作
系统信息在 Windows 和 Linux Ubuntu 上复制
您使用的是哪个版本的 Next.js？
我的 package.json 看起来像这样
{“依赖项”：{“@material-ui/core”：“^3.1.1”，“@material-ui/icons”：“^3.0.1”，“下一个”：“最新”，“反应”： "latest", "react-dom": "latest", "react-jss": "latest" }, "scripts": { "dev": "next", "build": "下一个构建 && 下一个导出 && rm -rf _next && cp -r out/* . && rm -rf out", "start": "下一个启动", "help": "下一个导出 -h" }, "devDependency": { "babel-eslint": “^8.2.1”，“eslint”：“^4.17.0”，“eslint-loader”：“^1.9.0”，“eslint-plugin-react”：“^7.6.1”}，“名称” ：“prathameshnetake.github.io”，“版本”：“1.0.0”，“主要”：“index.js”，“存储库”：“ https://prathameshnetake@github.com/prathameshnetake/prathameshnetake.github。 io ”，“作者”：“Prathamesh prathamesh.netake@gmail.com ”，“许可证”：“麻省理工学院”}
我已经在下一个 7.0.2 上进行了测试，当抛出警告时，HMR 似乎不起作用
当我删除导致警告的代码时，HMR 再次开始工作。
我认为这是一个错误，原因有两个：
我也明白了，_app.tsx 范围内的任何内容都无法重新加载任何更改。
@vinpac 说的是真的。当抛出一些警告时，HMR 会被阻止。特别是，不使用isolatedModules标志的 TypeScript 开发人员无法避免这些警告，我认为我们不应该让它们出错并添加一个选项来禁用这些警告。
@jagaapple 确实。如果您将 Material UI 与 next.js 一起使用，也会出现警告。您也可以压制它们。我担心的是，如果您将整个项目启动到目录中，并且该目录名称包含多个点，例如 abc.abc.abc，则 HMR 会中断。
对我来说也是同样的错误。即使改变了什么也没有发生。我.从目录名称中删除，一切都开始完美运行。
我还注意到 HMR 从 7.0.0 版本开始就不再工作
操作系统、节点和 NPM 信息：
- Using: MacOS Mojave
- Node version: v10.12.0
- NPM version: 6.4.1包.json：
"dependencies": {
"next": "^7.0.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
},
"devDependencies": {}终端或开发工具上都没有警告。
我尝试过在下一个版本中使用相同的依赖项6.1.2并且工作正常。
+1。警告
大家好，
我发现自己也被这个错误困住了。我测试了很多项目名称：
它们都不起作用，你可以在那里看到一种模式。我终于通过覆盖以下中的 watchOptions 找到了解决方法next.config.js：
module.exports = {
webpackDevMiddleware(config) {
config.watchOptions = {
ignored: [
/\.git\//,
/\.next\//,
/node_modules/
]
}
return config;
}
}这似乎适用于我提到的所有案例。因此，有问题的行可能是 @timneutkens 在之前的评论中指出的行https://github.com/zeit/next.js/blob/canary/packages/next/server/hot-reloader.js#L313-L317
我的2分钱！
顺便说一句，感谢大家接下来的出色工作！
@elmasse 你可以发送 PR 来修复它吗？我是否遗漏了某些内容，或者您是否添加了完全相同的忽略模式？
嗨@timneutkens 我可以在几个小时内发送 PR。我在忽略模式上添加了一个反斜杠/\.git\//。这只会忽略 .git/ 文件夹。不确定您是否有任何其他 .git* 模式需要忽略（目前无法想到除 .gitignore 之外的任何模式，但这不会影响 HMR IMO）。
请告诉我，我非常乐意发送 PR。
谢谢！最大限度
哦，我明白了，是的，我们忽略吧.git，很棒的收获！
我们还可以确保这在 Windows 上正常工作，对于其他模式（如=>）/\.git[\\/]也应该执行相同的操作/node_modules/[\\/]node_modules[\\/]
酷，我要添加这个：
// We don’t watch .git/ .next/ and node_modules for changes
const ignored = [
/\.git[\\/]/,
/\.next[\\/]/,
/node_modules/
]事实/node_modules/并非如此。需要斜杠/反斜杠的匹配，因为它只匹配文件夹名称。
大家好;
HMR 不适用于下面的 next.config.js 文件
require('dotenv').config()
const path = require('path')
const withPlugins = require('next-compose-plugins')
const withCSS = require('@zeit/next-css')
const withImages = require('next-images')
const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
const webpack = require('webpack')
const scssRegExp = /\.(scss|sass)$/
const scssModuleRegExp = /\.module\.(scss|sass)$/
const { PUBLIC_URL } = process.env
module.exports = withPlugins([
[
withCSS,
{
distDir: 'build',
assetPrefix: PUBLIC_URL,
webpack: (config, { dev, isServer }) => {
// Handling the additional aliases for scss
config.resolve.alias.styles = path.resolve(__dirname, './src/styles')
config.resolve.alias.assets = path.resolve(__dirname, './src/assets')
// SCSS files configuration
const scssOptions = cssLoaderConfig(config, {
cssModules: false,
cssLoaderOptions: {
importLoaders: 2,
},
postcssLoaderOptions: {},
dev,
isServer,
loaders: [{ loader: 'sass-loader' }],
})
// SCSS Module files configuration
const scssModuleOptions = cssLoaderConfig(config, {
cssModules: true,
cssLoaderOptions: {
importLoaders: 2,
localIdentName: '[local]___[hash:base64:5]',
},
postcssLoaderOptions: {},
dev,
isServer,
loaders: [{ loader: 'sass-loader' }],
})
config.module.rules.push(
{
test: scssRegExp,
exclude: scssModuleRegExp,
use: scssOptions,
},
{
test: scssModuleRegExp,
use: scssModuleOptions,
},
)
// fonts loader
config.module.rules.push({
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
fallback: 'file-loader',
publicPath: `${PUBLIC_URL}/_next/static/fonts/`,
outputPath: 'static/fonts/',
name: '[name]-[hash].[ext]',
},
},
],
})
// Linting in dev mode
if (dev) {
config.module.rules.push({
test: /\.js$/,
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// Emit errors as warnings for dev to not break webpack build.
// Eslint errors are shown in console for dev, yay :-)
emitWarning: true,
},
})
}
// Defines environement variables from the .env file
const env = Object.keys(process.env).reduce((acc, curr) => {
acc[`process.env.${curr}`] = JSON.stringify(process.env[curr])
return acc
}, {})
config.plugins.push(new webpack.DefinePlugin(env))
// Sets assets public path with the PUBLIC_URL prefix
config.output.publicPath = `${PUBLIC_URL}${config.output.publicPath}`
return config
},
webpackDevMiddleware(config) {
config.watchOptions = {
ignored: [
/[\\/]\.git[\\/]/,
/[\\/]\.next[\\/]/,
/[\\/]node_modules[\\/]/
]
}
return config;
}
},
],
[withImages],
])我正在使用 next@7.0.2 它仅在我禁用 eslint 发出的警告时才有效，这不是我想要做的。
webpackDevMiddleware 的新正则表达式对我来说没有效果。
任何建议或解决方法将不胜感激
@timneutkens我从 升级
实际上，它对我来说也不再适用于 8.0.0，因此其他一些尚未确定的更改破坏了 HMR :cry:next@8.0.0到next@8.0.0-canary.21，但现在 HMR 对我不起作用。还有其他人看到金丝雀的这个问题吗？
HMR 停止工作的一个常见原因next.config.js：
server.js等。所有使用 server.js 的示例都已损坏。
@Yzrsah 你想出任何解决方法吗？
我将 nextjs 8@latest 与express和server.js一起使用，并
Uncaught ReferenceError: webpackHotUpdate is not defined at main.js
在本地开发模式下加载每个页面。
[HMR] bundle rebuilding当我更改代码时，我注意到控制台中的消息，但应用程序永远不会应用更改，直到我重新加载整个页面。
@timneutkens 我不确定这是否与原始问题有关。如果需要，很高兴为您提供更多信息。
@genox我怀疑它是相关的，你能创建一个具有清晰再现的新问题吗？那我可以看看！
哈哈，真的，我将我的项目从 sitename.domain.next 重命名为 sitename-domain-next，然后我的 hmr 再次开始工作。如此愚蠢。
哈哈，真的太蠢了。
这不是最好的沟通方式。尤其是当您要求解决您遇到的问题时。
我已经提出要看看有清晰再现的新一期。
如上所述：
你能创建一个清晰再现的新问题吗？那我可以看看！
@timneutkens 我试图通过将 nextjs 示例之一升级到 8 来引发这种行为，该示例尽可能接近我当前使用的示例（express+typescript+mobx+custom _app、_document、next.config.js ... ）。应用我的一些配置后，无法重现将自定义服务器打字稿升级到 8 的问题。当我将项目降级到 next@7 时，一切正常。我暂时只运行 7，偶尔尝试一下 8。也许它只是随着发布而消失（tm）..可能是一些网络包的事情..对我来说在8上并不重要。如果我运气不好，我会开一张带有回购的票。 ;） 谢谢。
对于其他为此苦苦挣扎的人，HMR 对我来说被禁用了，因为我在 next.config.js 中禁用了分块
我已经改变了这个
webpack(config) {
config.optimization.splitChunks = {
cacheGroups: {
default: false
}
};
config.optimization.runtimeChunk = false;
return config;
}到
if (!dev) {
config.optimization.splitChunks = {
cacheGroups: {
default: false
}
};
config.optimization.runtimeChunk = false;
}在开发模式下运行时不会发生这种情况。
你不想添加config.optimization.runtimeChunk = false;它实际上破坏了很多东西。
感谢那。我现在正在玩，但对于我当前的用例，我真的不能使用分块！
我仍处于 PoC 模式，因此我将研究一下runtimeChunk设置。您对此还有进一步的阅读吗？
我的主要问题是为什么？ Next.js 确保一切正常工作，一旦您开始调整这些选项/禁用它们，您就有可能在未来的升级中破坏所有内容，因为我们无法确保它能够继续使用这些更改的设置。
一件事，我也发现了问题，使用 next@8.0.X 和自定义服务器，热重载不起作用
express.get('/:country_code?', (req, res) => {
app.render(req, res, '/index', req.query, parse(req.url, true))
})
express.get('*', (req, res) => {
return handle(req, res, parse(req.url, true))
})但如果我没有指定路径app.render，只需使用handle
// express.get('/:country_code?', (req, res) => {
// app.render(req, res, '/index', req.query, parse(req.url, true))
// })
express.get('*', (req, res) => {
return handle(req, res, parse(req.url, true))
})它肯定有效。
另一件事是如果项目的文件结构像这样
- /pages
- /pages/index/index.tsx
- /pages/index/connector.tsx当使用 url 打开浏览器时https://mydomain（索引页）
将预渲染 SSR，但在提供给浏览器后，reactDOM 将不会再次渲染，因此任何事件触发器都将不起作用，例如 [onClick, ...]
我不确定这是 Nextjs 设计文件夹/页面内文件结构的错误或规则。
但在 8.0.4-canary-xx 中可以与上述情况相同。