sinnerschrader
AEM React integration
When I am trying to build maven project using the command "mvn archetype:generate
-DarchetypeGroupId=com.sinnerschrader.aem.react
-DarchetypeArtifactId=aem-project-archetype
-DarchetypeVersion=10.2 " I am getting below error: how to proceed?
aemreact ........................................... SUCCESS [ 0.178 s]
[INFO] aemreact - Core .................................... SUCCESS [ 1.492 s]
[INFO] aemreact - UI apps ................................. FAILURE [ 0.192 s]
[INFO] aemreact - UI content .............................. SKIPPED
[INFO] aemreact - Integration Tests Bundles ............... SKIPPED
[INFO] aemreact - Integration Tests Launcher .............. SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 2.545 s
[INFO] Finished at: 2017-04-07T12:22:25-05:00
[INFO] Final Memory: 23M/406M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.codehaus.mojo:exec-maven-plugin:1.4.0:exec (npm install) on project aemreact.ui.apps: Command execution failed. Cannot run program "npm" (in directory "/Users/rkadiyal/Desktop/aem-react/aemreact/ui.apps/src/main/ts"): error=2, No such file or directory -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException
[ERROR]
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR] mvn
After commenting out npm part in pom, build is success, but I get the below exception: com.sinnerschrader.aem.react.exception,version=[0.3,1) -- Cannot be resolved com.sinnerschrader.aem.react.repo,version=[0.3,1) -- Cannot be resolved how to proceed?
npm and node should be downloaded and installed for you by this maven plugin. Please check why that doesn't work for you. Please also upgrade the the dependency to aem-react in core/pom.xml to the latest version (currently 0.4.2). Additionally upgrade the aem-react-js version in ui.apps/src/main/ts/package.json to the latest version (0.4.2).
I have the latest version 0.4.2, when i excuted mvn install -PautoinstallPackage, it succes but the bundle core not started i have this error: com.sinnerschrader.aem.react.exception,version=[0.4,1) -- Cannot be resolved com.sinnerschrader.aem.react.repo,version=[0.4,1) -- Cannot be resolved
How can proceed?
Are you using the archetype or the demo? Probably you need to update the pom.xml
I used the archetype. actually, i resolved this issue but now, react Compoenent not shown. I have this error in logs:
17.11.2017 12:20:33.957 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/panel, superType=null, path=/content/bgl/en/jcr:content/par/panel_121309358 17.11.2017 12:20:33.958 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/text, superType=null, path=/content/bgl/en/jcr:content/par/text_6525240 17.11.2017 12:20:33.959 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/panel, superType=null, path=/content/bgl/en/jcr:content/par/panel_2083802270 17.11.2017 12:20:33.969 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/text, superType=null, path=/content/bgl/en/jcr:content/par/text_1374279744 17.11.2017 12:20:33.969 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/panel, superType=null, path=/content/bgl/en/jcr:content/par/panel 17.11.2017 12:20:33.970 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/text, superType=null, path=/content/bgl/en/jcr:content/par/text_145402345 17.11.2017 12:20:33.971 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/panel, superType=null, path=/content/bgl/en/jcr:content/par/panel_85858135 17.11.2017 12:20:33.972 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/panel, superType=null, path=/content/bgl/en/jcr:content/par/panel_25281301 17.11.2017 12:20:33.973 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/panel, superType=null, path=/content/bgl/en/jcr:content/par/panel_417565309 17.11.2017 12:20:33.974 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/my-component, superType=null, path=/content/bgl/en/jcr:content/par/my_component 17.11.2017 12:20:33.974 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/my-component, superType=null, path=/content/bgl/en/jcr:content/par/my_component_1278410565 17.11.2017 12:20:33.976 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/react-parsys, superType=null, path=/content/bgl/en/jcr:content/par/react_parsys 17.11.2017 12:20:33.977 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/react-parsys, superType=null, path=/content/bgl/en/jcr:content/par/react_parsys_368632518 17.11.2017 12:20:33.978 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/text, superType=null, path=/content/bgl/en/jcr:content/par/text_2085032478 17.11.2017 12:20:33.978 ERROR [0:0:0:0:0:0:0:1 [1510917633913] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/text, superType=null, path=/content/bgl/en/jcr:content/par/text_1117894702
Usually this means, that ReactScriptEngineFactory (OSGI service) is not running
Thank you, i resolved the probleme. but i have usaully, ERROR in ./componentRegistry.tsx (10,45): error TS2345: Argument of type '{ component: typeof Panel; parsysPath: string; depth: number; }' is not assignable to parameter of type 'ComponentConfi g'. Object literal may only specify known properties, and 'parsysPath' does not ex ist in type 'ComponentConfig'.
Which version of typingscript should i use?
@stemey I set up everything as specified in the document. I did using maven archetype. I see the ServiceProxy module is missing in aem-react-js. Is there anything I am missing. Below are the errors I see.
ERROR in ./demoComponent.tsx (2,26): error TS2307: Cannot find module 'aem-react-js/ServiceProxy'.
ERROR in /Users/narnandh/source-code/react-spa-demo/ui.apps/src/main/ts/server.tsx (20,32): error TS2346: Supplied parameters do not match any signature of call target.
ERROR in ./client.tsx (14,28): error TS2346: Supplied parameters do not match any signature of call target.
Any idea would be really appreciated.
@stemey never mind. I was too impatient. I found it in aem-react-js/di directory.
@stemey I think I am ready for the some real questions now. I am new to this entire React with AEM, So please bear with me. I am trying to pull the helloworld Model message value to the hello world component without having sightly code inside it. As sightly code is presenting it directly onto browser, I would like to have React component to do that. But I see nothing when I do that. So not sure, if sightly code is required to present the content onto browser. From what I understand is, we use sling models for presentation and react component to render the same onto page(browser). Correct me if I am wrong here. Below are the errors I see finally.
Browser Console:
Uncaught ReferenceError: Cqx is not defined
at new Container (Container.js:14)
at Object.
And in npm run watch ERROR in /Users/narnandh/source-code/react-spa-demo/ui.apps/src/main/ts/server.tsx (20,32): error TS2346: Supplied parameters do not match any signature of call target.
ERROR in ./client.tsx (14,28): error TS2346: Supplied parameters do not match any signature of call target.
I haven't changed anything on the above two files.
Log in AEM 14.03.2018 13:41:44.573 ERROR [0:0:0:0:0:0:0:1 [1521049304401] GET /content/react-demo/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=react-demo/components/react/text, superType=null, path=/content/react-demo/en/jcr:content/par/text_1374279744 14.03.2018 13:41:44.574 ERROR [0:0:0:0:0:0:0:1 [1521049304401] GET /content/react-demo/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=react-demo/components/react/panel, superType=null, path=/content/react-demo/en/jcr:content/par/panel 14.03.2018 13:41:44.699 ERROR [0:0:0:0:0:0:0:1 [1521049304401] GET /content/react-demo/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=react-demo/components/react/demoComponent, superType=null, path=/content/react-demo/en/jcr:content/par/democomponent_2107351374
I see the same error even with the existing react text component. I see the ReactJS bundle configuration looks fine as per documentation. So not sure if I am missing something here.
Any help would be really appreciated.
I think it is a bug in archetype. Please pass either null or Cqx to the Container constructor.
Look here: https://github.com/sinnerschrader/aem-react-js/blob/master/di/Container.tsx#L16
@stemey Thanks for the reply. I tried as you suggested above, which resolves console js error. Still I see react components are not working. I see below errors in aem error log and npm watch.
npm run watch ERROR in ./client.tsx (16,28): error TS2346: Supplied parameters do not match any signature of call target.
I tried fixing this again by passing an argument to the container constructor, but it didn't resolve the problem. Problem line in code: let container: Container = new Container();
AEM Log: 14.03.2018 13:41:44.573 ERROR [0:0:0:0:0:0:0:1 [1521049304401] GET /content/react-demo/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=react-demo/components/react/text, superType=null, path=/content/react-demo/en/jcr:content/par/text_1374279744
So the react components doesn't have any sling:resourceSuperType and AEM server is expecting them. And hence the above error. I am not sure if I missed anything. I am trying to solve this from past couple of days and still no luck.
Again any help would be appreciated.
Hey guys, same issue like in first message still appears for both archetype and demo proj. Yes, I updated package.json and pom file like documentation suggests). Prerequisites were verified also. Could someone kindly suggest how can I deal with it?
After a little digging arround I found that the reason is absence of npm executable on PC. So to fix this issue one should:
- either install npm manually (prerequisits in README file should be updated) and then npm commands in exec-maven-plugin works well
- or update the ui.apps/pom.xml with the snippet like this (which should install npm locally during build..):
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
<workingDirectory>${basedir}/src/main/ts</workingDirectory>
<installDirectory>${basedir}/src/main/ts</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v4.6.0</nodeVersion>
<npmVersion>2.15.9</npmVersion>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.6.0</version>
<executions>
<execution>
<id>npm install</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<skip>${skip-npm-install}</skip>
<workingDirectory>${basedir}/src/main/ts</workingDirectory>
<executable>${basedir}/src/main/ts/node/npm.cmd</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<execution>
<id>npm start</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<!-- TODO we need to define environment mode: product|development -->
<configuration>
<skip>${skip-npm-start}</skip>
<workingDirectory>${basedir}/src/main/ts</workingDirectory>
<executable>${basedir}/src/main/ts/node/npm.cmd</executable>
<arguments>
<argument>run</argument>
<argument>start</argument>
<argument>--env=${javascript.environment}</argument>
</arguments>
</configuration>
</execution>
</executions>
</plugin>