Does anyone have any working examples of an AEM project structure that leverages AEM's SPA editor with Redux to manage global state between components? If someone can provide me an example I can probably reverse engineer it to figure out what is wrong with my project...
I've initialised a project structure following the AEM archetype with the frontend module set to React. I've setup Redux in the usual manner wrapping my <App> component within index.jsx in the <Provider> from react-redux passing in the store. Everything works fine when I run my app using the local dev server or when I "View as Published" from AEM author. I do however seem to get the following error when viewing a page that references an AEM component mapped to a React Component that calls the useDispatch() hook. Shared.js seems to be some Granite related script.
Views
Replies
Total Likes
The error message Uncaught TypeError: Cannot read properties of undefined (reading 'setParameter')
suggests that the setParameter
function is not defined when your React component is mounted. This could happen for a few reasons:
setParameter
function is defined in a different module and is not being imported correctly.setParameter
function is defined in a global scope, but is not available to your React component because it is running in a different context.setParameter
function is defined in a Granite-related script, but is not being loaded correctly.To troubleshoot this error, you can try the following:
setParameter
function is imported correctly into your React component.setParameter
function in the same module as your React component.setParameter
function before your React component is mounted.Here are some additional tips for using Redux with AEM's SPA editor:
Views
Replies
Total Likes