The app does not build

[dmitrynovik]

Hi,

I am following the instructions as per README

Problem 1: 'react-scripts' is not recognized as an internal or external command,
That was easy to fix ... forked the code, created a branch, ran npm i --save react-scripts

Problem 2: a slew of compile errors (see below).
Is xstate-viz in a consistent state so that it can be built from the source code, or am I doing something wrong?

$ npm run develop

> @statecharts/[email protected] develop C:\code\@dmitrynovik\xstate-viz
> npm link && concurrently "tsc -w" "cd public && npm link @statecharts/xstate-viz && npm start"

npm WARN @statecharts/[email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})   
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})  

audited 2378 packages in 14.965s

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

found 1727 vulnerabilities (1724 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
C:\Users\dmitry.novik\AppData\Roaming\npm\node_modules\@statecharts\xstate-viz -> C:\code\@dmitrynovik\xstate-viz
[0] 9:45:12 AM - Starting compilation in watch mode...
[0]
[1] C:\code\@dmitrynovik\xstate-viz\public\node_modules\@statecharts\xstate-viz -> C:\Users\dmitry.novik\AppData\Roaming\npm\node_modules\@statecharts\xstate-viz -> C:\code\@dmitrynovik\xstate-viz
[1] 
[1] > [email protected] start C:\code\@dmitrynovik\xstate-viz\public
[1] > react-scripts start
[1]
[1] i ｢wds｣: Project is running at http://192.168.104.29/
[1] i ｢wds｣: webpack output is served from /viz
[1] i ｢wds｣: Content not from webpack is served from C:\code\@dmitrynovik\xstate-viz\public\public
[1] i ｢wds｣: 404s will fallback to /viz/
[1] Starting the development server...
[1]
[0] src/App.tsx(137,36): error TS2339: Property 'code' does not exist on type 'EventObject'.
[0] src/App.tsx(159,36): error TS2339: Property 'code' does not exist on type 'EventObject'.
[0] src/App.tsx(331,40): error TS2339: Property 'data' does not exist on type 'EventObject'.
[0] src/App.tsx(421,47): error TS2339: Property 'data' does not exist on type 'EventObject'.
[0] src/App.tsx(533,37): error TS2339: Property 'data' does not exist on type 'EventObject'.
[0] src/App.tsx(616,32): error TS2339: Property 'context' does not exist on type 'never'.
[0] src/CodePanel.tsx(4,26): error TS2307: Cannot find module 'xstate/lib/graph'.
[0] src/Editor.tsx(46,11): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Editor.tsx(85,21): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Editor.tsx(89,21): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Editor.tsx(93,21): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Editor.tsx(97,21): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Editor.tsx(99,22): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Editor.tsx(100,22): error TS2339: Property 'matches' does not exist on type 'never'.
[0] src/Notifications.tsx(35,32): error TS2339: Property 'index' does not exist on type 'EventObject'.
[0] src/Notifications.tsx(48,29): error TS2339: Property 'data' does not exist on type 'EventObject'.
[0] src/StateChart.tsx(22,26): error TS2307: Cannot find module 'xstate/lib/graph'.
[0] src/StateChartNode.tsx(18,26): error TS2307: Cannot find module 'xstate/lib/graph'.
[0] src/StateChartNode.tsx(637,48): error TS7006: Parameter 'edge' implicitly has an 'any' type.
[0] src/StateChartNode.tsx(660,19): error TS2554: Expected 3 arguments, but got 2.
[0] src/StateChartNode.tsx(704,49): error TS7006: Parameter 'action' implicitly has an 'any' type.
[0] src/StateChartNode.tsx(704,57): error TS7006: Parameter 'i' implicitly has an 'any' type.
[0] src/StateChartVisualization.tsx(3,26): error TS2307: Cannot find module 'xstate/lib/graph'.
[0] src/StateChartVisualization.tsx(92,20): error TS7006: Parameter 'edge' implicitly has an 'any' type.
[0] src/User.tsx(75,20): error TS2339: Property 'matches' does not exist on type 'never'.
[0]
[0] 9:45:20 AM - Found 25 errors. Watching for file changes.
[1] Failed to compile.
[1]
[1] ../lib/StateChart.js
[1] Module not found: Can't resolve 'xstate/lib/graph' in 'C:\code\@dmitrynovik\xstate-viz\lib'
[1] Compiling...
[1] Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
[1] Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
[1] Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
[1] Failed to compile.
[1]
[1] ../lib/StateChart.js
[1] Module not found: Can't resolve 'xstate/lib/graph' in 'C:\code\@dmitrynovik\xstate-viz\lib'

```

[davidkpiano]

Please use XState Inspect instead.

[dmitrynovik]

Hi David,

Is @xstate/inspect code open source? I don't seem to find it under the @xstate.

The reason I'm asking is that in my case inspect fails because the native JSON.stringify is not capable of handling circular references (there are alternatives which can e.g. fast-json-stable-stringify ). Our project has a hierarchy of state machines so that the circular references are a necessary evil.

[davidkpiano]

@dmitrynovik Can you post this as an XState issue?

It is open-source, in the viz branch.