Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wasp apps inside NPM projects don't work #1792

Closed
sodic opened this issue Feb 21, 2024 · 1 comment
Closed

Wasp apps inside NPM projects don't work #1792

sodic opened this issue Feb 21, 2024 · 1 comment

Comments

@sodic
Copy link
Contributor

sodic commented Feb 21, 2024

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
Copy link
Contributor Author

sodic commented Mar 7, 2024

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?

@sodic sodic closed this as completed Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant