react-native-reanimated: Reanimated 2.5.0 breaks type checks

Description

Using the latest version, typescript checks are failing with a bunch of errors.

node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(2,3): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(3,3): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(4,3): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(5,3): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(6,3): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(7,3): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(10,22): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(11,22): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/animation/index.ts(12,21): error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
node_modules/react-native-reanimated/src/reanimated2/core.ts(17,8): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
node_modules/react-native-reanimated/src/reanimated2/core.ts(21,12): error TS2339: Property '_setGlobalConsole' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/core.ts(23,10): error TS2339: Property '_setGlobalConsole' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/core.ts(102,8): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
node_modules/react-native-reanimated/src/reanimated2/core.ts(132,8): error TS2339: Property '_WORKLET' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/core.ts(133,8): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
node_modules/react-native-reanimated/src/reanimated2/core.ts(383,16): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
node_modules/react-native-reanimated/src/reanimated2/core.ts(384,14): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
node_modules/react-native-reanimated/src/reanimated2/core.ts(385,21): error TS2339: Property '_chronoNow' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts(17,10): error TS2339: Property '_frameTimestamp' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts(18,10): error TS2339: Property '_setGlobalConsole' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts(18,31): error TS7006: Parameter '_val' implicitly has an 'any' type.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts(21,10): error TS2339: Property '_measure' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts(34,10): error TS2339: Property '_scrollTo' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts(39,10): error TS2339: Property '_setGestureState' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/JSReanimated.ts(19,47): error TS2339: Property 'ReanimatedDataMock' does not exist on type 'typeof globalThis'.
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/JSReanimated.ts(21,40): error TS2304: Cannot find name 'window'.
node_modules/react-native-reanimated/src/reanimated2/NativeReanimated/NativeReanimated.ts(14,16): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
node_modules/react-native-reanimated/src/reanimated2/NativeReanimated/NativeReanimated.ts(18,37): error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.

Expected behavior

Lib is working the same way as before.

Actual behavior & steps to reproduce

Type errors which are blocking me from using that newer release. Is should be quite well reproducable by using the latest version and a standard RN project. My tsconfig options are using the recommended values provided by expo and RN.

Snack or minimal code example

I am using the following tsconfig in my project:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,

    /* Strict Type-Checking Options */
    "strict": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": { "@/*": ["./*"] },
    "typeRoots": ["./@types", "./node_modules/@types"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

Package versions

name	version
react-native	0.67.4
react-native-reanimated	2.5.0
NodeJS	16.14.0
Xcode	13.3
Java	11
Gradle
expo	44

Affected platforms

Android
iOS
Web

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 42
Comments: 19 (5 by maintainers)

Commits related to this issue

Reanimated 2.5.0 type check fix (#3101) ## Description Importing types like this `export type TimingAnimation = import('./src/reanimated2/animation/index').TimingAnimation;` is causing TypeScript ... — committed to software-mansion/react-native-reanimated by scyrych 2 years ago

Most upvoted comments

@haveneersrobin thanks!

I hope this issue will be resolved soon by reanimated team

+11

tr3v3r on Mar 22, 2022

This issue seems to be still there in 2.8.0 (which is the version compatible with the latest expo@45).

See https://github.com/nearform/optic-expo/runs/7326068292?check_suite_focus=true#step:6:7

+10

simoneb on Jul 13, 2022

I have just released the new version 2.6.0 with the fix.

+10

piaskowyk on Apr 4, 2022

Reverting the type import/exports and augmenting some other types, seems to work for me. Here is the patch:

diff --git a/node_modules/react-native-reanimated/react-native-reanimated.d.ts b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
index a3aafb2..5af4d5e 100644
--- a/node_modules/react-native-reanimated/react-native-reanimated.d.ts
+++ b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
@@ -39,24 +39,16 @@ declare module 'react-native-reanimated' {
     PanGestureHandlerGestureEvent,
   } from 'react-native-gesture-handler';
 
-  import('./src/reanimated2/globals');
-
-  export type TimingAnimation =
-    import('./src/reanimated2/animation/index').TimingAnimation;
-  export type SpringAnimation =
-    import('./src/reanimated2/animation/index').SpringAnimation;
-  export type DecayAnimation =
-    import('./src/reanimated2/animation/index').DecayAnimation;
-  export type DelayAnimation =
-    import('./src/reanimated2/animation/commonTypes').DelayAnimation;
-  export type RepeatAnimation =
-    import('./src/reanimated2/animation/index').RepeatAnimation;
-  export type SequenceAnimation =
-    import('./src/reanimated2/animation/index').SequenceAnimation;
-  export type StyleLayoutAnimation =
-    import('./src/reanimated2/animation/index').StyleLayoutAnimation;
-  export type Animation<T> =
-    import('./src/reanimated2/commonTypes').Animation<T>;
+  export {
+    Animation,
+    TimingAnimation,
+    SpringAnimation,
+    DecayAnimation,
+    DelayAnimation,
+    RepeatAnimation,
+    SequenceAnimation,
+    StyleLayoutAnimation,
+  } from './src/reanimated2/animation/index';
 
   namespace Animated {
     type Nullable<T> = T | null | undefined;
diff --git a/node_modules/react-native-reanimated/src/reanimated2/animation/index.ts b/node_modules/react-native-reanimated/src/reanimated2/animation/index.ts
index f9173e7..6b922c2 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/animation/index.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/animation/index.ts
@@ -1,4 +1,4 @@
-export {
+export type {
   HigherOrderAnimation,
   NextAnimation,
   DelayAnimation,
@@ -7,9 +7,12 @@ export {
   StyleLayoutAnimation,
 } from './commonTypes';
 export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
-export { withTiming, TimingAnimation } from './timing';
-export { withSpring, SpringAnimation } from './spring';
-export { withDecay, DecayAnimation } from './decay';
+export { withTiming } from './timing';
+export type {  TimingAnimation } from './timing';
+export { withSpring } from './spring';
+export type { SpringAnimation } from './spring';
+export { withDecay } from './decay';
+export type { DecayAnimation } from './decay';
 export { withDelay } from './delay';
 export { withRepeat } from './repeat';
 export { withSequence } from './sequence';

haveneersrobin on Mar 21, 2022

any update on this?

sergey-king on Sep 12, 2022

@haveneersrobin I used your solution, it works great for those types that need to be exported with the “type” qualifier.

I’m also running into several errors with the global declaration. i.e. Error: node_modules/react-native-reanimated/src/reanimated2/core.ts:21:12 - error TS2339: Property '_setGlobalConsole' does not exist on type 'typeof globalThis'.

I checked the global.d.ts file and that method (and others that are erroring) are declared, not sure how to fix that one. It should be noted that OP’s error stack above lists those same global errors.

enlightenedpie on Mar 23, 2022

@enlightenedpie you should not create a new issue if it is the same as what is mentioned here 😃 Just so we have it all in one place. Also, you have just created a ‘solution’, that’s not what the issue tracker is for.

On the other hand: are you sure you’ve correctly applied my patch, because that normally fixes all the problems you’ve mentioned. Deleting the line import('./src/reanimated2/globals'); is what fixes the typeof globalThis issues.

haveneersrobin on Mar 24, 2022

You can use reanimated 3

piaskowyk on Dec 18, 2023

Any way someone could point me in the correct direction.

It doesn’t appear to be able to find any of the items which are listed as global at the top of core.ts when running tsc

/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */

I have gone over the patch several times and I get these errors after applying it.

node_modules/react-native-reanimated/src/reanimated2/core.ts:172:9 - error TS2552: Cannot find name '_frameTimestamp'. Did you mean '_getTimestamp'?

172     if (_frameTimestamp) {
            ~~~~~~~~~~~~~~~

  node_modules/react-native-reanimated/src/reanimated2/core.ts:164:5
    164 let _getTimestamp: () => number;
            ~~~~~~~~~~~~~
    '_getTimestamp' is declared here.

node_modules/react-native-reanimated/src/reanimated2/core.ts:175:9 - error TS2304: Cannot find name '_eventTimestamp'.

175     if (_eventTimestamp) {
            ~~~~~~~~~~~~~~~

node_modules/react-native-reanimated/src/reanimated2/core.ts:178:12 - error TS2304: Cannot find name '_getCurrentTime'.

178     return _getCurrentTime();
               ~~~~~~~~~~~~~~~

node_modules/react-native-reanimated/src/reanimated2/core.ts:353:8 - error TS2304: Cannot find name '_WORKLET'.
353   if (!_WORKLET) {
           ~~~~~~~~
node_modules/react-native-reanimated/src/reanimated2/core.ts:382:5 - error TS2304: Cannot find name '_setGlobalConsole'.

382     _setGlobalConsole(console);
        ~~~~~~~~~~~~~~~~~
node_modules/react-native-reanimated/src/reanimated2/js-reanimated/JSReanimated.ts:21:40 - error TS2304: Cannot find name 'window'.
21       this.timeProvider = { now: () => window.performance.now() };

JShefferCorp on Mar 25, 2022