I Failed to use a SIMPLE component in the React portlet In LFERAY !

thumbnail
Nader Jafari, modified 6 Years ago. Junior Member Posts: 84 Join Date: 8/24/11 Recent Posts
Hi guys
I tried to develop my first React Portlet and use a simple component Named : rc-tooltip
I created a Module in Intelij with template npm-react-portlet.
This portlet is very simple and Works Fine!
i install rc-tooltip with : npm i --save rc-tooltip
My Package.json is after run this command :

{
    "dependencies": {
       "react": "15.6.2",
       "react-dom": "15.6.2",
       "rc-tooltip": "^3.7.3"
    },
    "devDependencies": {       
"babel-cli": "^6.26.0",       
"babel-preset-env": "^1.7.0",       
"babel-preset-react": "6.24.1",       
"liferay-npm-bundler": "2.7.0"
    },
    "main": "lib/index.es.js",
    "name": "nader",
    "scripts": {
       "build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources &&
                 liferay-npm-bundler"
    },
    "version": "1.0.0"
 }

I imported rc-tooltip in index.es.js  like below :
import Tooltip from 'rc-tooltip';
and only change this part of code :
class Game extends React.Component {
    render() {
       return (
          <div classname="game">
                 <tooltip placement="left" trigger="{['click']}" overlay="{<span">tooltip}&gt;
                     <a href="#">hover</a>
                 </tooltip>
             <div classname="game-board">
                <board /> 
            </div>
             <div classname="game-info">
                <div>{/* status */}</div>
                <ol>{/* TODO */}</ol>
             </div> 
         </div>
       );
    } 
}

Then deploy my portlet and No error in tomcat console.
In Firefox console this error shows and portet display Nothing!
Error: "The following problems where detected while resolving modules: Missing version constraints for 
nader$indexof in package.json of nader$component-classes@1.2.6"
&nbsp;&nbsp;&nbsp; _getResolutionError loader.js:384
&nbsp;&nbsp;&nbsp; require loader.js:283

What is wrong ?  i use google but do not found useful help.

Also my bnd.bnd :
Bundle-Name: nader
 Bundle-SymbolicName: com.nader.jafari.najaf
 Bundle-Version: 1.0.0
 Export-Package: com.nader.jafari.najaf.constants
 Web-ContextPath: /nader
thumbnail
Nader Jafari, modified 6 Years ago. Junior Member Posts: 84 Join Date: 8/24/11 Recent Posts
Anyone can help me?
or  a tutorial  to use React Component in liferay portlets
Thank you emoticon
rahul bhonsale, modified 5 Years ago. New Member Posts: 7 Join Date: 5/25/20 Recent Posts
Hi here i have a LR 7.3.1 portlet. It is a java portlet with react frontend, built with maven.https://github.com/rahulahoop/liferay-react-component-portlet