Type Checking on Typescript project finds errors with an unchanged project

Expected Behavior

Type checking on a unchanged fresh typescript project to return 0 errors

Current Behavior

Type checking on an unchanged fresh typescript project returns

(node:19764) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  ✔ Generating the Prisma client...
  ✔ Generating types
src/App.tsx:10:4 - error TS2786: 'FatalErrorBoundary' cannot be used as a JSX component.
  Its instance type 'FatalErrorBoundary' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/Users/katrinaknight/Projects/redwood/test-app/node_modules/@types/react/index").ReactNode' is not assignable to type 'import("/Users/katrinaknight/Projects/redwood/test-app/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

10   <FatalErrorBoundary page={FatalErrorPage}>
      ~~~~~~~~~~~~~~~~~~


Found 1 error in src/App.tsx:10

Steps to Reproduce

1. yarn create redwood-app --ts test-app
2. cd test-app
3. yarn rw type-check

Why this effects things

This doesn’t effect me too much right now, as long as it can be ignored and will show other errors in addition to this one, but it is a minor issue if I try to later do CI based on the type-checking.

[Tobbe]

Maybe relevant: https://github.com/facebook/react/issues/24304

So I don’t know why we have react-18 types. But the issue here is that in the react 17 types ReactNode includes {}. It was removed in the react 18 types. So assigning from react 17 ReactNode to react 18 ReactNode is not possible (but the other way around would be fine)

React 17:

type ReactFragment = {} | Iterable<ReactNode>;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

React 18:

type ReactFragment = Iterable<ReactNode>;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

This is only a problem in RW Apps, not the framework itself. For the framework we still get react 17 typings for both react and react-dom

Is it react-syntax-highlighter that’s the problem?

A few other things worth looking into, from a project’s yarn.lock

"@testing-library/react@npm:12.1.4":
  version: 12.1.4
  resolution: "@testing-library/react@npm:12.1.4"
  dependencies:
    "@babel/runtime": ^7.12.5
    "@testing-library/dom": ^8.0.0
    "@types/react-dom": "*"

"@types/react-dom@npm:*":
  version: 18.0.0
  resolution: "@types/react-dom@npm:18.0.0"
  dependencies:
    "@types/react": "*"

"@types/react-syntax-highlighter@npm:11.0.5":
  version: 11.0.5
  resolution: "@types/react-syntax-highlighter@npm:11.0.5"
  dependencies:
    "@types/react": "*"

I found out about the -R flag for yarn why

---

So. Workaround for now:

Add this to your project’s root package.json:

  "resolutions": {
    "@types/react": "17.0.40"
  }

[thedavidprice]

Related Issue now open on DefinitelyTyped repo: https://github.com/microsoft/DefinitelyTyped-tools/issues/433