Wasp apps inside NPM projects don't work

[sodic]

Note: check #1838

Steps to reproduce:

1. Position yourself into wasp/web.
2. Execute wasp new someApp && cd someApp && wasp start.
3. See the errors pop up.

Bug found on v0.12.0-rc4.
I'm assuming it doesn't have anything to do with the wasp/web project specifically. It's probably caused by a package.json file or node_modules directory somewhere higher app the file tree containing certain packages (probably react or something related).

Here's the full error message:

🐝 --- Building SDK... ------------------------------------------------------------


[  Wasp  ] client/router/Link.tsx(20,11): error TS2786: 'RouterLink' cannot be used as a JSX component.
[  Wasp  ]   Its type '<S = unknown>(props: LinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | JSXElementConstructor<any>>' is not a valid JSX element type.
[  Wasp  ]     Type '<S = unknown>(props: LinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
[  Wasp  ]       Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
[  Wasp  ]         Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
[  Wasp  ] client/test/vitest/helpers.tsx(29,8): error TS2786: 'Router' cannot be used as a JSX component.
[  Wasp  ]   Its type 'typeof BrowserRouter' is not a valid JSX element type.
[  Wasp  ]     Type 'typeof BrowserRouter' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
[  Wasp  ]       Construct signature return types 'BrowserRouter' and 'Component<any, any, any>' are incompatible.
[  Wasp  ]         The types returned by 'render()' are incompatible between these types.
[  Wasp  ]           Type 'import("/home/filip/Projects/wasp/wasp/web/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
[  Wasp  ]             Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
[  Wasp  ] client/test/vitest/helpers.tsx(29,15): error TS2769: No overload matches this call.
[  Wasp  ]   Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
[  Wasp  ]     Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
[  Wasp  ]       Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
[  Wasp  ]   Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
[  Wasp  ]     Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
[  Wasp  ] client/test/vitest/helpers.tsx(37,12): error TS2786: 'Router' cannot be used as a JSX component.
[  Wasp  ]   Its type 'typeof BrowserRouter' is not a valid JSX element type.
[  Wasp  ] client/test/vitest/helpers.tsx(37,19): error TS2769: No overload matches this call.
[  Wasp  ]   Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
[  Wasp  ]     Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
[  Wasp  ]   Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
[  Wasp  ]     Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.

❌ --- [Error] Your wasp project failed to compile: -------------------------------

- SDK build failed with exit code: 2

[sodic]

I've tried to reproduce this with different versions of Wasp:

• Wasp 0.11.8 doesn't have the bug.
• Wasp 0.12.0-rc4 has the bug.
• Wasp 0.12.3 doesn't have the bug.

Using Git bisect, I've identified that the bug was fixed by including ("@types/react-router-dom", "^5.3.3") to the list of SDK's dependencies (in this PR: #1799).

I've tried to reproduce it even by moving a more complicated project (waspc/todo-typescript) to the web folder and running it there, but everything was working.

The weird thing is - Wasp 0.12.0-rc4 works normally outside of an NPM project (i.e., it's not bothered by the lack of the @types/react-router-dom package). The bug only happens when it's run inside the web directory.

Since the bug doesn't happen in the current version of Wasp, I'm closing the issue

@infomiho Any thoughts on what might be happening here, just curious?