AEM Remote SPA Page Error Granite.js

[ayush_agarwal]

Hi Everyone, 

I am trying out AEM + React Integration and to achieve so, I created a page in AEM using Remote Page template. When I open the page in editor mode, I don't see anything rendering on the page (Not even the layout container). On inspecting the console, I see that there is an error --> ReferenceError: Granite is not defined. PFA the same. JS is getting called from remotepage component as below. <sly data-sly-call="${clientLib.js @ categories='cq.authoring.pagemodel.messaging'}"></sly>. Any pointers on this so that I can move forward ?

[Aditya_Chabuku]

Hi @ayush_agarwal ,

I think there are missing references for the Granite library missing, but this should not be happening in general because Granite is an AEM Global Library.

So, I suggest trying adding granite Dependency manually & see if this problem persists. here is give steps to do so.

Step 1:  You cannot include Granite Library Directly as you might be using React as FE. So, go to the client library generator i.e; aem-clientlib-generator  

Step 2: Find the clientlib.config.js file

Step 3:  Locate where dependencies are mentioned, I gave an example here.

// Config for `aem-clientlib-generator`
module.exports = {
  context: BUILD_DIR,
  clientLibRoot: CLIENTLIB_DIR,
  libs: [
    {
      ...libsBaseConfig,
      name: 'micro-frontend',
      categories: ['sourcedcode.micro-frontend'],
      dependencies: ['granite.utils'],

If you want to load Granite on your page directly, try this.

<script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/utils.js"></script>

Hope this helps,

Aditya Ch.

[Ritesh_Mittal]

Hi @ayush_agarwal ,

You need check if there is any custom/OOTB client library which is breaking and causing this issue. May be try removing and adding client libraries. Also, check if there are any conflicting or redundant libraries.

Thanks,

Ritesh

[Anudeep_Garnepudi · Accepted solution]

@ayush_agarwal 

In your JS you are using Granite library(Granite.author), this library will be included from AEM edit framework and it will be only available in author/edit mode. In publish or disable mode it wont be available and not recommended to use any edit client libs in publish mode.

1. If you want your JS to be executed in author mode then use OOTB category to our clientlib and don't include in HTL
2. If you want it to be eecutetd in publish/disabled, include in HTL but remove Granite.author from your JS.