adobe / aem-sample-we-retail-journal

We.Retail Journal is a sample showcasing SPA Editing capabilities in AEM using React and Angular

We.Retail Journal Single Page Applications

Contains We.Retail Journal SPAs for authoring on AEM.

Branching model

The current repository follows the Gitflow Workflow branching model design.

Go to the master branch to access the latest public state of the project.

Modules

This project contains:

• content: Content Structure including /apps components and client libraries as well the /content specific sites and pages. The client library will be generated while building the SPAs.
• react-app: We.Retail Journal React application.

Usage of online fonts

The application is using online Fonts included via Typekit.

You would either need a network connection or have the fonts installed on your computer:

• Proxima Nova Regular
• Bagatela Light

Build

The project has the following minimal requirements:

• Java SE Development Kit 8 or newer
• Apache Maven 3.3.1 or newer

Build all modules

To build all the modules run in the project root directory the following command with Maven 3:

mvn clean install

Module build order

The react-app module builds and transpiles the es6 javascript source code into a browser friendly 2015 version. It then creates a client library and copy the built javascript files in the content module. Run your Maven command lines from the root of the project to respect the module build ordering and ensure the latest version of the react-app module is used.

For ease of build and installation the following profiles are provided:

• autoInstallPackage - installs the package/bundle to an existing AEM author instance
• autoInstallPackagePublish - installs the package/bundle to an existing AEM publish instance
• autoInstallSinglePackage - package all the dependencies into a single content package and install everything to an existing AEM author instance
• autoInstallSinglePackagePublish - package all the dependencies into a single content package and install everything to an existing AEM publish instance

UberJar

This project relies on the unobfuscated AEM 6.3 cq-quickstart. This is publicly available on https://repo.adobe.com

For more details about the UberJar please head over to the How to Build AEM Projects using Apache Maven documentation page.

Install everything

You can install everything needed to use the components on your running AEM instance by issuing the following command in the top level folder of the project:

mvn clean install -PautoInstallSinglePackage

You can also choose build environment by using setting build.environment property (format: colon + name):

mvn clean install -PautoInstallSinglePackage -Dbuild.environment=":production"

Available environments:

• empty string (default): non-production / development
• production: production

Install local version of NPM sub-modules

You can install local version of the NPM modules @adobe/cq-spa-page-model-manager and @adobe/cq-spa-component-mapping by changing a few lines in the react-app module's POM. By default, the released versions of those modules are transitively installed by @adobe/cq-react-editable-components but it is possible to override this and install local development versions instead.

First, build and link the local NPM modules you want to use by running (for instance, in your local checkout of @adobe/cq-spa-page-model-manager):

npm run build && npm link

Then use the npmLinkDeps profile when installing the project's bundles and packages such as:

mvn clean install -PautoInstallPackage,npmLinkDeps

Individual packages/bundles

You can install individual packages/bundles by issuing the following command in the top level folder of the project:

mvn clean install -PautoInstallPackage -pl <project_name(s)> -am

Please note that

• -pl/-projects option specifies the list of projects that you want to install
• -am/-also-make options specifies that dependencies should also be built

Guidelines for SPA development in AEM

Developing single page applications on AEM assumes that the front-end developer observes standard best practices when creating an SPA. If as a front end developer you follow these general best practices as well as few AEM-specific principles, your SPA will be functional with AEM and its content-authoring capabilities.

• Portability - As with any components, the components should be built to be as portable as possible. The SPA should be built with portable and reusable components.
• AEM Drives Site Structure - The front end developer creates components and owns their internal structure, but relies on AEM to define the content structure of the site.
• Dynamic Rendering - All rendering should be dynamic.
• Dynamic Routing - The SPA is responsible for the routing and AEM listens to it and fetches based on it. Any routing should be dynamic as well.

If you keep these principles in mind as you develop your SPA, it will be as flexible and as future proof as possible while enabling all supported AEM authoring functionality.

For further details about SPA development on AEM including guideliens, walkthroughs, best practices and examples, see the AEM Developer Documentation.

aem-sample-we-retail-journal's Issues

Support Server-side rendering requests for Template page paths

Support for Remote Content Rendering has been added in upcoming AEM 6.5SP1.

With this all SPA pages (content pages and template pages) as well can be rendered server-side.

So, we should update React and Angular Server code to also support Get and Post Requests for Template page paths.

403 error with CustomModelClient

I've done the following:

• Installed AEM locally using AEM_6.5_Quickstart.jar (success).
• Started the app (success).
• Ensured that CORS support is enabled as per the documentation (success).
• mvn clean install -PautoInstallSinglePackage in the package root (success)

Issue: React app on localhost:9000 is just a black page, and the request to retrieve the model.json fails.

403 error on model client initialization:

class CustomModelClient extends ModelClient {
  /**
   * Fetches a model using the given a resource path
   *
   * @param {string} modelPath - Path to the model
   * @return {*}
   */
  fetch(modelPath) {
    if (!modelPath) {
      return Promise.reject(
        new Error(`Fetching model rejected for path: ${modelPath}`)
      )
    }

    const url = `${process.env.API_HOST}${modelPath}`

    // Either the API host has been provided or we make an absolute request relative to the current host
    return fetch(url, {
      headers: {
        Authorization: `Basic ${Buffer.from("admin:admin").toString("base64")}`
      }
    }).then(function(response) {
      if (response.status >= 200 && response.status < 300) {
        return response.json()
      } else {
        const error = new Error(
          `while fetching the model for url: ${url}`,
          response.statusText || response.status
        )
        error.response = response

        return Promise.reject(error)
      }
    })
  }
}

Any ideas?

Cannot serve request to /libs/wcm/core/content/pageinfo.json in com.day.cq.wcm.core.impl.servlets.PageInfoServlet

Cannot serve request to /libs/wcm/core/content/pageinfo.json in com.day.cq.wcm.core.impl.servlets.PageInfoServlet

I am getting 404 for pageInfo.json request and page is in preview mode, not able to click any links or buttons and change to different mode as "FullScreenMask" css from aem code applied.

Env: AEM 6.3.3 , AEM 6.5.1 - this seems to be issue with one page at this time.

Support AEM 6.2

Is it possible to support AEM 6.2 (6.1, 6.0)? At the moment, I can integrate Angular component using custom component. However, I want not only integrate Angular page but also entire Angular app. I tried to downgrade project to AEM 6.2 but it did not work.

Could you someone help me on this? I would appreciate.

Thanks.

PKIX path building failed when using SSR by https

Hi,
Everything is fine when I using SSR via http, but when I use SSR with HTTPS I get an error of SSLHandshakeException:

javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target at sun.security.ssl.Alerts.getSSLException(Alerts.java:192)

I have tried to install my CER in Truststore via http://localhost:4502/libs/granite/security/content/truststore.html
But the error still occurs.

MapTo - @adobe/cq-react-editable-components

Hello,

MapTo HOC wraps an additional 'div' around the component. We have a use case where Carousel is author-able component and card as another author-able component. Because an additional 'div' is wrapped for both of the components, the layout is breaking.

Is there a way we can toggle on/off the 'div'?

Below is how the structure looks

<div><Carousel><div><Card></Card><div></div></div></Carousel><div></div></div>

How to cover code for weather.js or Text.js which are not exported

I tried writing test cases for Other files in the repository, getting below warning/error.

_

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

_

An example would be helpful.

[AEM 6.4 + SP2] - Jackson Dependency Issue

AEM version: AEM 6.4.2

The Core bundle relies on a dependency on com.fasterxm.jackson.* version 2.9.7.

Unfortunately com.fasterxm.jackson 2.8.4 has a security vulnerability, see http://www.cvedetails.com/vulnerability-list.php?vendor_id=15866&product_id=42991&version_id=237509&page=1&hasexp=0&opdos=0&opec=0&opov=0&opcsrf=0&opgpriv=0&opsqli=0&opxss=0&opdirt=0&opmemc=0&ophttprs=0&opbyp=0&opfileinc=0&opginf=0&cvssscoremin=0&cvssscoremax=0&year=0&month=0&cweid=0&order=1&trc=3&sha=1e493f7b77ddee795faddfb91c709c2c5272cb4c. This should be addressed in AEM 6.4 upcoming SP (which will be SP4)

However, on AEM 6.4 + SP2 the dependency included is 2.8.4.
This causes the bundle to fail to start

Unfortunately com.fasterxm.jackson 2.8.4 has a security vulnerability, see http://www.cvedetails.com/vulnerability-list.php?vendor_id=15866&product_id=42991&version_id=237509&page=1&hasexp=0&opdos=0&opec=0&opov=0&opcsrf=0&opgpriv=0&opsqli=0&opxss=0&opdirt=0&opmemc=0&ophttprs=0&opbyp=0&opfileinc=0&opginf=0&cvssscoremin=0&cvssscoremax=0&year=0&month=0&cweid=0&order=1&trc=3&sha=1e493f7b77ddee795faddfb91c709c2c5272cb4c.
This should be addressed in AEM 6.4 upcoming SP (which will be SP4)

Getting window is not defined on my own project

Hello everyone! I'm trying to apply this to my own project and I'm having the following error when I try to run my node server

C:\Projects\amc-demo\development\react-app\node_modules\u2f-api-polyfill\u2f-api-polyfill.js:14
  if ('u2f' in window || !('chrome' in window)) {
               ^

ReferenceError: window is not defined
    at C:\Projects\amc-demo\development\react-app\node_modules\u2f-api-polyfill\u2f-api-polyfill.js:14:16
    at Object.<anonymous> (C:\Projects\amc-demo\development\react-app\node_modules\u2f-api-polyfill\u2f-api-polyfill.js:753:3)
    at Module._compile (internal/modules/cjs/loader.js:868:30)
    at Module._compile (C:\Projects\amc-demo\development\react-app\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:879:10)
    at Object.newLoader [as .js] (C:\Projects\amc-demo\development\react-app\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:731:32)
    at Function.Module._load (internal/modules/cjs/loader.js:644:12)
    at Module.require (internal/modules/cjs/loader.js:771:19)
    at require (internal/modules/cjs/helpers.js:68:18)

I read that I can't use window object with server side rendering but I can't find anything on the net to fix this.. so I hope you can help me.

Development mode React - Code fails in ModelClient while navigating to http://localhost:9000/content/we-retail-journal/react/home.html

Code fails in ModelClient
while navigating to http://localhost:9000/content/we-retail-journal/react/home.html

`fetch(modelPath) {

    if (!modelPath) {
        let err = 'Fetching model rejected for path: ' + modelPath;
        return Promise.reject(new Error(err));
    }

    // Either the API host has been provided or we make an absolute request relative to the current host
    let url = `${this._apiHost}${modelPath}`;

    return fetch(url, FETCH_CONFIG).then(function(response) {
        if (response.status >= 200 && response.status < 300) {
            **return response.json();**
        } else {
            let error = new Error('while fetching the model for url: ' + url, response.statusText || response.status);
            error.response = response;

            return Promise.reject(error);
        }
    });
}`

we get an object instead of model.json
and model.json request gets delayed then page dosn't load.

Any Ideas.

Add CircleCI configuration

SSR functionality is not working

Hi guys,

I tried to implement Server side rendering the React SPA in our project by following the documentation as mentioned below but didn't find it is working.

I was able to start the nodejs server fine on 4200 and configured the path in servlet config as well.

But I tried to hit the localhost:4200/path/to/page, I am getting back response like,

Can someone please advice if I am missing something here,

<div><div class="aem-page page "><div><div class="aem-container aem-Grid aem-Grid--12 aem-Grid--default--12"><div class=" aem-GridColumn aem-GridColumn--default--12"><div class="aem-container aem-Grid aem-Grid--12 aem-Grid--default--12 main-grid"></div><div></div></div></div><div></div></div></div><div></div></div>
        <script type="application/json" id="__INITIAL_STATE__">
            {"rootModel":{"title":"Home ",":type":"components/structure/page",":items":{"root":{"columnCount":12,"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","columnClassNames":{"footer":"aem-GridColumn aem-GridColumn--default--12","header":"aem-GridColumn aem-GridColumn--default--12","backtotop":"aem-GridColumn aem-GridColumn--default--12","beta-alert":"aem-GridColumn aem-GridColumn--default--12","responsivegrid":"aem-GridColumn aem-GridColumn--default--12"},"allowedComponents":{"applicable":false,"components":[{"path":"/conf/airmiles/settings/wcm/templates/page-template/structure/jcr:content/root/wcm/foundation/components/responsivegrid","title":"Layout Container"},

..........
...........
        </script>

Here is the documentation I followed,

In order to get the server side rendering to work run the following commands

npm run build

then 

API_HOST=http://localhost:4502 npm run start:server

This will open a server on port 4200 so you can navigate to http://localhost:4200/content/we-retail-journal/react/home.html to see the running example

## Enabling the Server-Side Rendering using the AEM page component
In order to have a page component rendered Server-Side via AEM and the page component HTL template, 
navigate to the page component [0] and modify the template to request the _GetPreRenderedPageBody_ service to fetch the SPA HTML content from a remote node server. 
In the current sample project, the node server runs locally via the `npm run start:server` command line.

### SSR Setup

0. Modify the page component HTL template [a,b]
1. Start the local NODE.js server [c]
2. Request the page from your browser
3. Using a web browser, navigate to one of the pages of the app

a. Location of the page component HTL body template

../content/jcr_root/apps/we-retail-journal/react/components/structure/page/body.html

b. Expected content of the page component HTL body template

```

c. Command to start the local node server

API_HOST=http://localhost:4502 APP_ROOT_PATH=/content/we-retail-journal/react npm run start:server

Configuring the GetPreRenderedPageBody service

1. Navigate to http://localhost:4502/system/console/configMgr
2. Search for the configuration called Single Page Applications - Server Side Rendering Configuration
3. Open the dialog and update the default values

App doesn't work on IE 11

We know that react doesn't support IE11 , but I hope AEM SPA developers didn't completely exclude IE11 from it's support matrix.

http://localhost:4502/editor.html/content/we-retail-journal/react/en/home.html

doesn't work with the error -

SCRIPT438: Object doesn't support property or method 'endsWith'

Adding import 'react-app-polyfill/ie11';
import 'core-js'; in App/index.js also doesn't solve the issue.

Please let us know how to enable SPA app and SPA authoring on IE11

Upgrade to Angular 7+

Hi,

I've succefully upgraded the angular app to version 7.1.3.
I want to create a PR for that, but it seems I need rights on the repo for that.

Are you interested in this PR?

Unable to edit components after copy-paste within layout container

Steps to reproduce:

1. Set up an instance of AEM 6.4 with Service Pack 3 and We.Retail Journal installed.
2. Navigate to:/editor.html/content/we-retail-journal/react/en/home.html
3. Make a copy of any component and paste it within the container. Do not reload the page.

Expected behavior:
newly created component appears with authoring controls.

Actual behavior:
newly created component appears without any ability to toggle controls.

Frontend app build fails

Expected Behaviour

Frontend app (react-app) is build succesfully

Actual Behaviour

Build fails with message:
5566 verbose stack HttpErrorGeneral: 401 Unauthorized - GET https://adobe.trust-adobe.console.banyanops.com/v2/auth?client_id=ePcIQuesF41DxqDK3gTuUw&nonce=JtBFMVFzRCD6Bb5zHPXy8&redirect_uri=https%3A%2F%2Fartifactory.corp.adobe.com%2Fbnn_trust_cb&response_type=code&scope=openid+profile+email&state=2mwxAFIgzyuuU6fBLPnoME
5566 verbose stack at C:\Users\xxx\AppData\Roaming\npm\node_modules\npm\node_modules\npm-registry-fetch\check-response.js:95:15
5566 verbose stack at processTicksAndRejections (internal/process/task_queues.js:95:5)
5567 verbose statusCode 401
5568 verbose pkgid http-parser-js@https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-aem-release/http-parser-js/-/http-parser-js-0.4.13.tgz?dl=https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.13.tgz
5569 verbose cwd D:\Work\xxx\aem-sample-we-retail-journal\react-app
5570 verbose Windows_NT 10.0.19041
5571 verbose argv "D:\Programs\nodejs\node.exe" "C:\Users\xxx\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
5572 verbose node v14.18.0
5573 verbose npm v7.24.1
5574 error code E401
5575 error 401 Unauthorized - GET https://adobe.trust-adobe.console.banyanops.com/v2/auth?client_id=ePcIQuesF41DxqDK3gTuUw&nonce=JtBFMVFzRCD6Bb5zHPXy8&redirect_uri=https%3A%2F%2Fartifactory.corp.adobe.com%2Fbnn_trust_cb&response_type=code&scope=openid+profile+email&state=2mwxAFIgzyuuU6fBLPnoME
5576 verbose exit 1

Steps to Reproduce

1. Navigate to /aem-sample-we-retail-journal/react-app
2. Execue npm install

Migrate from internal repository

Vue.js support

Hi,

Thank you for this cool demo project to show how SPAs can work within AEM.

We at a specilized adobe sites company would like to make it work with vue.js and contribute a 'cq-vue-editable-components'. Plus the integration in the we retail journal demo.

Are you interested in that contribution and can you help us on the way in terms of guidelines?

Many thanks,
Kris.

How to pass parameters in URL

How to pass parameters in url ? like https://reacttraining.com/react-router/web/example/url-params

Project doesn't build with Java 11

Looks like same as adobe/aem-core-wcm-components#491

[ERROR] Errors:
[ERROR] PageImplTest.testConfigChildPage:213 » NoClassDefFound javax/annotation/PostCo...
[ERROR] PageImplTest.testRequestFilteredNestedChildPages:235 » NoClassDefFound javax/a...

apixu weather forecast end point is broken

Hello,

The weather forecast call http://api.apixu.com/v1/forecast.json?key=29956e2dd75344d2894215728182003&days=5&q=Basel is failing. Opening it in a new tab reveals the following
{
"0": "#################################################################################################################################",
"1": "# #",
"2": "# IMPORTANT - PLEASE UPDATE YOUR API ENDPOINT #",
"3": "# #",
"4": "# This API endpoint is deprecated and has now been shut down. To keep using the apixu API, please update your integration #",
"5": "# to use the new weatherstack API endpoint, designed as a simple drop-in replacement. #",
"6": "# You will be required to create an account at https://weatherstack.com and obtain an API access key. #",
"7": "# #",
"8": "# For more information on how to upgrade please visit our Github Tutorial at: https://github.com/apilayer/weatherstack#readme #",
"9": "# #",
"a": "#################################################################################################################################"
}

not able to edit the template and set policy

I am following this hello world tutorial
https://helpx.adobe.com/experience-manager/kt/sites/using/spa-editor-helloworld-tutorial-use.html#putting-together

but I am not able to edit the policy as specified in step 4-

Select the main Layout Container and select the Policy icon to open its policy:

After saving, you should see the HelloWorld component as an allowed component in the Layout Container.

It is mentioned int he tutorial that -

In the latest version of the SPA Editor, Editable templates can be used in the same way as with traditional Sites implementations. This will be revisited later with our custom component.

Also mentioned in the wknd SPA editor tutorial https://helpx.adobe.com/au/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/react/chapter-0.html

that

With the initial release of the SPA Editor the UI for Editable Templates cannot be used. This is expected to be updated in the next release of the SPA Editor.

I am on AEM 6.4.4(service pack 4) on AEM 6.4 beta jar

but still not able to edit the template to set its policy.

Is this expected behaviour?

Should I edit the editable template for SPA by manually making changes in crx-de as described in

https://helpx.adobe.com/au/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/react/chapter-0.html

In order to update features of the template, developers will need to do this manually via CRXDE-Lite or in the XML in the ui.content project.

request you to please let me know. Will appreciate it. Thanks.

SSR for experience fragments

Hi there,

We tried the SSR implementation for React SPA in AEM and it is working great on our project, we are no longer making .model.json XHR calls for the particular page. Thanks for resolving this issue #82 👍

But we see some issue when using experience fragments within the page. We are still making those .model.json calls for each experience fragment we use on the page.

Are we missing any configuration for experience fragments? Is there any way we could suffice this behaviour?

Update to latest Core Components & 6.4 UberJAR

• UberJAR should be 6.4.2
• Use latest Core Components release (2.4.0)

Add Build Status

Get a build status from CircleCI in the README

OSGi dependency failure com.adobe.cq.export.json.hierarchy,version=[1.0,2)   

AEM 6.4 with SP2.
Cloned the project and checked out development branch.

Ran mvn clean install -P autoInstallPackage.

We.Retail Journal Corecom.adobe.cq.sample.spa.we-retail-journal-core and We.Retail Journal Server Side Rendering com.adobe.cq.sample.spa.we-retail-journal-ssr bundles show as installed but not active.

We retail journal core shows imported packages resolution problem, com.adobe.cq.export.json.hierarchy,version=[1.0,2) -- Cannot be resolved.

npm module dependency vulnerabilities with Karma and Protractor

Karma and Protractor must be upgraded to get rid of reported vulnerabilities

Angular tests make Cloud Manager pipeline fail

If I remove the line "test": "ng test --watch=false", from package.json in angular-app then it works. Wondering if there is another way to do this that would work.

Cloud Manager pipeline stops with

[ERROR] npm ERR! errno 1
[ERROR] npm ERR! [email protected] test: `ng test --watch=false`
[ERROR] npm ERR! Exit status 1
[ERROR] npm ERR! 
[ERROR] npm ERR! Failed at the [email protected] test script.
[ERROR] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Use Java 11 in CI

We are currently using circleci/openjdk:8-jdk-node-browsers in our build.
We should switch to Java 11, to prevent from issues like #40 in future

cc @keepthebyte

Update project to use Core Components 2.3.2

At the time of writing, this project uses Core Components 2.2.2. Update the project to use Core Components 2.3.2

Meaning of AppPage

Hi,

I noticed that in your example, the page will be load only if the AppPage component is loaded within the ImportComponents, why?

https://github.com/adobe/aem-sample-we-retail-journal/blob/master/react-app/src/components/Page.js

we-retail-journal-content- package contains nodes to store in /apps

the we-retail-journal-content- package shall not have any node that is stored in /apps. currently the package contains /apps nodes - they need to be in an apps package. In CI/CD pipeline deployment use-cases /apps is read-only.

javax.net.ssl.SSLHandshakeException: Remote host closed connection during handshake

Receiving the above error when trying to access a page from localhost:4502

AEM REACT multifield Component.

hey,

I am trying to create Multifield Authorable Component in React AEM, but I am not able to create it I am trying to Use Slingmodel but not getting any results from it.

I had gone through the documentation but not able to figure out about multifield component in react.

please help!

Dynamic routing in Angular

Hi,
It doesn't seem possible to implement dynamic routing in Angular as it's done in React.

Looking at the code in app-routing.module.ts, the Routes array is completely static, whereas in React routes are built dynamically from the Page.js component through the withRoute function that exploits the React tag to dynamically add the route.

Since routing in Angular works in a totally different way, if it is indeed possible to have dynamic routes in Angular as in React, could you please provide a working example?

Thanks in advance.

React app does not load on publish instance due to HierarchyPageImpl

When there is no access to /conf folder ( and hence the page policy) to anonymous user on publish instance, then content attribute is empty as it gets populated via HierarchyPageImpl and code is not able to access conf folder

<meta property="cq:pagemodel_root_url"/>

so to fetch the model json it accesses the current page's model

 

But when anonymous user has access to 'conf' folder, then it is populated

<meta property="cq:pagemodel_root_url" content="/content/mysite/en.model.json"/>  

and now there are two calls to for model.json

because of these two calls nothing gets loaded in the app. I know the call is originated by page model manager, but the app should load in case of two calls as well, or the page specific call should not be initiated when rootmodel url is populated.

For now I removed the content attribute in rootmodel meta tag altogether, please let me know the better and appropriate solution.

Add Code Coverage plugin

Implement SSR in my own AEM SPA project

Hi, I am trying to use server side rendering as done in this aem-sample-we-retail-journal repo and am having a problem starting the server. My project is freshly created with the aem-spa-project-archetype, and I ejected the react-app to have control over all the npm packages and settings. I can build and publish the project and run the local react server as expected.

My problem started after I copied src/server/bootstap.js and src/server/index.js into my new project and updated all of the paths and references, and proceeded to run src/server/bootstrap.js, at which point I get the error pasted below.

I'm not sure what to do and don't have a lot of experience configuring AEM SPA projects or server side rendering. As far as I can tell, the babel-register import in src/server/bootstrap.js has its own node_modules and is using its own version of babel-core, which conflicts with the version used in the root node_modules. Is there any simple solution that I don't know about? Any help will be much appreciated!

System:
AEM 6.5.0
Apache Maven 3.6.0
Maven home: C:\apache-maven-3.6.0\bin..
Java version: 1.8.0_202, vendor: Oracle Corporation, runtime: C:\Program Files\Java\jdk1.8.0_202\jre
Default locale: en_US, platform encoding: Cp1252
OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"

nick@Win10 MINGW64 ~/Desktop/git/REPO/AEM/react-app (users/nick/new_mvn_project)
$ NODE_ENV=development REACT_APP_API_HOST=http://localhost:4502 REACT_APP_ROOT_PATH=/content/ocm/en npm run start:server

> [email protected] start:server C:\Users\nick\Desktop\git\REPO\AEM\react-app
> node --inspect src/server/bootstrap.js

Debugger listening on ws://127.0.0.1:9229/f26384fe-2d20-4e55-83fc-b34097b5252c
For help, see: https://nodejs.org/en/docs/inspector
C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:328
        throw e;
        ^

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "C:\\Users\\nick\\Desktop\\git\\REPO\\AEM\\react-app\\node_modules\\babel-preset-react-app\\index.js")
    at throwVersionError (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at api (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\@babel\plugin-transform-flow-strip-types\lib\index.js:41:7)
    at C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at Function.memoisePluginContainer (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:113:13)
    at Function.normalisePlugin (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:32)
    at C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
    at OptionManager.mergeOptions (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
    at C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
    at C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at compile (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\lib\node.js:103:45)
    at loader (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\lib\node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\nick\Desktop\git\REPO\AEM\react-app\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:server: `node --inspect src/server/bootstrap.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nick\AppData\Roaming\npm-cache\_logs\2019-04-30T21_02_04_738Z-debug.log

nick@Win10 MINGW64 ~/Desktop/git/REPO/AEM/react-app (users/nick/new_mvn_project)
$

@godanny86

Injecting currentPage using annotations does not return the correct page

None of these annotations when used in a sling model in this project -

 @Inject @Source("script-bindings")
    Page currentPage;

or

@ScriptVariable
    private Page currentPage;

or

@Inject
    private Page currentPage;

return the correct currentPage -
these always return the last created page. Not sure what's the reason behind this -

Using resourcePage works;

@Inject
    private Page resourcePage;

but it will not be helpful in the cases where the component is locked in the structure of the template, and hence is not inside the jcr:content of the page, in those cases resourcePage returns the template's path as the component(say header) is inside the template.

Could someone please look into this as this is a major issue and once should be able to inject OOTB sling binding variables.

Dependency on [email protected]

There is a dependency on Event-stream 3.3.6, but this has removed from NPM because some malicious code which attempts to steal cryptocurrency wallets have been injected.

dominictarr/event-stream#116 (comment)

Workaround is to downgrade the dependency in package-lock.json to 3.3.4