Message Boards
LR 7.3 - React Portlet: Invalid hook call
Erik Berger, modified 4 Years ago.
LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 10 Join Date: 5/6/18 Recent Posts
Hello!
I am working on a React portlet based on Liferay 7.3 GA1. For this, I use the new <react:component> and so far it works quite well.
But when I use a hook in my React function component, I get errors in the browser console:
"Hooks can only be called inside of the body of a function component."
Hier ist meine index.es.js:
This is my package.json:
I looked into the source code of the Liferay portal where this react taglib is used and there the hooks are used the same way.
Where is my mistake?
I am working on a React portlet based on Liferay 7.3 GA1. For this, I use the new <react:component> and so far it works quite well.
But when I use a hook in my React function component, I get errors in the browser console:
"Hooks can only be called inside of the body of a function component."
Hier ist meine index.es.js:
import React, { useState } from 'react';
import PropTypes from 'prop-types';
const ReactTestComponent = ({
headline
}) => {
const [count, setCount] = useState(0);
return (
<div>
<div>
<h1>React Test Portlet</h1>
</div>
<div>{headline} and {count}</div>
</div>
);
};
ReactTestComponent.propTypes = {
headline: PropTypes.string
};
export default function (props) {
return <reacttestcomponent {...props} />;
}This is my package.json:
{
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0",
"prop-types": "^15.7.2"
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-loader": "7.1.5",
"liferay-npm-bundler": "^2.17.1",
"liferay-npm-build-support": "^2.17.1"
},
"main": "lib/index.es.js",
"name": "react-example-portlet",
"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 looked into the source code of the Liferay portal where this react taglib is used and there the hooks are used the same way.
Where is my mistake?
Erik Strauß, modified 4 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 10 Join Date: 5/6/18 Recent Posts
I switched from liferay-npm-bundler to liferay-npm-scripts. Thats my package.json now:
But now I get the following exception while loading the page:
[code]
{
"dependencies": {
"prop-types": "^15.7.2",
"react": "16.13.0",
"react-dom": "16.13.0"
},
"devDependencies": {
"liferay-npm-scripts": "28.0.2"
},
"main": "lib/index.es.js",
"name": "react-example-portlet",
"scripts": {
"build": "liferay-npm-scripts build"
},
"version": "1.0.0"
}
But now I get the following exception while loading the page:
2020-03-10 15:09:50.541 ERROR [http-nio-8080-exec-3][PortletRequestDispatcherImpl:304] Unable to dispatch request: java.lang.NullPointerException
2020-03-10 15:09:50.543 ERROR [http-nio-8080-exec-3][PortletServlet:119] javax.portlet.PortletException: javax.servlet.ServletException: java.lang.NullPointerException
javax.portlet.PortletException: javax.servlet.ServletException: java.lang.NullPointerException
at com.liferay.portlet.internal.PortletRequestDispatcherImpl.dispatch(PortletRequestDispatcherImpl.java:307)
at com.liferay.portlet.internal.PortletRequestDispatcherImpl.include(PortletRequestDispatcherImpl.java:123)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.include(MVCPortlet.java:572)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.include(MVCPortlet.java:588)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.doView(MVCPortlet.java:176)
at com.react.example.portlet.ReactExamplePortlet.doView(ReactExamplePortlet.java:49)
at com.liferay.portal.kernel.portlet.LiferayPortlet.doDispatch(LiferayPortlet.java:286)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.doDispatch(MVCPortlet.java:465)
at javax.portlet.GenericPortlet.render(GenericPortlet.java:291)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.render(MVCPortlet.java:304)
at com.liferay.portlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:127)
at com.liferay.portlet.ScriptDataPortletFilter.doFilter(ScriptDataPortletFilter.java:58)
at com.liferay.portlet.internal.FilterChainImpl.doFilter(FilterChainImpl.java:124)
at com.liferay.portal.kernel.portlet.PortletFilterUtil.doFilter(PortletFilterUtil.java:71)
at com.liferay.portal.kernel.servlet.PortletServlet.service(PortletServlet.java:115)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.eclipse.equinox.http.servlet.internal.registration.EndpointRegistration.service(EndpointRegistration.java:153)
at org.eclipse.equinox.http.servlet.internal.servlet.ResponseStateHandler.processRequest(ResponseStateHandler.java:62)
at org.eclipse.equinox.http.servlet.internal.context.DispatchTargets.doDispatch(DispatchTargets.java:120)
at org.eclipse.equinox.http.servlet.internal.servlet.RequestDispatcherAdaptor.include(RequestDispatcherAdaptor.java:48)
at com.liferay.portlet.internal.InvokerPortletImpl.invoke(InvokerPortletImpl.java:571)
at com.liferay.portlet.internal.InvokerPortletImpl.invokeRender(InvokerPortletImpl.java:661)
at com.liferay.portlet.internal.InvokerPortletImpl.render(InvokerPortletImpl.java:344)
at com.liferay.portal.monitoring.internal.portlet.MonitoringInvokerPortlet.lambda$render$0(MonitoringInvokerPortlet.java:259)
at com.liferay.portal.monitoring.internal.portlet.MonitoringInvokerPortlet._render(MonitoringInvokerPortlet.java:363)
at com.liferay.portal.monitoring.internal.portlet.MonitoringInvokerPortlet.render(MonitoringInvokerPortlet.java:257)
at org.apache.jsp.html.portal.render_005fportlet_jsp._jspService(Unknown Source)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at com.liferay.portal.servlet.DirectRequestDispatcher.include(DirectRequestDispatcher.java:64)
at com.liferay.portal.servlet.DirectRequestDispatcherFactoryImpl$IndirectRequestDispatcher.include(DirectRequestDispatcherFactoryImpl.java:190)
at com.liferay.portal.servlet.ClassLoaderRequestDispatcherWrapper.doDispatch(ClassLoaderRequestDispatcherWrapper.java:79)
at com.liferay.portal.servlet.ClassLoaderRequestDispatcherWrapper.include(ClassLoaderRequestDispatcherWrapper.java:53)
at com.liferay.portal.servlet.TransferHeadersHelperImpl$TransferHeadersRequestDispatcher.include(TransferHeadersHelperImpl.java:162)
at com.liferay.portlet.internal.PortletContainerImpl._render(PortletContainerImpl.java:908)
at com.liferay.portlet.internal.PortletContainerImpl.lambda$render$2(PortletContainerImpl.java:223)
at com.liferay.portlet.internal.PortletContainerImpl._preserveGroupIds(PortletContainerImpl.java:425)
at com.liferay.portlet.internal.PortletContainerImpl.render(PortletContainerImpl.java:211)
at com.liferay.portlet.SecurityPortletContainerWrapper.render(SecurityPortletContainerWrapper.java:145)
at com.liferay.portlet.RestrictPortletContainerWrapper.lambda$render$0(RestrictPortletContainerWrapper.java:128)
at com.liferay.portlet.RestrictPortletContainerWrapper._render(RestrictPortletContainerWrapper.java:189)
at com.liferay.portlet.RestrictPortletContainerWrapper.render(RestrictPortletContainerWrapper.java:126)
at com.liferay.portal.kernel.portlet.PortletContainerUtil.render(PortletContainerUtil.java:215)
at com.liferay.portal.layoutconfiguration.util.PortletRenderer._render(PortletRenderer.java:209)
at com.liferay.portal.layoutconfiguration.util.PortletRenderer.render(PortletRenderer.java:87)
at com.liferay.portal.layoutconfiguration.util.RuntimePageImpl.doProcessTemplate(RuntimePageImpl.java:593)
at com.liferay.portal.layoutconfiguration.util.RuntimePageImpl.doDispatch(RuntimePageImpl.java:359)
at com.liferay.portal.layoutconfiguration.util.RuntimePageImpl.processTemplate(RuntimePageImpl.java:160)
at com.liferay.portal.layoutconfiguration.util.RuntimePageImpl.processTemplate(RuntimePageImpl.java:185)
at com.liferay.portal.kernel.layoutconfiguration.util.RuntimePageUtil.processTemplate(RuntimePageUtil.java:105)
at org.apache.jsp.html.portal.layout.view.portlet_jsp._jspService(Unknown Source)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at com.liferay.portal.servlet.DirectRequestDispatcher.include(DirectRequestDispatcher.java:64)
at com.liferay.portal.servlet.DirectRequestDispatcherFactoryImpl$IndirectRequestDispatcher.include(DirectRequestDispatcherFactoryImpl.java:190)
at com.liferay.portal.servlet.ClassLoaderRequestDispatcherWrapper.doDispatch(ClassLoaderRequestDispatcherWrapper.java:79)
at com.liferay.portal.servlet.ClassLoaderRequestDispatcherWrapper.include(ClassLoaderRequestDispatcherWrapper.java:53)
at com.liferay.portal.servlet.TransferHeadersHelperImpl$TransferHeadersRequestDispatcher.include(TransferHeadersHelperImpl.java:162)
at com.liferay.portal.model.impl.LayoutTypeControllerImpl.includeLayoutContent(LayoutTypeControllerImpl.java:166)
at com.liferay.portal.model.impl.LayoutImpl.includeLayoutContent(LayoutImpl.java:890)
at com.liferay.portal.action.LayoutAction.processLayout(LayoutAction.java:413)
at com.liferay.portal.action.LayoutAction.execute(LayoutAction.java:170)
at com.liferay.portal.struts.PortalRequestProcessor._process(PortalRequestProcessor.java:415)
at com.liferay.portal.struts.PortalRequestProcessor.process(PortalRequestProcessor.java:155)
at com.liferay.portal.internal.servlet.MainServlet.doGet(MainServlet.java:205)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:634)
at com.liferay.portal.internal.servlet.MainServlet.service(MainServlet.java:622)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:124)
at com.liferay.portal.servlet.filters.password.modified.PasswordModifiedFilter.processFilter(PasswordModifiedFilter.java:62)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.servlet.filters.secure.BaseAuthFilter.processFilter(BaseAuthFilter.java:340)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.monitoring.internal.servlet.filter.MonitoringFilter.processFilter(MonitoringFilter.java:183)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilter.doFilter(InvokerFilter.java:104)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:712)
at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:459)
at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:384)
at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:312)
at com.liferay.friendly.url.internal.servlet.FriendlyURLServlet.service(FriendlyURLServlet.java:409)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at com.liferay.portal.servlet.ServletAdapter.service(ServletAdapter.java:99)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:124)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.servlet.filters.i18n.I18nFilter.processFilter(I18nFilter.java:368)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.servlet.filters.password.modified.PasswordModifiedFilter.processFilter(PasswordModifiedFilter.java:62)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.servlet.filters.secure.BaseAuthFilter.processFilter(BaseAuthFilter.java:340)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.servlet.filters.etag.ETagFilter.processFilter(ETagFilter.java:87)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.servlet.filters.autologin.AutoLoginFilter.processFilter(AutoLoginFilter.java:264)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.BaseFilter.processFilter(BaseFilter.java:147)
at com.liferay.portal.monitoring.internal.servlet.filter.MonitoringFilter.processFilter(MonitoringFilter.java:183)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilter.doFilter(InvokerFilter.java:104)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:712)
at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:459)
at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:384)
at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:312)
at com.liferay.portal.servlet.filters.virtualhost.VirtualHostFilter.processFilter(VirtualHostFilter.java:360)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDirectCallFilter(InvokerFilterChain.java:196)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:99)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDirectCallFilter(InvokerFilterChain.java:196)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:99)
at org.tuckey.web.filters.urlrewrite.RuleChain.handleRewrite(RuleChain.java:176)
at org.tuckey.web.filters.urlrewrite.RuleChain.doRules(RuleChain.java:145)
at org.tuckey.web.filters.urlrewrite.UrlRewriter.processRequest(UrlRewriter.java:92)
at org.tuckey.web.filters.urlrewrite.UrlRewriteFilter.doFilter(UrlRewriteFilter.java:389)
at com.liferay.portal.servlet.filters.urlrewrite.UrlRewriteFilter.processFilter(UrlRewriteFilter.java:65)
at com.liferay.portal.kernel.servlet.BaseFilter.doFilter(BaseFilter.java:49)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDoFilter(InvokerFilterChain.java:215)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDirectCallFilter(InvokerFilterChain.java:175)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:99)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDirectCallFilter(InvokerFilterChain.java:175)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:99)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.processDirectCallFilter(InvokerFilterChain.java:196)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(InvokerFilterChain.java:99)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilter.doFilter(InvokerFilter.java:104)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:200)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:490)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:834)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1415)
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:748)
Caused by: javax.servlet.ServletException: java.lang.NullPointerException
at org.apache.jasper.runtime.PageContextImpl.doHandlePageException(PageContextImpl.java:950)
at org.apache.jasper.runtime.PageContextImpl.handlePageException(PageContextImpl.java:885)
at com.liferay.taglib.servlet.PageContextWrapper.handlePageException(PageContextWrapper.java:173)
at org.apache.jsp.view_jsp._jspService(view_jsp:192)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:111)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:411)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:473)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:377)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at com.liferay.portal.osgi.web.servlet.jsp.compiler.internal.JspServlet.service(JspServlet.java:373)
at com.liferay.portal.osgi.web.servlet.jsp.compiler.internal.JspServlet.service(JspServlet.java:385)
at org.eclipse.equinox.http.servlet.internal.registration.EndpointRegistration.service(EndpointRegistration.java:153)
at org.eclipse.equinox.http.servlet.internal.servlet.ResponseStateHandler.processRequest(ResponseStateHandler.java:62)
at org.eclipse.equinox.http.servlet.internal.context.DispatchTargets.doDispatch(DispatchTargets.java:120)
at org.eclipse.equinox.http.servlet.internal.servlet.RequestDispatcherAdaptor.include(RequestDispatcherAdaptor.java:48)
at com.liferay.portlet.internal.PortletRequestDispatcherImpl.dispatch(PortletRequestDispatcherImpl.java:291)
... 181 more
Caused by: java.lang.NullPointerException
at com.liferay.frontend.taglib.react.servlet.taglib.ComponentTag.getModule(ComponentTag.java:90)
at com.liferay.frontend.taglib.react.servlet.taglib.ComponentTag.doEndTag(ComponentTag.java:49)
at org.apache.jsp.view_jsp._jspService(view_jsp:180)
... 194 more
2020-03-10 15:09:50.547 ERROR [http-nio-8080-exec-3][render_portlet_jsp:131] null
java.lang.NullPointerException
at com.liferay.frontend.taglib.react.servlet.taglib.ComponentTag.getModule(ComponentTag.java:90)
at com.liferay.frontend.taglib.react.servlet.taglib.ComponentTag.doEndTag(ComponentTag.java:49)
at org.apache.jsp.view_jsp._jspService(view_jsp:180)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:111)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:411)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:473)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:377)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at com.liferay.portal.osgi.web.servlet.jsp.compiler.internal.JspServlet.service(JspServlet.java:373)
at com.liferay.portal.osgi.web.servlet.jsp.compiler.internal.JspServlet.service(JspServlet.java:385)
at org.eclipse.equinox.http.servlet.internal.registration.EndpointRegistration.service(EndpointRegistration.java:153)
at org.eclipse.equinox.http.servlet.internal.servlet.ResponseStateHandler.processRequest(ResponseStateHandler.java:62)
at org.eclipse.equinox.http.servlet.internal.context.DispatchTargets.doDispatch(DispatchTargets.java:120)
at org.eclipse.equinox.http.servlet.internal.servlet.RequestDispatcherAdaptor.include(RequestDispatcherAdaptor.java:48)
at com.liferay.portlet.internal.PortletRequestDispatcherImpl.dispatch(PortletRequestDispatcherImpl.java:291)
at com.liferay.portlet.internal.PortletRequestDispatcherImpl.include(PortletRequestDispatcherImpl.java:123)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.include(MVCPortlet.java:572)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.include(MVCPortlet.java:588)
at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.doView(MVCPortlet.java:176)
Ivan Zaera, modified 4 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
The NPE usually happens when there's something wrong with the bundling. Most of the times it is due to a missing package.json inside the META-INF/resources folder of the JAR. But without seeing the setup it is difficult to tell.
Hope that helps.
Hope that helps.
rahul bhonsale, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 7 Join Date: 5/25/20 Recent Posts
please take a look at my post tagged to you down below about liferay-npm-scripts and npmbundlerrc
Erik Strauß, modified 4 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 10 Join Date: 5/6/18 Recent Posts
I unzipped the jar file and there was no package.json available. Why should it be in there?
The portlet is a standard MVC portlet from the Blade CLI. I took the init.jsp and view.jsp and added only the react:component taglib and my React JS classes.
My workspace is also a standard workspace which I have created with blade ("blade init" or similar)
Which files would still be important for the error? Thanks!
The portlet is a standard MVC portlet from the Blade CLI. I took the init.jsp and view.jsp and added only the react:component taglib and my React JS classes.
My workspace is also a standard workspace which I have created with blade ("blade init" or similar)
Which files would still be important for the error? Thanks!
rahul bhonsale, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 7 Join Date: 5/25/20 Recent Posts
Im having the same issue. i have a very simple mvc portlet using maven. no npmbundlerrc.
I run npm install but when i deploy the module, he doesnt include the node_modules in the target folder--package.json
Whats missing here ?
EDIT:
Ive added this line to the bnd.bnd which resolves the NPE error but now the brower throws "missing module" errors.
I run npm install but when i deploy the module, he doesnt include the node_modules in the target folder--package.json
{
"dependencies": {
"react": "16.12.0"
},
"name": "reactlet",
"scripts": {
"build": "liferay-npm-scripts build",
"checkFormat": "liferay-npm-scripts check",
"format": "liferay-npm-scripts fix"
},
"version": "1.0.0"
}
<div>
<%
Map<string, object> data = new HashMap<>();
data.put("color", colorScheme);
%>
<[b]react[/b][b]:component
[/b][b] [/b]data="<%=data%>"
module="js/index.es"
servletContext="<%=application%>" />
</string,></div>import React, {useState} from 'react';
function App() {
return (
<div classname="App">
<h1> WOW IM FROM REACT! </h1>
</div>
);
}
export default App;Whats missing here ?
EDIT:
Ive added this line to the bnd.bnd which resolves the NPE error but now the brower throws "missing module" errors.
-includeresource: META-INF/resources=node_modules/, META-INF/resources/=package.jsonAttachments:
Gregory Hurrell, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 2 Join Date: 2/27/19 Recent Posts
<p>I can't see an obvious explanation for what's wrong there, but I'm coming more from the React side and less from the Portal/Maven side. Would it be possible to reduce this to an absolute minimum repro case (with very clear instructions to replicate the exact steps that you are taking and all of the details of your enviroment) that you could stick in a Git repo somewhere to take a look? It's possible that somebody who knows more about this than me and has experience with carrying out the task that you are trying to perform would be able to provide some pointers just based on what you've posted here, but I personally don't know.</p>
rahul bhonsale, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 7 Join Date: 5/25/20 Recent Posts
Ive created a repo with the portlet code.
All help will be greatly appreciated!!!https://github.com/rahulahoop/liferay-react-component-portlet
Thanks in advance^^
All help will be greatly appreciated!!!https://github.com/rahulahoop/liferay-react-component-portlet
Thanks in advance^^
rahul bhonsale, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 7 Join Date: 5/25/20 Recent Posts
I have a working solution right now, i will post my solution soon.
a couple questions tho:
1. Must i name my js files with es.js ? is there a way to not use es ?
2. it seems that liferay-npm-scripts isnt adding the translated js file to the jar, i have to explicitly include it in the bnd file. Is there npmbundlerrc config for this ?
currently mine looks like this
@Ivan Zaera
a couple questions tho:
1. Must i name my js files with es.js ? is there a way to not use es ?
2. it seems that liferay-npm-scripts isnt adding the translated js file to the jar, i have to explicitly include it in the bnd file. Is there npmbundlerrc config for this ?
currently mine looks like this
[code]{
"output": "target/classes/META-INF/resources",
".babelrc": {
"presets": ["liferay-standard"]
}
}@Ivan Zaera
rahul bhonsale, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 7 Join Date: 5/25/20 Recent Posts
found out theres a syntax error when its rendering the react code. it looks like, its putting the react code outside the liferay loader.. Its calling syntax error on the import statement
Liferay.Loader.define('frontend-js-metal-web@4.0.2/bridge/metal-dom/src/all/dom', ['module', 'frontend-js-metal-web$metal-dom/lib/all/dom'], function (module, src) {
module.exports = src;
});
Liferay.Loader.define("portal-template-react-renderer-impl@4.0.2/render.es", ['module', 'exports', 'require', 'frontend-js-react-web'], function (module, exports, require) {
var define = undefined;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = _default;
var _frontendJsReactWeb = require("frontend-js-react-web");
/**
* Copyright (c) 2000-present Liferay, Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or modify it under
* the terms of the GNU Lesser General Public License as published by the Free
* Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*/
function _default(renderFunction, renderData, placeholderId) {
var element = document.getElementById(placeholderId);
if (element) {
(0, _frontendJsReactWeb.render)(renderFunction, renderData, element.parentElement);
}
}
//# sourceMappingURL=render.es.js.map
});
//# sourceMappingURL=render.es.js.map
import React from 'react'; // browser fails here
function App() {
console.log("HI FROM REACT");
return (
<div classname="App">
<h1> WOW IM FROM REACT! </h1>
</div>
);
}
export default App;
rahul bhonsale, modified 3 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 7 Join Date: 5/25/20 Recent Posts
If anyone is using maven, I have built a working Portlet for 7.3.1 and posted it in this repository:https://github.com/rahulahoop/liferay-react-component-portlet
HTH!
HTH!
Marc Endtricht, modified 2 Years ago.
RE: LR 7.3 - React Portlet: Invalid hook call
New Member Posts: 3 Join Date: 11/2/20 Recent PostsI successfully build the portlet from rahul on 7.4 (as a gradle project).
I created a component called CustomButton and called it with the <react:component> tag.
import React from 'react';
import ClayButton from '@clayui/button';
const CustomButton = () => {
return (
<ClayButton
displayType='primary'
>
Test
</ClayButton>
);
}
export default CustomButton;
So far so good. Once i add a hook like useState, for example:
const CustomButton = () => {
const [name, setName] = React.useState('test');
...
the original problem still exists. The browser console tells me:
Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message
My package.json looks like this:
{
"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"
}
EDIT:
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