Issues with registry value using npm start

[om327]

Hi, I'm trying to follow the tutorial for creating an excel plugin - I seem to hit the same issue each time when trying to run the example using the command npm start.

PS C:\Users\SVL\Desktop\tradebe-excel-plugin\My Office Add-in> npm start

> office-addin-taskpane-js@0.0.1 start     
> office-addin-debugging start manifest.xml

Debugging is being started...
App type: desktop
Enabled debugging for add-in 232b2e4e-d5c0-487e-bc60-e3f4e2d63e3b.
Starting the dev server... (webpack serve --mode development)
Unable to start the dev server. Error: The dev server is not running on port 3000.
Sideloading the Office Add-in...
Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in.
Error: Unable to set registry value "232b2e4e-d5c0-487e-bc60-e3f4e2d63e3b" to "C:\Users\SVL\Desktop\tradebe-excel-plugin\My Office Add-in\manifest.xml" (REG_SZ) for key ""HKCU\SOFTWARE\Microsoft\Office\16.0\Wef\Developer"".
ProcessUncleanExitError: ADD command exited with code 1:

ERROR: Invalid syntax.
Type "REG ADD /?" for usage.

Node version v20.9.0
Microsoft® Excel® for Microsoft 365 MSO (Version 2310 Build 16.0.16924.20054) 64-bit

It looks like its a permissions issue - I've tried running vs code as administrator but I'm still having the same issue.

Its a little confusing as there is another microsoft excel-plugin repository that uses a different approch - npm http-server

https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/hello-world/excel-hello-world

Following the examples in this repository and using the following works:

http-server -S -C localhost.crt -K localhost.key 
--cors . -p 3000 

Copying over the .crt and .key files and trying to use this server instead of npm start for this directory doesn't seem to work?

Any help would be fantastic.

Many thanks,
Ollie

[AlexJerabek]

Hi @om327,

Just curious, did you run npm install in your add-in directory before running npm start. Sometimes yo office encounters an issue and can't run that automatically.

[om327]

Hi @AlexJerabek ,

Thanks for getting back to me, I tried starting from scratch - watching the terminal after using the cmd yo office it looks like it tries to run npm install but produces some errors.

npm WARN deprecated debuglog@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno -4077
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in: C:\Users\SVL\AppData\Local\npm-cache\_logs\2023-11-09T21_34_25_584Z-debug-0.log
----------------------------------------------------------------------------------------------------------

      Congratulations! Your add-in has been created! Your next steps:

      1. Go the directory where your project was created:

         cd C:\Users\SVL\Desktop\yoman

      2. Start the local web server and sideload the add-in:

         npm start

      3. Open the project in VS Code:

         code .

         For more information, visit http://code.visualstudio.com.

      Please visit https://learn.microsoft.com/office/dev/add-ins for more information about Office Add-ins.

----------------------------------------------------------------------------------------------------------

It looks like yoman isn't compatable with newer versions of node > 18 since running npm install again produces the following:

C:\Users\SVL\Desktop\yoman>npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@azure/msal-node@1.18.4',
npm WARN EBADENGINE   required: { node: '10 || 12 || 14 || 16 || 18' },
npm WARN EBADENGINE   current: { node: 'v20.9.0', npm: '10.1.0' }
npm WARN EBADENGINE }
npm WARN deprecated @azure/msal-browser@2.38.3: A newer major version of this library is available. Please upgrade to the latest available version.

added 153 packages, removed 177 packages, changed 254 packages, and audited 1334 packages in 2m

170 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Then when trying to run the server I get the following:

C:\Users\SVL\Desktop\yoman>npm start

> office-addin-taskpane-js@0.0.1 start
> office-addin-debugging start manifest.xml

node:internal/modules/cjs/loader:1051
  throw err;
  ^

Error: Cannot find module './XMLWriterBase'
Require stack:
- C:\Users\SVL\Desktop\yoman\node_modules\xmlbuilder\lib\XMLStringWriter.js
- C:\Users\SVL\Desktop\yoman\node_modules\xmlbuilder\lib\XMLDocument.js
- C:\Users\SVL\Desktop\yoman\node_modules\xmlbuilder\lib\index.js
- C:\Users\SVL\Desktop\yoman\node_modules\xml2js\lib\builder.js
- C:\Users\SVL\Desktop\yoman\node_modules\xml2js\lib\xml2js.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-manifest\lib\manifestHandler\manifestHandlerXml.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-manifest\lib\manifestOperations.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-manifest\lib\main.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-dev-settings\lib\appcontainer.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-dev-settings\lib\main.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-debugging\lib\commands.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-debugging\lib\cli.js
- C:\Users\SVL\Desktop\yoman\node_modules\office-addin-debugging\cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at Module.patchedRequire [as require] (C:\Users\SVL\Desktop\yoman\node_modules\diagnostic-channel\dist\src\patchRequire.js:14:46)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (C:\Users\SVL\Desktop\yoman\node_modules\xmlbuilder\lib\XMLStringWriter.js:7:19)
    at Object.<anonymous> (C:\Users\SVL\Desktop\yoman\node_modules\xmlbuilder\lib\XMLStringWriter.js:35:4)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\xmlbuilder\\lib\\XMLStringWriter.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\xmlbuilder\\lib\\XMLDocument.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\xmlbuilder\\lib\\index.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\xml2js\\lib\\builder.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\xml2js\\lib\\xml2js.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-manifest\\lib\\manifestHandler\\manifestHandlerXml.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-manifest\\lib\\manifestOperations.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-manifest\\lib\\main.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-dev-settings\\lib\\appcontainer.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-dev-settings\\lib\\main.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-debugging\\lib\\commands.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-debugging\\lib\\cli.js',
    'C:\\Users\\SVL\\Desktop\\yoman\\node_modules\\office-addin-debugging\\cli.js'
  ]
}

Node.js v20.9.0

I'll try uninstalling v20 and install v18 and try again

[Rick-Kirkham]

@om327 Also, does the package.json in your project have an "engines" property that looks something like the following?

"engines": {
"node": ">=16 <19",
"npm": ">=7 <10"
},

[om327]

nope

{
  "name": "office-addin-taskpane-js",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
  },
  "license": "MIT",
  "config": {
    "app_to_debug": "excel",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  },
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "dev-server": "webpack serve --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "core-js": "^3.9.1",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.12.11",
    "@types/office-js": "^1.0.256",
    "@types/office-runtime": "^1.0.23",
    "acorn": "^8.5.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "eslint-plugin-office-addins": "^2.1.5",
    "file-loader": "^6.2.0",
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    "office-addin-cli": "^1.5.5",
    "office-addin-debugging": "^5.0.12",
    "office-addin-dev-certs": "^1.11.3",
    "office-addin-lint": "^2.2.5",
    "office-addin-manifest": "^1.12.3",
    "office-addin-prettier-config": "^1.2.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "source-map-loader": "^3.0.0",
    "webpack": "^5.76.3",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "4.13.1"
  },
  "prettier": "office-addin-prettier-config",
  "browserslist": [
    "ie 11"
  ]
}

[om327]

Definately a version compatability issue - the plugin works with v18.12.0 but there are warnings about potential valnerbilities since this is an older distribution

npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated debuglog@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

changed 1204 packages, and audited 1205 packages in 2m

101 packages are looking for funding
  run `npm fund` for details

15 vulnerabilities (5 moderate, 10 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Will the pacakge be updated to work with v20 LTS or is it better to use the npm http-server package as in the other tutorials?