Error compiling confluence WebHooks project - TS2786: 'Redirect' cannot be used as a JSX component.

[Ahmed Sherif]

Hi All, 

I'm trying to compile Confluence 8.2.0-m27 and I encountered an error while compiling `Confluence Webhooks`

This is the full error I get: 

[ERROR] [main] npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
[ERROR] [main] npm WARN config location in the cache, and they are managed by
[ERROR] [main] npm WARN config [`cacache`](http://npm.im/cacache).
[INFO] [main] Using nvm 0.39.3
[INFO] [main] Found '/Users/user/confluence-8.2.0-m27-source/confluence-project/.nvmrc' with version <v14.20.0>
[ERROR] [main] v14.20.0 is already installed.
[INFO] [main] Now using node v14.20.0 (npm v6.14.17)
[INFO] [main] Using node v14.20.0 npm 6.14.17
[INFO] [main] 
[INFO] [main] > confluence-webhooks@0.0.0 build /Users/Redacted/confluence-8.2.0-m27-source/confluence-project/confluence-plugins/confluence-bundled-plugins/confluence-webhooks
[INFO] [main] > webpack
[INFO] [main] 
[INFO] [main] Hash: af21ba59a97984140ca8
[INFO] [main] Version: webpack 4.46.0
[INFO] [main] Time: 7858ms
[INFO] [main] Built at: 03/05/2023 8:15:23 PM
[INFO] [main] 6 assets
[INFO] [main] Entrypoint confluence.webhooks.admin = confluence.webhooks.admin.js
[INFO] [main] [0] external {"var":"require('react')","amd":"react"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [3] ./node_modules/@emotion/core/dist/core.browser.esm.js + 11 modules 53 KiB {confluence.webhooks.admin} [built]
[INFO] [main] | 12 modules
[INFO] [main] [28] (webpack)/buildin/harmony-module.js 573 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [30] ./node_modules/history/esm/history.js + 2 modules 30.6 KiB {confluence.webhooks.admin} [built]
[INFO] [main] | 3 modules
[INFO] [main] [32] external {"var":"require('react-dom')","amd":"react-dom"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [34] ./src/main/frontend/routes.ts 2.65 KiB {confluence.webhooks.admin} [built]
[INFO] [main] [54] external {"var":"require('confluence/api/constants')","amd":"confluence/api/constants"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [55] ./src/main/frontend/errors/HandledError.ts 6.37 KiB {confluence.webhooks.admin} [built]
[INFO] [main] [59] ./src/main/frontend/services/rest-api/rest-api.ts 7.81 KiB {confluence.webhooks.admin} [built]
[INFO] [main] [96] external {"var":"require('confluence/api/event')","amd":"confluence/api/event"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [106] external {"var":"require('confluence/webhooks/help-urls')","amd":"confluence/webhooks/help-urls"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [123] external {"var":"require('confluence/flag')","amd":"confluence/flag"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [161] multi ./src/main/frontend/index 28 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [162] external {"var":"WRM.format","amd":"wrm/format"} 42 bytes {confluence.webhooks.admin} [built]
[INFO] [main] [214] ./src/main/frontend/index.tsx + 1 modules 1.61 KiB {confluence.webhooks.admin} [built]
[INFO] [main] | ./src/main/frontend/index.tsx 644 bytes [built]
[INFO] [main] | + 1 hidden module
[INFO] [main] + 512 hidden modules
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:34:10
[INFO] [main] TS2786: 'ErrorBoundary' cannot be used as a JSX component.
[INFO] [main] Its instance type 'ErrorBoundary' is not a valid JSX element.
[INFO] [main] The types returned by 'render()' are incompatible between these types.
[INFO] [main] Type 'React.ReactNode' is not assignable to type 'import("/Users/Redacted/confluence-8.2.0-m27-source/confluence-project/confluence-plugins/confluence-bundled-plugins/confluence-webhooks/node_modules/@types/react-select/node_modules/@types/react/index").ReactNode'.
[INFO] [main] Type '{}' is not assignable to type 'ReactNode'.
[INFO] [main] 32 |
[INFO] [main] 33 | return (
[INFO] [main] > 34 | <ErrorBoundary>
[INFO] [main] | ^^^^^^^^^^^^^
[INFO] [main] 35 | <Router basename={basename}>
[INFO] [main] 36 | <LazyLoadingIndicator>
[INFO] [main] 37 | <Switch>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:35:14
[INFO] [main] TS2786: 'Router' cannot be used as a JSX component.
[INFO] [main] Its instance type 'BrowserRouter' is not a valid JSX element.
[INFO] [main] The types returned by 'render()' are incompatible between these types.
[INFO] [main] Type 'React.ReactNode' is not assignable to type 'import("/Users/Redacted/confluence-8.2.0-m27-source/confluence-project/confluence-plugins/confluence-bundled-plugins/confluence-webhooks/node_modules/@types/react-select/node_modules/@types/react/index").ReactNode'.
[INFO] [main] 33 | return (
[INFO] [main] 34 | <ErrorBoundary>
[INFO] [main] > 35 | <Router basename={basename}>
[INFO] [main] | ^^^^^^
[INFO] [main] 36 | <LazyLoadingIndicator>
[INFO] [main] 37 | <Switch>
[INFO] [main] 38 | <Route exact path={routes.list}>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:37:22
[INFO] [main] TS2786: 'Switch' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Switch' is not a valid JSX element.
[INFO] [main] The types returned by 'render()' are incompatible between these types.
[INFO] [main] Type 'React.ReactNode' is not assignable to type 'import("/Users/Redacted/confluence-8.2.0-m27-source/confluence-project/confluence-plugins/confluence-bundled-plugins/confluence-webhooks/node_modules/@types/react-select/node_modules/@types/react/index").ReactNode'.
[INFO] [main] 35 | <Router basename={basename}>
[INFO] [main] 36 | <LazyLoadingIndicator>
[INFO] [main] > 37 | <Switch>
[INFO] [main] | ^^^^^^
[INFO] [main] 38 | <Route exact path={routes.list}>
[INFO] [main] 39 | <List />
[INFO] [main] 40 | </Route>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:38:26
[INFO] [main] TS2786: 'Route' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Route<{}, string>' is not a valid JSX element.
[INFO] [main] The types returned by 'render()' are incompatible between these types.
[INFO] [main] Type 'React.ReactNode' is not assignable to type 'import("/Users/Redacted/confluence-8.2.0-m27-source/confluence-project/confluence-plugins/confluence-bundled-plugins/confluence-webhooks/node_modules/@types/react-select/node_modules/@types/react/index").ReactNode'.
[INFO] [main] 36 | <LazyLoadingIndicator>
[INFO] [main] 37 | <Switch>
[INFO] [main] > 38 | <Route exact path={routes.list}>
[INFO] [main] | ^^^^^
[INFO] [main] 39 | <List />
[INFO] [main] 40 | </Route>
[INFO] [main] 41 | <Route path={routes.add}>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:41:26
[INFO] [main] TS2786: 'Route' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Route<{}, string>' is not a valid JSX element.
[INFO] [main] 39 | <List />
[INFO] [main] 40 | </Route>
[INFO] [main] > 41 | <Route path={routes.add}>
[INFO] [main] | ^^^^^
[INFO] [main] 42 | <Add initiateSuccessFlag={initiateSuccessFlag} />
[INFO] [main] 43 | </Route>
[INFO] [main] 44 | <Route path={routes.edit}>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:44:26
[INFO] [main] TS2786: 'Route' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Route<{}, string>' is not a valid JSX element.
[INFO] [main] 42 | <Add initiateSuccessFlag={initiateSuccessFlag} />
[INFO] [main] 43 | </Route>
[INFO] [main] > 44 | <Route path={routes.edit}>
[INFO] [main] | ^^^^^
[INFO] [main] 45 | <Edit />
[INFO] [main] 46 | </Route>
[INFO] [main] 47 | <Route path={routes.view}>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:47:26
[INFO] [main] TS2786: 'Route' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Route<{}, string>' is not a valid JSX element.
[INFO] [main] 45 | <Edit />
[INFO] [main] 46 | </Route>
[INFO] [main] > 47 | <Route path={routes.view}>
[INFO] [main] | ^^^^^
[INFO] [main] 48 | <div>View</div>
[INFO] [main] 49 | </Route>
[INFO] [main] 50 | <Route>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:50:26
[INFO] [main] TS2786: 'Route' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Route<{}, string>' is not a valid JSX element.
[INFO] [main] 48 | <div>View</div>
[INFO] [main] 49 | </Route>
[INFO] [main] > 50 | <Route>
[INFO] [main] | ^^^^^
[INFO] [main] 51 | <Redirect to={routes.list} />
[INFO] [main] 52 | </Route>
[INFO] [main] 53 | </Switch>
[INFO] [main] 
[INFO] [main] ERROR in src/main/frontend/components/AppRouter/AppRouter.tsx:51:30
[INFO] [main] TS2786: 'Redirect' cannot be used as a JSX component.
[INFO] [main] Its instance type 'Redirect' is not a valid JSX element.
[INFO] [main] The types returned by 'render()' are incompatible between these types.
[INFO] [main] Type 'React.ReactNode' is not assignable to type 'import("/Users/Redacted/confluence-8.2.0-m27-source/confluence-project/confluence-plugins/confluence-bundled-plugins/confluence-webhooks/node_modules/@types/react-select/node_modules/@types/react/index").ReactNode'.
[INFO] [main] 49 | </Route>
[INFO] [main] 50 | <Route>
[INFO] [main] > 51 | <Redirect to={routes.list} />
[INFO] [main] | ^^^^^^^^
[INFO] [main] 52 | </Route>
[INFO] [main] 53 | </Switch>
[INFO] [main] 54 | </LazyLoadingIndicator>
[ERROR] [main] npm ERR! code ELIFECYCLE
[ERROR] [main] npm ERR! errno 2
[ERROR] [main] npm ERR! confluence-webhooks@0.0.0 build: `webpack`
[ERROR] [main] npm ERR! Exit status 2
[ERROR] [main] npm ERR! 
[ERROR] [main] npm ERR! Failed at the confluence-webhooks@0.0.0 build script.
[ERROR] [main] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[ERROR] [main] 
[ERROR] [main] npm ERR! A complete log of this run can be found in:
[ERROR] [main] npm ERR! /Users/Redacted/.npm/_logs/2023-03-05T19_15_23_891Z-debug.log
[ERROR] Command execution failed.
org.apache.commons.exec.ExecuteException: Process exited with an error: 2 (Exit value: 2)