[BUG] 'React' is referenced directly or indirectly in its own type annotation.

[magic-akari]

TypeScript Version: 3.3.0-dev.20181208

Search Terms:

• 'React' is referenced directly or indirectly in its own type annotation.
• Error: Debug Failure. Invalid cast. The supplied value [object Object] did not pass the test 'isJsonSourceFile'.
  Code

// @strict: true
// @module: esnext
// @moduleResolution: node
// @target: es2018
// @filename: global.d.ts
declare global {
  const React: typeof import("./module");
}

export {};

// @filename: module.d.ts
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e95e11dcf2afe422e9044bbdb0e926b1647fbf9e/types/react/index.d.ts#L44-L47
export = React;
export as namespace React;

declare namespace React {
  function createRef(): any;
}

// @filename: some_module.ts
export {};
React.createRef;

// @filename: emits.ts
console.log("hello");
React.createRef;

Expected behavior:
compiled without error.([email protected])
Actual behavior:
crashes in [email protected] (issue: #28762) (#28782 fixed)
compiles error in [email protected]

'React' is referenced directly or indirectly in its own type annotation.

Playground Link:
minimal example: https://gist.github.com/magic-akari/cfc0e1c31ddcc5dd4a2f07a5da4725dc
example with @types/react: https://gist.github.com/magic-akari/aa10dfb809268eb4f63d5749d113a93a

Related Issues:
#28762

[aminpaks]

@magic-akari Wrong project?
You should report here I guess.

[magic-akari]

@aminpaks Is there anything wrong in the example code?

[aminpaks]

@magic-akari I don't know. I was just pointing out that I think you reported the issue in the wrong project.
This project is TypeScript language, DefinitelyType project is maintaining React types, to track the issue and fix it you need to open this issue in that project.

[magic-akari]

@aminpaks I have reproduced the issue with my code.
The only things related to React is that I use the React as the variable name and its logic is the same as the definition of @types/react.
There is no module imported from react or @types/react.

I am not sure if it is related to DefinitelyType, for it worked in [email protected].

[aminpaks]

@magic-akari I understand.
React itself is a javascript library, it doesn't include any typings (facebook doesn't like TypeScript?) Anyways this means every time there is a new TypeScript version (current 3.2) there is a chance that types created by DefinitelyTypes project are not compatible anymore.

There is no module imported from react or @types/react.

We might not import it directly but that's how TypeScript works. We always import types from @types/react (based on tsconfig and typeRoot) otherwise VSCode (runs TypeScript language server) can't understand the semantics of React.

Update:
Can you push your code in a repo?
Looking at the second link you posted, are we importing @types/react to global namespace?

[magic-akari]

@aminpaks

Can you push your code in a repo?

You can clone the gist just like how to clone GitHub repo.

Looking at the second link you posted, are we importing @types/react to global namespace?

Yes. It is what I want to do.
Please clone and play with the first gist link which is the key to this issue.
The first gist only depends on Typescript.

[aminpaks]

I just realized what you mean. You're right this has nothing to do with DefinitelyType project.

Should not it be like this:

// global.d.ts
declare namespace React {
  function createRef(): any;
}

// emits.ts
console.log('hello');
React.createRef;

[magic-akari]

For someone run into this issue, try this code below:

// global.d.ts
declare global {
  export namespace React {}
}

export {};

It works in current version typescript like the original code in [email protected].
Not sure if the original code is wrong or not.

---

Thank you for your patience @aminpaks .

[Ciantic]

I'm getting this with 3.2.x series but with 3.1.x series it works.

I use this in my own typings:

declare var React: typeof import("react");

This has nothing to do with definitelytyped btw.

The idea is to declare a global variable React with same type as "react" the module, for these old scripts that does not use imports.

Edit The given workaround does not seem to work. If there is something wrong with the above code I gave, I'd like to know how to fix it. I kind of depend on having global variable called "React".