React Hot Loader

最新推荐文章于 2026-09-18 17:57:53 发布

原创最新推荐文章于 2026-09-18 17:57:53 发布 · 390 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JS工具类

当前文章被收录于：

JS工具类

9 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了解决在使用React及react-router过程中遇到的热模块替换(HMR)警告问题的方法。通过安装react-transform-hmr和babel-plugin-react-transform，并配置.babelrc文件来启用HMR功能。

错误

Warning: [react-router] You cannot change ; it will be ignored
Warning: [react-router] You cannot change ; it will be ignored

错误类型

这里写图片描述

原因：

// src/index.js
// Hot Module Replacement API
if (module.hot) {
  module.hot.accept();
}

看这个issues
链接1
react-transform-hmr
babel-plugin-react-transform

解决方案：

$ npm install --save-dev react-transform-hmr
$ npm install --save-dev babel-plugin-react-transform

.babelrc

{
  "presets": [ "es2015", "stage-0", "react"],
  "env": {
    "build": {
      "optional": ["optimisation", "minification"]
    },
    "development": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          "imports": ["react"],
          "locals": ["module"] }]
      }]]
    }
  },
  "plugins": [
    ["transform-runtime"],
    ["import", {"libraryName": "antd", "style": "css"}]
  ],
  "sourceMaps": true
}