Gatsby 2.23.0 - Broken TypeScript Typings

Description

In the latest release of Gatsby, the TypeScript typings are (still) broken. Someone made a bug report about this ~5 days ago, but changed his description later on (https://webcache.googleusercontent.com/search?q=cache:YDaF8z8bhtoJ:https://github.com/gatsbyjs/gatsby/issues/24645). This issue is now closed, but the Actual Behavior he originally explained is still present in the latest release of Gatsby.

Steps to reproduce

1. Check out the Renovate Gatsby upgrade branch of my Gatsby starter (https://github.com/Tielem/gatsby-typescript-eslint-prettier-starter/tree/renovate/gatsby-monorepo)
2. Run ‘npm install’
3. Run ‘npm run build’

Expected Behavior

No build errors

Actual Result

Same errors as originally in the linked (now closed) ticket.

node_modules/@types/react/index.d.ts:1347:15 - error TS2320: Interface 'DOMAttributes<T>' cannot simultaneously extend types 'SxProps' and 'SxProps'.
  Named property 'sx' of types 'SxProps' and 'SxProps' are not identical.

1347     interface DOMAttributes<T> {
                   ~~~~~~~~~~~~~

node_modules/@types/react/index.d.ts:2962:19 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'SxProps' and 'SxProps'.
  Named property 'sx' of types 'SxProps' and 'SxProps' are not identical.

2962         interface IntrinsicAttributes extends React.Attributes { }
                       ~~~~~~~~~~~~~~~~~~~

node_modules/gatsby/index.d.ts:14:27 - error TS2307: Cannot find module './src/bootstrap/load-plugins/types' or its corresponding type declarations.

14 import { PluginRef } from "./src/bootstrap/load-plugins/types"
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/theme-ui/dist/index.d.ts:6:51 - error TS7016: Could not find a declaration file for module '@theme-ui/color-modes'. '/Volumes/Workspace/project/node_modules/@theme-ui/color-modes/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/theme-ui__color-modes` if it exists or add a new declaration (.d.ts) file containing `declare module '@theme-ui/color-modes';`

6 export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes';
                                                    ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/theme-ui/dist/index.d.ts:7:36 - error TS7016: Could not find a declaration file for module '@theme-ui/mdx'. '/Volumes/Workspace/project/node_modules/@theme-ui/mdx/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/theme-ui__mdx` if it exists or add a new declaration (.d.ts) file containing `declare module '@theme-ui/mdx';`

7 export { Styled, components } from '@theme-ui/mdx';
                                     ~~~~~~~~~~~~~~~

node_modules/theme-ui/dist/index.d.ts:8:31 - error TS7016: Could not find a declaration file for module '@theme-ui/theme-provider'. '/Volumes/Workspace/project/node_modules/@theme-ui/theme-provider/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/theme-ui__theme-provider` if it exists or add a new declaration (.d.ts) file containing `declare module '@theme-ui/theme-provider';`

8 export { ThemeProvider } from '@theme-ui/theme-provider';
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~

Environment

Shouldn’t be relevant, fails on Netlify build and locally.

[diegohaz]

So, right now the best solution is to downgrade to v2.22.12?

[mxstbr]

The changes have not been released yet. While I pushed commit 88d5eebc317758eeab92d8c025e278115c0bb6e3, I actually aborted the publish process to npm as we were on a company-wide holiday and I didn’t want to risk breaking anything—that’s why none of the versions mentioned in the commit are on npm.