反应热加载器 3

Posted 2023-02-21

【中文标题】反应热加载器 3

【英文标题】：React Hot Reloader 3

【发布时间】：2016-08-13 14:06:51

【问题描述】：

我正在尝试新的React Hot Loader 3，但收到一条警告消息：

warning.js:44 警告：React.createElement：类型不应为空， 未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 ReactClass（用于复合组件）。检查渲染 AppContainer的方法。

这是应用程序文件。出了什么问题？Ps：它的编写方式与示例相同。Ps2：问题不在 App 中，因为它在 render() 之外的if 语句Ps3：警告仅在浏览器尝试“热重载”时出现（当我对任何文件进行更改时）

import React from 'react';
import  render  from 'react-dom';
import  AppContainer  from 'react-hot-loader';
import a11y  from 'react-a11y'
import Store from './stores/Store';
import App from './components/App/App';

const store = new Store();

if(process.env.NODE_ENV === 'development')
  a11y(React);


render(
  <AppContainer
    component=App
    props= store 
  />,
  document.getElementById('root')
);

if (module.hot) 
  module.hot.accept('./components/App/App', () => 
    render(
      <AppContainer
        component=require('./components/App/App').default
        props= store 
      />,
      document.getElementById('root')
    );
  );

【问题讨论】：

不应该 component=require('./components/App/App').default 只是 component=App 吗？再次要求同一个组件（内联，请注意）并尝试使用 .default 属性的目的是什么？

在 Dan 示例中是这样写的。如果我更改为 component=App 我不会收到错误，但组件也不会热重载。

我明白了...这是对 hotloader 工作方式的某种重大升级，它在 alpha atm 中...您能否验证您的 package.json 文件中的 hotloader 版本以及您的插件webpack/babel 配置中的 /entry 数组？

它与另一个 babel 插件 (add-module-exports) 冲突。我已经删除了它，现在它可以工作了。

【参考方案1】：

好的，问题出在我的 .babelrc 文件上。我有一些其他的插件，我已经删除了，它工作正常：

  "presets": ["es2015-loose", "react", "stage-1"],

  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators-legacy"
  ],

【讨论】：

如果您列出您删除的插件会更有帮助。