adobe / aem-project-archetype

Maven template to create best-practice websites on AEM.
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetype/overview.html
Apache License 2.0
544 stars 418 forks source link

Adobe I/O SSR (React) action does not work #1093

Open roele opened 1 year ago

roele commented 1 year ago

After creating a new AEM project, the SSR (React) build does not work on Adobe I/O after deployment via npm run deploy-ssr-ioruntime.

Locally the Adobe I/O SSR build also does not work unless a debugger is attached. I assume this is because code is proxied from the actual src folder and dependencies can be resolved properly in this case.

Expected Behaviour

Activation for the SSR action on Adobe I/O is successful and returns the rendered HTML.

Actual Behaviour

SSR Rendering does not work and following warning is shown in the error.log

22.06.2023 11:24:30.095 *WARN* [[0:0:0:0:0:0:0:1] [1687425868769] GET /content/wknd-spa-react/us/en/home.html HTTP/1.1] com.adobe.cq.remote.content.renderer.impl.servlet.RemoteContentRendererRequestHandlerServlet Remote error: code = 400 and message = {_  "code": "QueNTNEWFEurukDJiHCtb8DX3IcEUSxP",_  "error": "Response is not valid 'message/http'."_}

The activations on Adobe I/O show the following type of errors.

{
  "result": {
    "error": "Initialization has failed due to: Error: Cannot find module '/nodejsAction/TMmhc0Rf'\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)\n    at Function.Module._load (internal/modules/cjs/loader.js:562:25)\n    at Module.require (internal/modules/cjs/loader.js:692:17)\n    at require (internal/modules/cjs/helpers.js:25:18)\n    at eval (eval at <anonymous> (/nodejsAction/services/runner.js:76:49), <anonymous>:1:1)\n    at /nodejsAction/services/runner.js:76:49"
  },
  "size": 506,
  "status": "application error",
  "success": false
}

Reproduce Scenario (including but not limited to)

  1. Create a new project via aem-project-archetype with frontendModule=react, enableSSR=y
  2. Follow the WKND SPA (with SSR) Tutorial
  3. Setup an Adobe I/O Project with various workspaces and configure AIO environment variables
  4. Deploy application to AEM (via mvn) and Adobe I/O (via aio)
  5. Trigger SSR by opening http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Platform and Version

AEM Archetype Version 42 macOS Ventura 13.4 Node v16.20.1 NPM 8.19.4

Logs taken while reproducing problem

After npm run start-ssr-ioruntime the dist folder has the following structure.

 dist
├──  app.js
├──  app.js.map
├──  application
│  └──  actions
│     ├──  ssr-temp -> ~/aem-guides-wknd-spa.react.ssr/ui.frontend/dist/application/actions/wknd-spa-react-0.1.0/ssr-temp
│     ├──  ssr.zip -> ~/aem-guides-wknd-spa.react.ssr/ui.frontend/dist/application/actions/wknd-spa-react-0.1.0/ssr.zip
│     └──  wknd-spa-react-0.1.0
│        ├──  ssr-temp
│        │  ├──  index.85e18686cff29326ff33.js
│        │  └──  index.js
│        │     └──  app
│        │        └──  app.js
│        └──  ssr.zip
└──  last-built-actions.json
roele commented 1 year ago

A fix for this known issue seems to be underway. As a workound the following was recommended by support which seems to do the trick.

a. delete the node modules folder by running rm -rf node_modules b. delete package.lock.json file by running rm -f package-lock.json c. clean up the NPM cache by running npm cache clean --force d. install all packages again by running npm install e. rename ./actions/common -> ./actions/zcommon, adapt manifest.yml, ./actions/ssr/index.js, ./script/postWebhook.js