Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
I Failed to use a SIMPLE component in the React portlet In LFERAY !
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 :
I imported rc-tooltip in index.es.js like below :
import Tooltip from 'rc-tooltip';
and only change this part of code :
Then deploy my portlet and No error in tomcat console.
In Firefox console this error shows and portet display Nothing!
What is wrong ? i use google but do not found useful help.
Also my bnd.bnd :
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}>
<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"
_getResolutionError loader.js:384
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
Anyone can help me?
or a tutorial to use React Component in liferay portlets
Thank you
or a tutorial to use React Component in liferay portlets
Thank you

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
Copyright © 2025 Liferay, Inc
• Privacy Policy
Powered by Liferay™