无效钩子创建Liferay React组件

Question

我正在尝试创建基于Liferay的Clay组件的自定义反应组件。

例如，只使用ClayButton即可工作，但一旦我尝试使用钩子(如React.useState)，浏览器控制台就会告诉我：

小型化反应错误#321；访问https://reactjs.org/docs/error-decoder.html?invariant=321获取完整消息

完整的信息告诉我，我可能在使用与react和react不匹配的版本。我没有。根据这里描述的测试，我也没有两种不同版本的react。

我在https://github.com/ReFl3x0r/liferay-react-component-test中创建了一个最小的示例模块，可以在Liferay工作区中进行测试。

Liferay论坛中也有一个较旧的线程讨论这个错误，但没有解决方案。(https://liferay.dev/ask/questions/development/re-lr-7-3-react-portlet-invalid-hook-call)

我做错什么了？

编辑:试图指出主要的代码片段。

第一个CustomButtonFail.es.js：

import React from 'react';

import ClayButton from '@clayui/button';

const CustomButton = () => {

    const [name, setName] = React.useState('test');

    return (
        <ClayButton displayStyle='primary'>
            TEST
        </ClayButton>
    );
}

export default CustomButton;

package.json：

{
    "dependencies": {
        "@clayui/button": "^3.40.0",
        "@clayui/css": "3.x",
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    },
    "devDependencies": {
         "@liferay/npm-scripts": "47.0.0",
         "react-test-renderer": "^16.12.0"
    },
    "name": "component-test",
    "scripts": {
        "build": "liferay-npm-scripts build"
    },
    "version": "1.0.0"
}

包括组件(缩写)的view.jsp：

<%@taglib uri="http://liferay.com/tld/react" prefix="react" %>

<div class="react-component-failing">
    <react:component
        module="js/CustomButtonFail.es"
    />
</div>

Answer 1

我终于让它起作用了。像这样减少package.json：

{
  "devDependencies": {
    "@liferay/npm-scripts": "47.0.0"
  },
  "name": "component-test",
  "scripts": {
    "build": "liferay-npm-scripts build"
  },
  "version": "1.0.0"
}

并在模块根目录中添加".npmbundlerrc“内容：

{
  "config": {
      "imports": {
          "frontend-taglib-clay": {
              "@clayui/button": ">=3.40.0",
              "@clayui/css": ">=3.x"
          },
          "@liferay/frontend-js-react-web": {
              "react": ">=16.12.0"
          }
      }
  }
}

成功了。

工作示例位于https://github.com/ReFl3x0r/liferay-react-component-test/tree/working