Wednesday, May 18, 2022

Uncaught TypeError: Cannot read properties of undefined (reading 'add') - React Helmet

 I was getting the below error while using the react-helmet to dynamically change the head section - meta tags, title etc, also the pages were not loading.

scheduler.development.js:171 Uncaught TypeError: Cannot read properties of undefined (reading 'add')

    at e.r.init (Dispatcher.js:53:1)

    at e.r.render (Dispatcher.js:67:1)

    at finishClassComponent (react-dom.development.js:17485:1)

    at updateClassComponent (react-dom.development.js:17435:1)

    at beginWork (react-dom.development.js:19073:1)

    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)

    at invokeGuardedCallback (react-dom.development.js:4056:1)

    at beginWork$1 (react-dom.development.js:23964:1)

    at performUnitOfWork (react-dom.development.js:22776:1)

    at workLoopSync (react-dom.development.js:22707:1)

    at renderRootSync (react-dom.development.js:22670:1)

    at performSyncWorkOnRoot (react-dom.development.js:22293:1)

    at react-dom.development.js:11327:1

    at unstable_runWithPriority (scheduler.development.js:468:1)

    at runWithPriority$1 (react-dom.development.js:11276:1)

    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)

    at workLoop (scheduler.development.js:417:1)

    at flushWork (scheduler.development.js:390:1)

    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)

To fix the issue

Replaced react-helmet with  react-helmet-async

npm install react-helmet-async or yarn add react-helmet-async

Wrap the App element with HelmetProvider

import { HelmetProvider } from 'react-helmet-async';




    <App />





Now the helmet can be used in individual components to change the dynamic header elements

import { Helmet } from 'react-helmet';

import {  Test   } from './components';

const Test = () => {

  return (




<meta name="description" content="Test Description" />

<meta property="og:title" content="Test"/>

<meta property="og:description" content="Test" />


  <Introduction />

  <Details />

  <BackToTop />




export default Test;

After this, I saw the behavior, non of the existing meta tags defined in index.html apart from the title, replaced with the new values. To fix that, I added data-rh="true" to the metatags in index.html that require the change.

<meta property="og:title" content="default value" data-rh="true" />

Somehow data-react-helmet=" true"  property was not working.

Happy Coding!!!

Tuesday, May 10, 2022

How to Share Selected i18n Dictionaries in JSON Format — AEM(Adobe Experience Manager)

 The AEM internationalization framework(i18n) uses dictionaries in the repository to store English strings and their translations in other languages. The framework uses English as the default language. Localized strings can be stored in several dictionaries in the repository, e.g., component level. The AEM internationalization framework combines the dictionaries and makes them available in Sling as a single ResourceBundle object. The i18n can be used in slightly, JavaScript, and Java to display the language-specific labels and values.



Client library JSON:

Custom servlet with sling:basename:


Friday, May 6, 2022

How to limit the number of components in Container Components?

 In this post, let us see the approaches to limit the components in container components; in some cases, we may have the use case to limit the number of child components allowed to be added into the container due to the business rules.

Option1 — Limit through FE logic:

Option2 — Limit through Edit Config Listeners and Back End Servlet:

function(childEditable) {var path = childEditable.path;
var date = new Date();
var servletURL = '/bin/ComponentLimiterSevlet?' + date.getTime();
var requestData = 'componentPath=' + path;
async: false,
type: 'GET',
url: servletURL,
dataType: 'text',
data: requestData,
success: function(returnData) {
if (returnData == 'false') {
var cmp = childEditable.getParent();
showErrorAlert('Cannot drop more component, if you want to add more, please set the Max component allowed bigger.', 'Error');
function showErrorAlert(message, title) {
var fui = $(window).adaptTo("foundation-ui"),
options = [{
text: "OK",
warning: true
message = message || "Unknown Error";
title = title || "Error";
fui.prompt(title, message, "error", options);
import;import javax.jcr.Node;
import javax.jcr.NodeIterator;
import javax.jcr.Session;
import javax.servlet.Servlet;
import javax.servlet.ServletException;
import org.apache.jackrabbit.commons.JcrUtils;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.propertytypes.ServiceDescription;
@Component(service = { Servlet.class })
@ServiceDescription("Component Limitor Servlet")
public class ComponentLimitorServlet extends SlingSafeMethodsServlet {
private static final long serialVersionUID = 1L;
private String responseMsg = "true";
protected void doGet(final SlingHttpServletRequest req, final SlingHttpServletResponse resp)
throws ServletException, IOException {
try {
String currentComponentPath = req.getParameter("componentPath");
String resourcePath = currentComponentPath.substring(0, currentComponentPath.lastIndexOf("/"));
ResourceResolver resolver = req.getResourceResolver();Node resourceNode = JcrUtils.getNodeIfExists(resourcePath, resolver.adaptTo(Session.class));if (resourceNode != null) {
int maxComponents = 1;
ContentPolicyManager policyManager = resolver.adaptTo(ContentPolicyManager.class);if (policyManager != null) {
ContentPolicy contentPolicy = policyManager.getPolicy(resolver.getResource(resourcePath));
if (contentPolicy != null && contentPolicy.getProperties().containsKey("maxComponents")) {
maxComponents = Integer
.parseInt(contentPolicy.getProperties().get("maxComponents", String.class));
int toalComponentCount = 0;
NodeIterator iterator = resourceNode.getNodes();
while (iterator.hasNext()) {;
if (toalComponentCount > maxComponents) {
// Gets currently inserted node
Node currentComponentNode = JcrUtils.getNodeIfExists(currentComponentPath,
responseMsg = "false";
} else {
responseMsg = "true";
} catch (Exception e) {
responseMsg = "true";

Friday, April 29, 2022

Setup Magento PWA Studio in Windows

 The Magento PWA Studio project is a set of developer tools that allow for developing, deploying, and maintaining a PWA storefront on top of Magento 2.3 and above. It uses modern tools and libraries to create a build system and framework that adheres to the Magento principle of extensibility.

In my earlier post explained how to set up the latest Magento open-source platform on the windows system — refer to for more details.

In this post, let us see how to set up Magento PWA Studio local and enable the venia demo store by integrating with the Magento backend server.

Setup PWA Studio Project:

As a first step, clone to your local system.

git clone

Check the version compatibility between PWA studio and Magento backend -

PWA studio version 12.4.0 is compatible with the 2.4.4 Magento version(current latest version I have installed)

Check out the compatible PWA studio version, and run the below command from your pwa-studio root folder(this folder got created while cloning the PWA Studio repository).

git checkout v12.4.0

The PWA Studio is not entirely compatible with the windows systems; I am using WSL2(Windows Sub System for Linux 2) on windows to install the PWA Studio. Refer to for more details on setting WSL2 on the windows system.

Ensure Node 10.x version is installed ( I had version v14.15.4)

Install Yarn —you can install through npm quickly npm install --global yarn

Now, cd to the pwa-studio folder through WSL and execute the below command.

yarn install

Once the installation is completed, enable the below properties into the packages/venia-concept/.env file.

MAGENTO_BACKEND_URL= (I have enabled custom domain for accessing Magento backend)
MAGENTO_BACKEND_EDITION=MOS (Backend type MOS - Magento opensource, AC - Adobe Commerce)

The CHECKOUT_BRAINTREE_TOKEN can be created by signing up at

Login to, and click on Settings →API.

Generate New Tokenization Key

Generate SSL Certificate:

Generate SSL certificate because PWA features require an HTTPS Secure Domain.

From the root directory of PWA (/pwa-studio), run the below command through WSL:


Execute the below command pwa-studio root folder

yarn buildpack create-custom-origin packages/venia-concept

The certificate is stored in /usr/local/share/ca-certificates/devcert.crt, delete the crt file and re-execute if it fails.

Host Entry for Magento backend URL:

In my previous blog, I pointed the Magento domain( to; this will create issues while PWA Studio running on WSL tries to access the Magento backend from the Windows system.

Modify the windows host file( C:\Windows\System32\drivers\etc\hosts) to point the backend domain to the IP address of the windows machine;

Configure Metapackage on Magento Backend :

PWA Studio uses metapackages to extend Magento Open Source backends with new features and sample data. PWA Studio release 12.1.0 or higher requires the Open Source metapackage to be installed into PWA projects — even if your backend is Adobe Commerce.

To install metapackages, follow the below steps (refer to for more details) — I am executing all these commands through the windows command prompt as my Magento server installed in windows system.

Clone the magento2-pwa repository into your vendor directory

Cd to Magento vendor folder e.g C:\xampp\htdocs\magento\vendor

Execute git clone ext/magento/magento2-pwa

Now cd to Magento root folder, e.g., C:\xampp\htdocs\magento, and execute the below commands

#Install PWA extensioncomposer config minimum-stability dev
composer config repositories.ext path “C:/xampp/htdocs/magento/vendor/ext/*/*/*”
composer require magento/pwa
#Enable Required Modulesphp bin/magento module:enable Magento_NewsletterGraphQlPwa
php bin/magento module:enable Magento_EavGraphQlAux
php bin/magento module:enable Magento_CatalogGraphQlAux
php bin/magento module:enable Magento_WeeeGraphQlAux
php bin/magento module:enable Magento_ContactGraphQlPwa
php bin/magento module:enable Magento_QuoteGraphQlPwa
php bin/magento module:enable Magento_ReCaptchaGraphQlPwa
php bin/magento module:enable Magento_ReCaptchaPwa
#Upgradephp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

UPWARD JS Path Configuration:

An UPWARD server sits between a PWA Studio storefront and its resources, such as an Adobe Commerce or Magento Open Source application.

Under pwa-studio, packages/venia-concept/.env file configure the upward js path as dist/upward.yml


if the configuration is not enabled, You may see a broken site experience and the below error message in the browser console.

[GraphQL error]: Message: Error: Context value ‘veniaResponse’ not defined in {
status: ‘veniaResponse.status’,
headers: ‘veniaResponse.headers’,
body: ‘veniaResponse.body’

Build Project:

As a next step build the project, execute the below command from the pwa-studio root folder through WSL

yarn run build

Configure Payment Method in Magento:

Log in to the Magento admin console, e.g.,

Navigate to Stores →Configuration →Sales →Payment Methods →Braintree

Click on Configure

Select —

Environment as Sandbox

Payment Action as Authorize

Copy the Sandbox Merchant Id, public key, and private key from API settings.

After enabling all the configurations, click on Validate Credentials to ensure the details are valid.

Sample card details to test the payment

Visa: 4111 1111 1111 1111For expiry dates, use a valid month and a day within the next 180 years. 22/2222 does not work!

Start the Project:

execute the below command from the pwa-studio root folder through WSL

yarn run watch:venia

Now the storefront is started through the custom domain.

The domain will not be accessible by default from the windows system. To make it work, add the below host entry into the windows system(C:\Windows\System32\drivers\etc\hosts) for the test domain created e.g magento-venia-concept-hn8s4.local.pwadev

Now the storefront is accessible through the test domain, e.g., https://magento-venia-concept-hn8s4.local.pwadev:8152/.

Add a product to the cart and perform the checkout.

You can use the graphql paly ground enabled as part of the project, e.g., https://magento-venia-concept-hn8s4.local.pwadev:8152/graphiql, to test the graphql queries.

The PWA Studio can be run even though docker-compose; let us see the details on using docker-compose to run the PWA Studio in the windows system.