使用编译后的自定义layout插件 JS文件，里面的styled-components报hook错误

[Ele-Lee]

What happens?

使用我自己的layout插件（fater-build后），react会报这个警告错误； devScripts.js:5836 Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. 代码不多，直接复制到一个test.js，然后把 .umi/plugin-layout/Layout.tsx 里面React.createElement函数require路径指向test.js就可以复现

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/es/layout/style");

var _layout = _interopRequireDefault(require("antd/es/layout"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  background-color: #fff;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Content = _layout.default.Content;
var HeaderHeight = 60;

var Header = _styledComponents.default.header(_templateObject());

function BaseLayout(_ref) {
  var children = _ref.children,
      location = _ref.location,
      route = _ref.route,
      history = _ref.history,
      match = _ref.match,
      routes = _ref.routes,
      _ref$apps = _ref.apps,
      apps = _ref$apps === void 0 ? [] : _ref$apps,
      _ref$menuLogo = _ref.menuLogo,
      menuLogo = _ref$menuLogo === void 0 ? 'https://static.guorou.net/guorou-portal-logo.png' : _ref$menuLogo,
      _ref$menuTitle = _ref.menuTitle,
      menuTitle = _ref$menuTitle === void 0 ? '果肉运营后台' : _ref$menuTitle,
      userConfig = _ref.userConfig;
  return /*#__PURE__*/_react.default.createElement(_layout.default, {
    style: {
      minHeight: '100vh'
    }
  }, /*#__PURE__*/_react.default.createElement("div", null, "11"), /*#__PURE__*/_react.default.createElement(_layout.default, {
    className: "site-layout"
  }, /*#__PURE__*/_react.default.createElement("header", {
    style: {
      height: HeaderHeight
    }
  }, "\u5934")));
}

var _default = BaseLayout;
exports.default = _default;

代码中Header就是我的styled组件，但是并没有在函数中使用，注释就不会有这报错

相关环境信息

• Umi 版本： 3.2.20
• react 版本： 16.13.1
• Node 版本： 12.16.1
• styled-components 版本： ^5.2.0

[sorrycc]

It's inactive above 3 months, feel free to reopen if you still have problems.