Tech Mastery: Deep Dives into AEM, Cloud Technologies, AI Innovations, and Advanced Marketing Strate

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';

ReactDOM.render(

<React.StrictMode>

<HelmetProvider>

<App />

</HelmetProvider>

</React.StrictMode>,

document.getElementById('root')

);

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 (

<React.Fragment>

<Helmet>

<title>Test</title>

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

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

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

</Helmet>

<Introduction />

<Details />

<BackToTop />

</React.Fragment>

);

};

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!!!

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.

In some cases, we may have the use case to share the i18n dictionaries externally.

There are a couple of options to share the dictionaries externally.

ResourceBundleExportServlet:

By default the dictionaries are exposed using the ResourceBundleExportServlet (com.adobe.granite.i18n.impl.ResourceBundleExportServlet) registered under path /libs/cq/i18n/dict.

e.g

http://localhost:4502/libs/cq/i18n/dict.de_de.json
http://localhost:4502/libs/cq/i18n/dict.de.json
http://localhost:4502/libs/cq/i18n/dict.fr_fr.json

The ResourceBundleExportServlet collects all the dictionaries defined in the AEM system for a particular language and(or) country and exposes them as JSON.

By default, the /libs path is blocked from Dispatcher; the dictionary path should be allowed to access externally. The challenge with this approach is all the available dictionaries are exported as part of the JSON response but will not be able to export the selected dictionaries.

Client library JSON:

Another option is to share the i18n JSON as a client library resource e.g

http://localhost:4502/etc.clientlibs/project/clientlibs/clientlib-site/resources/i18n/de.json

Define the i18n dictionary as a json under the /apps folder(ui.apps) and copy the i18n from /apps(ui.apps) to corresponding clientlibs resource folder through Front End build script.

Custom servlet with sling:basename:

Another approach is defining a custom servlet combined with sling:basename for the dictionary to share the specific dictionary values externally.

As a first step, enable the sling:basename for the all language nodes( mix:language node), e.g., sling:basename=search, and the sling:basename will be used to select the specific dictionary. You can define i18n dictionary-specific sling:basename’s(e.g., search,search1, etc.), so those particular dictionaries can be selected by specifying the sling:basename. Ensure the jcr:primaryType of the language node is sling:Folder, the nt:Folder won't support adding sling:basename property.

Now enable a custom servlet(refer below), the path is defined based on the sling:basename enabled e.g./bin/fetchi18nvalues/search, you can specify multiple paths to support different sling:basename.

The language can be added as a selector to the URL; the language selector is validated against the predefined list of languages.

e.g

http://localhost:4502/bin/fetchi18nvalues/search.it.json
http://localhost:4502/bin/fetchi18nvalues/search.bg.json
http://localhost:4502/bin/fetchi18nvalues/search1.it.json
http://localhost:4502/bin/fetchi18nvalues/search1.bg.json

The servlet selects the i18n dictionary based on the sling:basename on the request path and the language selector and shares the data as JSON.

The custom servlet shares only the specific dictionary/languages tagged with the same sling:basename; the servlet can be customized to add additional functionalities.

Tech Mastery: Deep Dives into AEM, Cloud Technologies, AI Innovations, and Advanced Marketing Strate

Pages

Wednesday, May 18, 2022

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

Tuesday, May 10, 2022

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

ResourceBundleExportServlet:

Client library JSON:

Custom servlet with sling:basename: