facebook / facebook/relay

Satisfies type assertion for typescript break with `useImportTypeSyntax: true`

Open
#4,818 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

This is a file generated in my project with, relay 18.1.0 and `"useImportTypeSyntax": true` in `relay.config.json`
```tsx
// MediaCover_media.graphql.ts
import type { ReaderFragment } from 'relay-runtime';
import type { FragmentRefs } from "relay-runtime";
import type { src as mediaCoverImageSrcResolverType } from "../lib/media/src";
// Type assertion validating that `mediaCoverImageSrcResolverType` resolver is correctly implemented.
// A type error here indicates that the type signature of the resolver module is incorrect.
(mediaCoverImageSrcResolverType satisfies (
rootKey: src_mediaCover$key,
args: {
extraLarge: boolean | null | undefined;
large: boolean | null | undefined;
},
) => string | null | undefined);
```
This code leads to runtime error
`ReferenceError: mediaCoverImageSrcResolverType is not defined`

It happens because `(mediaCoverImageSrcResolverType satisfies ...` is transpiled to `mediaCoverImageSrcResolverType` by typescript
but `import type { src as mediaCoverImageSrcResolverType } from "../lib/media/src";` gets dropped at runtime

It's not possible to use `satisfies` between two `types`, only a `value` and a `type`.

The solution is to make this import without `type` keyword
```tsx
import type { src as mediaCoverImageSrcResolverType } from "../lib/media/src";
```

Related to: #4797 #4772

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.