BEAGL-PLAY-SBC: New build of TI Wi-SUN FANTund failed to compile

Hi Tim,

I've started from a fresh installation using the BeaglePlay Debian OS 11.8 minimal image you linked to, the latest ti-wisunfantund and followed all instructions to the letter from INSTALL.md and README.md. Purposely I left out "sudo npm audit fix" and it works

Here is the log:

dBeaglePlay:/usr/local/ti-wisunfantund/ti-wisun-webapp/client$ sudo npm ru

> utdesign-ti-wisunfan-webserver-client@1.0.0 build
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.5.5

Please only submit bug reports when using the officially supported version.

=============

Compiled with warnings.

src/APIService.tsx
  Line 2:9:  'Pingburst' is defined but never used  @typescript-eslint/no-unused-vars

src/App.tsx
  Line 5:8:  'ThemeToggle' is defined but never used     @typescript-eslint/no-unused-vars
  Line 7:9:  'PingJobsButton' is defined but never used  @typescript-eslint/no-unused-vars

src/components/BorderRouterConfigProperties.tsx
  Line 1:9:  'APIService' is defined but never used  @typescript-eslint/no-unused-vars
  Line 2:9:  'App' is defined but never used         @typescript-eslint/no-unused-vars

src/components/BorderRouterInfoProperties.tsx
  Line 42:10:  'mainTextColor' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/components/ConfigPropertyInput.tsx
  Line 1:21:  'useRef' is defined but never used                            @typescript-eslint/no-unused-vars
  Line 3:9:   'NETWORK_TIMEOUT_WARNING_DURATION' is defined but never used  @typescript-eslint/no-unused-vars

src/components/ConfigPropertySelect.tsx
  Line 1:21:  'useRef' is defined but never used  @typescript-eslint/no-unused-vars

src/components/ConfigTab.tsx
  Line 3:9:   'ThemedInput' is defined but never used          @typescript-eslint/no-unused-vars
  Line 4:8:   'ThemedLabel' is defined but never used          @typescript-eslint/no-unused-vars
  Line 5:9:   'AppContext' is defined but never used           @typescript-eslint/no-unused-vars
  Line 6:8:   'produce' is defined but never used              @typescript-eslint/no-unused-vars
  Line 7:9:   'NCPNumberProperties' is defined but never used  @typescript-eslint/no-unused-vars
  Line 7:45:  'NCPStringProperties' is defined but never used  @typescript-eslint/no-unused-vars
  Line 12:9:  'useContext' is defined but never used           @typescript-eslint/no-unused-vars

src/components/HealthMonitor.tsx
  Line 4:9:  'getIPAddressInfoByIP' is defined but never used  @typescript-eslint/no-unused-vars

src/components/InfoTooltip.tsx
  Line 141:6:   React Hook useLayoutEffect has a missing dependency: 'overflowCallback'. Either include it or remove the dependency array. If 'overflowCallback' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
  Line 358:17:  'InfoMessageTooltipCard' is already defined                                                                                                                                                                                                            @typescript-eslint/no-redeclare
  Line 397:17:  'InfoPropertyTooltipCard' is already defined                                                                                                                                                                                                           @typescript-eslint/no-redeclare
  Line 449:17:  'ErrorPropertyTooltipCard' is already defined                                                                                                                                                                                                          @typescript-eslint/no-redeclare

src/components/LEDConfig.tsx
  Line 1:9:  'pointer' is defined but never used  @typescript-eslint/no-unused-vars

src/components/LEDObject.tsx
  Line 13:19:  Expected '===' and instead saw '=='  eqeqeq
  Line 16:26:  Expected '===' and instead saw '=='  eqeqeq

src/components/LoadingTextBox.tsx
  Line 2:9:  'Color' is defined but never used  @typescript-eslint/no-unused-vars

src/components/MacFilterSettings.tsx
  Line 1:8:   'produce' is defined but never used                                                                       @typescript-eslint/no-unused-vars
  Line 80:5:  React Hook useCallback has a missing dependency: 'App'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/components/MonitorTab.tsx
  Line 1:8:     'Pane' is defined but never used          @typescript-eslint/no-unused-vars
  Line 4:8:     'AtAGlance' is defined but never used     @typescript-eslint/no-unused-vars
  Line 10:9:    'ColorScheme' is defined but never used   @typescript-eslint/no-unused-vars
  Line 10:22:   'THEME' is defined but never used         @typescript-eslint/no-unused-vars
  Line 10:29:   'ThemeContext' is defined but never used  @typescript-eslint/no-unused-vars
  Line 14:16:   'useContext' is defined but never used    @typescript-eslint/no-unused-vars
  Line 14:46:   'useEffect' is defined but never used     @typescript-eslint/no-unused-vars
  Line 16:10:   'gray' is defined but never used          @typescript-eslint/no-unused-vars
  Line 16:16:   'timer' is defined but never used         @typescript-eslint/no-unused-vars
  Line 17:10:   'stat' is defined but never used          @typescript-eslint/no-unused-vars
  Line 18:10:   'noop' is defined but never used          @typescript-eslint/no-unused-vars
  Line 19:10:   'current' is defined but never used       @typescript-eslint/no-unused-vars
  Line 58:68:   Expected '===' and instead saw '=='       eqeqeq
  Line 62:41:   Expected '===' and instead saw '=='       eqeqeq
  Line 74:38:   Expected '===' and instead saw '=='       eqeqeq
  Line 77:43:   Expected '===' and instead saw '=='       eqeqeq
  Line 80:43:   Expected '===' and instead saw '=='       eqeqeq
  Line 83:43:   Expected '===' and instead saw '=='       eqeqeq
  Line 86:43:   Expected '===' and instead saw '=='       eqeqeq
  Line 92:43:   Expected '===' and instead saw '=='       eqeqeq
  Line 103:32:  Expected '===' and instead saw '=='       eqeqeq
  Line 110:25:  Expected '===' and instead saw '=='       eqeqeq
  Line 111:32:  Expected '!==' and instead saw '!='       eqeqeq
  Line 114:31:  Expected '!==' and instead saw '!='       eqeqeq
  Line 117:31:  Expected '!==' and instead saw '!='       eqeqeq
  Line 120:33:  Expected '!==' and instead saw '!='       eqeqeq

src/components/NCPStatus.tsx
  Line 21:12:  'wasSuccess' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/components/NetworkProperties.tsx
  Line 1:34:  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars

src/components/OADInterface.tsx
  Line 1:9:     'pointer' is defined but never used                   @typescript-eslint/no-unused-vars
  Line 2:28:    'useReducer' is defined but never used                @typescript-eslint/no-unused-vars
  Line 5:9:     'CytoscapeGraph' is defined but never used            @typescript-eslint/no-unused-vars
  Line 6:8:     'LEDObject' is defined but never used                 @typescript-eslint/no-unused-vars
  Line 9:8:     'cytoscape' is defined but never used                 @typescript-eslint/no-unused-vars
  Line 10:8:    'CytoscapeComponent' is defined but never used        @typescript-eslint/no-unused-vars
  Line 11:10:   'useForceUpdate' is defined but never used            @typescript-eslint/no-unused-vars
  Line 12:10:   'PassThrough' is defined but never used               @typescript-eslint/no-unused-vars
  Line 13:10:   'ErrorPropertyTooltipCard' is defined but never used  @typescript-eslint/no-unused-vars
  Line 14:10:   'readFileSync' is defined but never used              @typescript-eslint/no-unused-vars
  Line 35:10:   'fileData' is assigned a value but never used         @typescript-eslint/no-unused-vars
  Line 35:20:   'setFileData' is assigned a value but never used      @typescript-eslint/no-unused-vars
  Line 84:30:   Expected '===' and instead saw '=='                   eqeqeq
  Line 89:17:   Expected '===' and instead saw '=='                   eqeqeq
  Line 116:28:  Expected '===' and instead saw '=='                   eqeqeq
  Line 129:30:  Expected '===' and instead saw '=='                   eqeqeq

src/components/PaneContainer.tsx
  Line 2:20:  'useContext' is defined but never used                     @typescript-eslint/no-unused-vars
  Line 3:9:   'ColorScheme' is defined but never used                    @typescript-eslint/no-unused-vars
  Line 3:22:  'THEME' is defined but never used                          @typescript-eslint/no-unused-vars
  Line 3:29:  'ThemeContext' is defined but never used                   @typescript-eslint/no-unused-vars
  Line 5:9:   'ComponentThemeImplementations' is defined but never used  @typescript-eslint/no-unused-vars

src/components/PingConfig.tsx
  Line 13:8:    'Tooltip' is defined but never used                  @typescript-eslint/no-unused-vars
  Line 16:3:    'InfoPropertyTooltipCard' is defined but never used  @typescript-eslint/no-unused-vars
  Line 143:31:  Expected '===' and instead saw '=='                  eqeqeq

src/components/PingJobMonitor.tsx
  Line 5:9:   'getIPAddressInfoByIP' is defined but never used     @typescript-eslint/no-unused-vars
  Line 7:52:  'NumberOfPacketsQuantity' is defined but never used  @typescript-eslint/no-unused-vars

src/components/PingLog.tsx
  Line 3:9:   'getIPAddressInfoByIP' is defined but never used   @typescript-eslint/no-unused-vars
  Line 5:9:   'sort' is defined but never used                   @typescript-eslint/no-unused-vars
  Line 6:53:  'timestampStringToDate' is defined but never used  @typescript-eslint/no-unused-vars

src/components/SuccessRateLineChart.tsx
  Line 5:24:  'Pingburst' is defined but never used  @typescript-eslint/no-unused-vars

src/components/Tooltip.tsx
  Line 1:27:  'RefObject' is defined but never used  @typescript-eslint/no-unused-vars
  Line 1:38:  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars

src/components/Topology.tsx
  Line 1:16:    'useContext' is defined but never used            @typescript-eslint/no-unused-vars
  Line 1:28:    'useState' is defined but never used              @typescript-eslint/no-unused-vars
  Line 6:8:     'produce' is defined but never used               @typescript-eslint/no-unused-vars
  Line 9:33:    'InfoTooltip' is defined but never used           @typescript-eslint/no-unused-vars
  Line 9:46:    'InfoTooltipMode' is defined but never used       @typescript-eslint/no-unused-vars
  Line 210:14:  'stylesheet' is assigned a value but never used   @typescript-eslint/no-unused-vars
  Line 242:7:   'OADFWString' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/hooks/useForceUpdate.ts
  Line 4:10:  'value' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/hooks/useLoc.ts
  Line 1:20:  'useEffect' is defined but never used                                                                                                        @typescript-eslint/no-unused-vars
  Line 32:6:  React Hook useLayoutEffect has missing dependencies: 'bottom', 'right', and 'targetRef'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

src/types.tsx
  Line 3:10:  'StringLiteral' is defined but never used  @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  358.46 KB  build/static/js/2.6ca26b43.chunk.js
  38.52 KB   build/static/js/main.68701475.chunk.js
  1.96 KB    build/static/css/main.2a90219b.chunk.css
  797 B      build/static/js/runtime-main.79fab79a.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

debian@BeaglePlay:/usr/local/ti-wisunfantund/ti-wisun-webapp/client$

I deleted the build/ directory, ran sudo npm audit fix  and tried to build it again. This time I get the same error as you.

n buildBeaglePlay:/usr/local/ti-wisunfantund/ti-wisun-webapp/client$ sudo npm ru

> utdesign-ti-wisunfan-webserver-client@1.0.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

/usr/local/ti-wisunfantund/ti-wisun-webapp/client/src/components/Topology.tsx
TypeScript error in /usr/local/ti-wisunfantund/ti-wisun-webapp/client/src/components/Topology.tsx(39,25):
Namespace 'cytoscape' has no exported member 'Stylesheet'.  TS2694

    37 |
    38 | interface TopologyTheme {
  > 39 |   stylesheet: cytoscape.Stylesheet[];
       |                         ^
    40 | }
    41 | const topologyThemeImplementations = new ComponentThemeImplementations<TopologyTheme>();
    42 | const tiTopologyTheme: TopologyTheme = {

There is clearly an issue with dependencies. I took a dump of the "audit fix --json" I will share with the developers. But I suggest you build it without running npm audit fix.

Best regards,

Daniel