search

adobe / aem-sample-we-retail-journal

We.Retail Journal is a sample showcasing SPA Editing capabilities in AEM using React and Angular
Apache License 2.0
70 stars 69 forks source link

Implement SSR in my own AEM SPA project #47

Closed nick-khoury closed 5 years ago

nick-khoury commented 5 years ago

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

> react-app@0.0.0 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! react-app@0.0.0 start:server: `node --inspect src/server/bootstrap.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-app@0.0.0 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

nick-khoury commented 5 years ago

resolved by installing this npm package https://github.com/babel/babel-preset-env and adding 'env' to presets in src/server/bootstrap.js