Gatsby: Gatsby 2.23.0 - Broken TypeScript Typings

[Tielem]

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.

[le0nik]

Someone made a bug report about this ~5 days ago, but changed his description later on

Want to note that it wasn't me who changed the description, so it was as suprising to me as it was to you that it happened and that the issue got closed with a partial fix.

[LekoArts]

I want to explain why I changed the description:

You mentioned that you saw that message when upgrading from 2.22.12 to 2.22.13 which contains the PR you mentioned: https://diff.intrinsic.com/gatsby/2.22.12/2.22.13

You didn't provide more information than that thus I removed the seemingly irrelevant content from the log (to make it easier to understand what the issue was later) - as this can show up when you use theme-ui. As @Tielem now provided a reproduction it is clear that the repository doesn't use theme-ui. (The gatsby info --clipboard only shows gatsby- packages, not something like e.g. theme-ui)

This reproduction now made it clear that it comes from the introduction of gatsby-admin into the package (as it uses theme-ui under the hood). So sorry for changing your description, in the future I'd appreciate if you could follow the reproduction steps and provide all the information we ask for so that we don't have any misunderstandings. Thanks!

Anyways, I forwarded this issue to the right person so that we can fix this!

[mxstbr]

This is kinda related to #24653, and will likely also be resolved once I move all Gatsby Admin dependencies to devDependencies, which should result in the broken theme-ui types not getting installed anymore for users!

[diegohaz]

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

[Tielem]

This ticket got closed, but the errors originally reported are not resolved in Gatsby 2.23.3

The changes in the related ticket have been released. Am I missing something?

[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.

[jcowman2]

Has this issue been resolved? I'm getting a very similar error with Gatsby v2.24.52