CODEWITHSUNDEEP
reactjsliferay
Marc Endtricht
Marc Endtricht

Reputation: 31

Invalid hook creating Liferay React component

I'm trying to create custom react components based on Liferay's Clay components.

Using e.g. just a ClayButton works, but as soon as i try to use hooks (like React.useState), the browser console tells me:

Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message

The full message tells me i could be using mismatching versions of react and react-dom. I'm not. I also don't have 2 different versions of react, according to the test described there.

I created a minimal example module at https://github.com/ReFl3x0r/liferay-react-component-test which can be tested in a Liferay Gradle Workspace.

There's also an older thread in Liferay Forums discussing this error, but with no solution. (https://liferay.dev/ask/questions/development/re-lr-7-3-react-portlet-invalid-hook-call)

What am i doing wrong?

EDIT: Trying to point out the main code snippets.

First 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;

The 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"
}

The view.jsp including the component (shortened):

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

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

Upvotes: 0

Views: 638

Answers (1)

Marc Endtricht
Marc Endtricht

Reputation: 31

I finally got it working. Reducing package.json like this:

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

and adding a ".npmbundlerrc" in modules root with content:

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

did the trick.

Working example is at https://github.com/ReFl3x0r/liferay-react-component-test/tree/working

Upvotes: 2

Related Questions