在使用 Next.js 进行前端开发时，有时候会遇到模块热替换 (HMR) 失败的问题，报错信息为 Module build failed: Unknown word。这种情况通常是由于 Next.js 的 babel 配置没有正确设置所致。本文将详细介绍如何解决这个问题。
什么是模块热替换 (HMR)
模块热替换 (HMR) 是指在应用程序运行时，可以在不需要重新加载整个页面的情况下，替换掉应用程序中的某个模块。这样可以提高开发效率，减少等待时间。
在 Next.js 中，默认开启了模块热替换功能。当某个模块发生变化时，会自动更新页面中的内容。
问题原因
当出现 Module build failed: Unknown word 错误时，通常是由于 Next.js 的 babel 配置没有正确设置所致。具体来说，就是没有包含必要的 babel 插件。
在 Next.js 中，使用 babel 来编译和转换代码。默认情况下，Next.js 使用的是 @babel/preset-env 插件来转换 ES6+ 语法。但是，这个插件并不支持 JSX 语法和 React 语法糖。因此，我们需要手动添加 @babel/preset-react 插件来支持这些语法。
解决方法
要解决 Module build failed: Unknown word 错误，需要在 Next.js 的 babel 配置中手动添加 @babel/preset-react 插件。具体步骤如下：
- 安装 @babel/preset-react 插件。
npm install --save-dev @babel/preset-react
- 在 Next.js 项目的根目录下，创建一个 .babelrc 文件。
{
"presets": ["next/babel", "@babel/preset-react"]
}这个文件中的内容是一个 JSON 对象，包含一个 presets 属性。该属性指定了使用的 babel 插件。其中，next/babel 表示使用 Next.js 默认的 babel 配置，@babel/preset-react 表示添加了 @babel/preset-react 插件。
- 重新启动 Next.js 应用程序。
现在，你的 Next.js 应用程序应该已经可以正常地使用模块热替换功能了。
示例代码
下面是一个简单的 Next.js 应用程序，包含了 JSX 语法和 React 语法糖。如果没有正确设置 babel 配置，运行时就会出现 Module build failed: Unknown word 错误。
// javascriptcn.com 代码示例
import React from 'react';
export default function Home() {
return (
<div>
<h1>Hello, Next.js!</h1>
<p>This is a sample app using JSX and React syntax sugar.</p>
</div>
);
}要解决这个问题，你需要按照上面的步骤手动添加 @babel/preset-react 插件，并重新启动应用程序。这样，你就可以愉快地使用模块热替换功能了。
总结
在 Next.js 中，模块热替换 (HMR) 是一个非常有用的功能。但是，如果没有正确设置 babel 配置，就会出现 Module build failed: Unknown word 错误。为了解决这个问题，你需要手动添加 @babel/preset-react 插件，并在 .babelrc 文件中指定使用这个插件。
希望本文能够帮助你解决这个问题，并提高你的 Next.js 开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6505543295b1f8cacd1d4cc1