AEM Remote SPA Page Error Granite.js | Community
Skip to main content
A
ayush_agarwal
January 19, 2023
Solved

AEM Remote SPA Page Error Granite.js

  • January 19, 2023
  • 3 replies
  • 1814 views

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 ?

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anudeep_Garnepudi

@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.

3 replies

Aditya_Chabuku
Community Advisor
Aditya_ChabukuCommunity Advisor
Community Advisor
January 20, 2023

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.

Thanks,Aditya Chabuku
    Ritesh_Mittal
    Community Advisor and Adobe Champion
    Ritesh_MittalCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    January 20, 2023

    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
      Community Advisor
      Anudeep_GarnepudiCommunity AdvisorAccepted solution
      Community Advisor
      January 21, 2023

      @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.
        Terms & ConditionsAccessibility statement

        Loading footer...