Expected double-quoted property name in JSON

[SebCanet]

Hi, I've just installed appmap as VSCode extension to test it, but id oes not launch on my web TS + nodeJS app. When typing 'npx appmap-node npm run dev' here are my logs:

(Λ) Running with appmap-node version 2.16.0
(Λ) Using config file F:\Logiciels\Arduino_graphique\µcBlockly\appmap.yml
undefined:17
  },
  ^

SyntaxError: Expected double-quoted property name in JSON at position 322 (line 17 column 3)
    at JSON.parse (<anonymous>)
    at tsConfigTsNodeEsmIsTrue (C:\Users\Administrator\AppData\Local\npm-cache\_npx\c76987c9a3c183fa\node_modules\appmap-node\dist\bin.js:93:31)
    at isTsEsmLoaderNeeded (C:\Users\Administrator\AppData\Local\npm-cache\_npx\c76987c9a3c183fa\node_modules\appmap-node\dist\bin.js:103:50)
    at Object.main (C:\Users\Administrator\AppData\Local\npm-cache\_npx\c76987c9a3c183fa\node_modules\appmap-node\dist\bin.js:40:9)
    at Object.<anonymous> (C:\Users\Administrator\AppData\Local\npm-cache\_npx\c76987c9a3c183fa\node_modules\appmap-node\bin\appmap-node.js:4:27)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)

Thanks a lot for your help.

[dividedmind]

Hello! It seems that there's a syntax error in your tsconfig.json — ts is much more lax in what it accepts than a standards-compliant JSON parser is. Can you share your tsconfig here? I suspect there's some minor detail that could be easily fixed: my guess is double-quoting keys, for example

{
  "foo": "bar"
}

instead of

{
  foo: "bar"
}

[SebCanet]

It's what I thought but I cannot find the pb, here's my file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "declaration": true,
    "declarationMap": true,
    "module": "ES2015",
    "moduleResolution": "node",
    "outDir": "build",
    "paths": {
        "*": ["types/*"]
    },
    "strict": true,
    "target": "ES2015",
    "types": [
      "node"
    ],
  },
  "typedocOptions": {
      "entryPoints": ["src/index.ts"],
      "out": "./docs"
  }
}

Thanks.

[dividedmind]

I believe it's the trailing comma

{
  "compilerOptions": {
    "baseUrl": "./",
    "declaration": true,
    "declarationMap": true,
    "module": "ES2015",
    "moduleResolution": "node",
    "outDir": "build",
    "paths": {
        "*": ["types/*"]
    },
    "strict": true,
    "target": "ES2015",
    "types": [
      "node"
    ], // <-- here
  },
  "typedocOptions": {
      "entryPoints": ["src/index.ts"],
      "out": "./docs"
  }
}

[SebCanet]

Yes, that was just this *$@ comma....thanks. I just launched with "npx appmap-node npm run dev" ("npm run dev") is my run command, but it repeats without launching anything: Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch and so on... Thanks.

[dividedmind]

Yes, that was just this *$@ comma....thanks. I just launched with "npx appmap-node npm run dev" ("npm run dev") is my run command, but it repeats without launching anything: Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch Watchpack Error (watcher): Error: UNKNOWN: unknown error, watch and so on... Thanks.

That's weird. Can you tell me more about the project? Is there a way to run it without the watcher?

[SebCanet]

It's just a project using Google Blockly, the old version is here: https://github.com/A-S-T-U-C-E/ucBlockly It works with simple "npm run dev".

[dividedmind]

I cannot reproduce with the project you've linked to:

$ npx appmap-node npm run dev
Need to install the following packages:
appmap-node@2.16.1
Ok to proceed? (y) y
(Λ) Running with appmap-node version 2.16.1
(Λ) Using config file /home/divide/projects/tmp/ucBlockly/appmap.yml

> µcBlockly@2.0.0 dev
> webpack serve --open --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.42.139:8080/
<i> [webpack-dev-server] Content not from webpack is served from './build' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
assets by path ../dist/ 14.5 KiB
  assets by path ../dist/languages/ 3.58 KiB
    assets by path ../dist/languages/*.ts 1.69 KiB 5 assets
    assets by path ../dist/languages/*.map 1.9 KiB 5 assets
  assets by path ../dist/*.ts 7.94 KiB
    asset ../dist/tools.d.ts 1.85 KiB [emitted]
    asset ../dist/toolbox.d.ts 1.57 KiB [emitted]
    + 5 assets
  assets by path ../dist/*.map 3.02 KiB
    asset ../dist/toolbox.d.ts.map 893 bytes [emitted]
    asset ../dist/index.d.ts.map 705 bytes [emitted]
    asset ../dist/tools.d.ts.map 373 bytes [emitted]
    + 4 assets
asset bundle.js 9.33 MiB [emitted] (name: main)
asset index.html 3.37 KiB [emitted]
orphan modules 219 KiB [orphan] 43 modules
runtime modules 27.4 KiB 13 modules
cacheable modules 2.22 MiB
  modules by path ./node_modules/ 2.01 MiB 43 modules
  modules by path ./src/ 217 KiB
    ./src/index.ts + 31 modules 207 KiB [built] [code generated]
    ./src/css/index.css 2.27 KiB [built] [code generated]
    ./src/css/µcBlockly.css 2.28 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/css/index.css 3.54 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/css/µcBlockly.css 1.83 KiB [built] [code generated]
  asset modules 431 bytes
    data:image/svg+xml;utf8,<svg xmlns=%27ht.. 216 bytes [built] [code generated]
    data:image/svg+xml;utf8,<svg xmlns=%27ht.. 216 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 3128 ms
(Λ) Wrote /home/divide/projects/tmp/ucBlockly/tmp/appmap/requests/2024-03-01T11:58:28.262Z_-.appmap.json
(Λ) Wrote /home/divide/projects/tmp/ucBlockly/tmp/appmap/requests/2024-03-01T11:58:29.856Z_-bundle.js.appmap.json

I wonder if this is because you run on Windows? Could you try a different OS with your project, or confirm that https://github.com/A-S-T-U-C-E/ucBlockly indeed doesn't work on Windows?

Regardless, I don't think appmap-node will be very useful for this project: if I understand correctly, node.js just compiles and serves up the code which actually runs in the browser.

[SebCanet]

Thanks a lot for trying, but it was an very old version, sorry, now it's up to date in the repo. I've found the problem: I was working on a network folder... really sorry for annoying you for a so sutpid mistake. My project is just as its very first stage, just PoC and then will be enhanced with many depnedencies. I was looking for something helping creating diagrams.

[dividedmind]

The newest checkout works fine for me, too:

$ appmap-node npm run dev
(Λ) Running with appmap-node version 2.16.1
(Λ) Using config file /home/divide/projects/tmp/ucBlockly/appmap.yml

> µcBlockly@2.0.0 dev
> webpack serve --open --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.42.139:8080/
<i> [webpack-dev-server] Content not from webpack is served from './build' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
assets by path *.js 74.4 MiB 90 assets
assets by path languages/ 3.58 KiB
  assets by path languages/*.ts 1.69 KiB 5 assets
  assets by path languages/*.map 1.9 KiB 5 assets
assets by path *.ts 8.58 KiB
  asset tools.d.ts 2.4 KiB [emitted]
  + 6 assets
assets by path *.map 3.1 KiB
  asset toolbox.d.ts.map 954 bytes [emitted]
  + 6 assets
assets by path generators/ 8.86 KiB
  assets by path generators/arduino/ 8.08 KiB 4 assets
  + 2 assets
asset 05d03beaf3f8595d62ad.ttf 77.6 KiB [emitted] [immutable] [from: node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf] (auxiliary name: main)
asset index.html 3.72 KiB [emitted]
orphan modules 3.84 MiB [orphan] 386 modules
runtime modules 30.6 KiB 16 modules
modules by path ./node_modules/monaco-editor/esm/vs/ 9.31 MiB (javascript) 77.6 KiB (asset) 722 modules
modules by path ./node_modules/blockly/ 1.16 MiB 13 modules
modules by path ./node_modules/@blockly/ 741 KiB 9 modules
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
modules by path ./src/ 326 KiB 5 modules
modules by path ./node_modules/webpack-dev-server/client/ 69.8 KiB 4 modules
modules by path ./node_modules/webpack/hot/*.js 5.18 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB 4 modules
modules by mime type image/svg+xml 3.6 KiB 4 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.33 KiB 3 modules
+ 5 modules
webpack 5.90.3 compiled successfully in 15341 ms
(Λ) Wrote /home/divide/projects/tmp/ucBlockly/tmp/appmap/requests/2024-03-02T17:51:51.747Z_-.appmap.json
(Λ) Wrote /home/divide/projects/tmp/ucBlockly/tmp/appmap/requests/2024-03-02T17:52:03.137Z_-bundle.js.appmap.json
(Λ) Wrote /home/divide/projects/tmp/ucBlockly/tmp/appmap/requests/2024-03-02T17:52:04.734Z_-node_modules_monaco-editor_esm_vs_basic-languages_cpp_cpp_js.bundle.js.appmap.json
(Λ) Wrote /home/divide/projects/tmp/ucBlockly/tmp/appmap/requests/2024-03-02T17:52:04.972Z_-editor.worker.js.appmap.json

But again, the project doesn't seem to have any server-side code that could be recorded; it seems it's just compiling and serving up code for the browser. I'm not sure what diagrams you're looking into making, but AppMap is for dynamic analysis and deals with code execution traces. It sounds like you might be looking for a static analysis tool instead.

[SebCanet]

You're right, for now it's just the very beginning of the project, so there's no server side. For now what I was looking for is generating UML diagram from code (class, etc). Thanks a lot for your help.