I'm upgrading this react-native 0.64 to 0.67 project.
The project uses flow as its typechecking language. We are also migrating it to typescript, but that's not the scope of the current error and we better keep on running the command line flow to see if the existing flow files are well typed without errors.
Apparently react-native is created with flow typechecking. So there are some flow types shipped within react-native. The problem is that one global.js type declaration uses symbol type which was introduced only by flow 0.114.
Our current flow-bin version is 0.92.1. If we upgrade flow it gives hundreds of errors. And as we are migrating to typescript we don't want to upgrade flow.
The global.js file that introduces this bug looks like the following:
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict
* @format
*/
/**
* `global` is a object containing all the global variables for React Native.
*
* NOTE: Consider cross-platform as well as JS environments compatibility
* when defining the types here. Consider both presence (`?`) as well as
* writeability (`+`) when defining types.
*/
declare var global: {
// setUpGlobals
+window: typeof global,
+self: typeof global,
// setXHR
+XMLHttpRequest: typeof XMLHttpRequest,
+FormData: typeof FormData,
+fetch: typeof fetch,
+Headers: typeof Headers,
+Request: typeof Request,
+Response: typeof Response,
+WebSocket: typeof WebSocket,
+Blob: typeof Blob,
+File: typeof File,
+FileReader: typeof FileReader,
+URL: typeof URL,
+URLSearchParams: typeof URLSearchParams,
+AbortController: typeof AbortController,
+AbortSignal: typeof AbortSignal,
// setUpAlert
+alert: typeof alert,
// setUpTimers
+clearInterval: typeof clearInterval,
+clearTimeout: typeof clearTimeout,
+setInterval: typeof setInterval,
+setTimeout: typeof setTimeout,
+requestAnimationFrame: typeof requestAnimationFrame,
+cancelAnimationFrame: typeof cancelAnimationFrame,
+requestIdleCallback: typeof requestIdleCallback,
+cancelIdleCallback: typeof cancelIdleCallback,
+setTimeout: typeof setTimeout,
// TODO(T97509743): use `typeof` when the next Flow release is available.
+queueMicrotask: <TArguments: Array<mixed>>(
jobCallback: (...args: TArguments) => mixed,
) => void,
+console: typeof console,
// JavaScript environments specific
+HermesInternal: ?$HermesInternalType,
// Internal-specific
+__DEV__?: boolean,
+RN$Bridgeless?: boolean,
// Undeclared properties are implicitly `any`.
[string | symbol]: any,
};
So when running npm run flow it returns the following error:
Cannot resolve name symbol
I fixed it by maintaining the same flow version and just defining a new type called symbol. I had to create this folder flow-typed in my project then a new file inside it called myLibDef.js and declare
declare type symbol = any;