Issue with ng theme local environment setup

[kalyan Basavaraju]

Hi All

Downloaded the Aqua Blue theme and tried to setting up development environment, unfortunately faced the following issues

Could not resolve dependency:

Later tried with the following command

npm install --legacy-peer-deps

It failed throwing up the following error

You need to install the latest version of Python.

Do we need install Python too?

Earlier help is highly appreciated

Thanks

Kalyan Kamesh

[couch]

When you install Node.js - there is a checkbox to "also install chocolatey and other 3rd party tools". 

You need to select this option to get python, ms build tools, and other components that are needed.

Also, be aware that you must use the right version of node.js for your uStore version. 

https://github.com/XMPieLab/uStore-NG/wiki/Getting-started

[kalyan Basavaraju]

thx couch my repo is failing with the following error

npm ERR! gyp ERR! UNCAUGHT EXCEPTION
npm ERR! gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
npm ERR! gyp ERR! stack     at createConfigFile (C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-gyp\lib\configure.js:117:21)
npm ERR! gyp ERR! stack     at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Applications\\react\\ng-theme-aqua-blue\\src\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-sass
npm ERR! gyp ERR! node -v v20.9.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! Node-gyp failed to build your package.
npm ERR! gyp ERR! Try to update npm and/or node-gyp and if it does not help file an issue with the package author.
npm ERR! Build failed with error code: 7

Can you please help me on this

[kalyan Basavaraju]

the detailed errors are follows

npm ERR! code 1
npm ERR! path C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Applications\\react\\ng-theme-aqua-blue\\src\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node...@7.1.2
npm ERR! gyp info using no...@20.9.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - "python3" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python" can be used
npm ERR! gyp verb find Python - executing "python" to get executable path
npm ERR! gyp verb find Python - executable path is "C:\Python312\python.exe"
npm ERR! gyp verb find Python - executing "C:\Python312\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.12.0"
npm ERR! gyp info find Python using Python version 3.12.0 found at "C:\Python312\python.exe"
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 20.9.0
npm ERR! gyp verb command install [ '20.9.0' ]
npm ERR! gyp verb install input version string "20.9.0"
npm ERR! gyp verb install installing version: 20.9.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 20.9.0
npm ERR! gyp verb build dir attempting to create "build" dir: C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-sass\build
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS checking VS2019 (16.11.34114.132) found at:
npm ERR! gyp verb find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
npm ERR! gyp verb find VS - found "Visual Studio C++ core features"
npm ERR! gyp verb find VS - found VC++ toolset: v142
npm ERR! gyp verb find VS - found Windows SDK: 10.0.19041.0
npm ERR! gyp info find VS using VS2019 (16.11.34114.132) found at:
npm ERR! gyp info find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
npm ERR! gyp info find VS run with --verbose for detailed information
npm ERR! gyp verb build/config.gypi creating config file

npm ERR! gyp ERR! UNCAUGHT EXCEPTION
npm ERR! gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
npm ERR! gyp ERR! stack     at createConfigFile (C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-gyp\lib\configure.js:117:21)
npm ERR! gyp ERR! stack     at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Applications\\react\\ng-theme-aqua-blue\\src\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Applications\react\ng-theme-aqua-blue\src\node_modules\node-sass
npm ERR! gyp ERR! node -v v20.9.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! Node-gyp failed to build your package.
npm ERR! gyp ERR! Try to update npm and/or node-gyp and if it does not help file an issue with the package author.
npm ERR! Build failed with error code: 7

[kalyan Basavaraju]

am able to solve the error

just removed the following in package.json

 "node-sass": "file:./npm_packages/node-sass-6.0.0.tgz",

and ran the  following 

npm install node-sass -g

npm install --legacy-peer-deps

and voila...no errors this time

[kalyan Basavaraju]

Can any body help me with the following error

npm start -- server=<uStoreServerUrl>

> AquaBlueW...@1.0.0 start

> cross-env DEPLOY_ENV=dev node server.js server=<uStoreServerUrl>

[HPM] Proxy created: /  ->  http://localhost:5010

[HPM] Proxy rewrite rule created: "^/ustorethemes/AquaBlueWithFooter/" ~> "/"

Defining routes from exportPathMap

node:internal/crypto/hash:68

  this[kHandle] = new _Hash(algorithm, xofLen);

                  ^

Error: error:0308010C:digital envelope routines::unsupported

    at new Hash (node:internal/crypto/hash:68:19)

    at Object.createHash (node:crypto:138:10)

    at module.exports (C:\Applications\react\ng-theme-aqua-blue\src\node_modules\next\node_modules\webpack\lib\util\createHash.js:135:53)

    at NormalModule._initBuildHash (C:\Applications\react\ng-theme-aqua-blue\src\node_modules\next\node_modules\webpack\lib\NormalModule.js:412:16)

    at C:\Applications\react\ng-theme-aqua-blue\src\node_modules\next\node_modules\webpack\lib\NormalModule.js:444:10

    at C:\Applications\react\ng-theme-aqua-blue\src\node_modules\next\node_modules\webpack\lib\NormalModule.js:320:13

    at C:\Applications\react\ng-theme-aqua-blue\src\node_modules\loader-runner\lib\LoaderRunner.js:367:11

    at C:\Applications\react\ng-theme-aqua-blue\src\node_modules\loader-runner\lib\LoaderRunner.js:233:18

    at context.callback (C:\Applications\react\ng-theme-aqua-blue\src\node_modules\loader-runner\lib\LoaderRunner.js:111:13)

    at C:\Applications\react\ng-theme-aqua-blue\src\node_modules\next\node_modules\babel-loader\lib\index.js:55:103 {

  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

  library: 'digital envelope routines',

  reason: 'unsupported',

  code: 'ERR_OSSL_EVP_UNSUPPORTED'

}

Node.js v20.9.0

[couch]

It looks like you are not changing the <uStoreServerUrl> to be your actual uStore url.

For example, my uStore hostname is win2022 - so the command for me is:  npm start -- server=http://win2022
If you continue to have problems, please log a support case with XMPie so a support agent can help you out over a video converence / teams meeting.

[kalyan Basavaraju]

oops I have intentionally not specified the URL of my server :)

well able to solve the issue

The changes made are as follows

In package.json

"start": "cross-env DEPLOY_ENV=dev node server.js " ---- Original

"start": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env DEPLOY_ENV=dev node server.js " ---- Changes made

[couch]

OK. Some React experts have just looked at the error messages you are posting and they say that it looks like you are trying to work with uStore v16.x theme and are using Node.js v20.x
If you refer back to my first comment on Nov 7th, I mentioned that you must use the right version of node.js depending on your uStore version.

If you are working with uStore v16.x please use the correct node version.

Another option you may have is to upgrade to uStore v17. I am told that v17 themes can be developed with the latest node versions, but I personally have only used node v18 with uStore v17 as per the instructions provided by XMPie at https://github.com/XMPieLab/uStore-NG/wiki/Getting-started

[kalyan Basavaraju]

Can u please let me know which line in the error indicated that am using ustore v 16.x

[couch]

I cannot because I am not an expert with react or node.

What version uStore did you download the aqua blue theme from?

[kalyan Basavaraju]

my uStore version is 16.3x

I need further help on my local environment setup

We ran the following command in our development environment

npm start -- server=http://myserver.xmpie.net

After loading the chrome browser with the following URL
http://localhost:5000/ustore?storeid=15&devmode=true&devthemename=AquaBlueWithFooter

I see that the browser is being redirected as follows
https://myserver.xmpie.net/ustorethemes/AquaBlueWithFooter/15/en-US/

I believe it should still stay as follows as per XMPIE training videos tutorial
http://localhost:5000/ustorethemes/AquaBlueWithFooter/15/en-US/

because of this behavior we are unable to test any new additions or modifications made in our development environment.
Are we missing anything?
Can you please help on this?

[SteveL]

Hi Kalyan, try replacing http://myserver.xmpie.net with the URL of your uStore server and see if that works. 

[Alexis Podevin]

Hello, I have a similar problem.
Since our uStore update, I can no longer modify a theme in my development environment.

node -v 18.18.2
npm -v 10.5.0

Installing npm is error-free.
when I do :
npm start -- server http://XXXXX.X

it compiles correctly and my localhost:500 launches correctly.

But once I enter my URL in a browser I am redirected to a :
http://localhost:5000/uStore/ShowMessage.aspx?ErrorCode=2&StoreId=143

can you help me?

Kind Regards,