diff --git a/src/App.js b/src/App.js
index 08856c4ef..4b5f17c6d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ import WelcomeScreen from './chrome/WelcomeScreen.tsx';
 import TitleBar from './chrome/TitleBar.tsx';
 import MainSidebar from './chrome/MainSidebar.js';
 import BugReporterDialog from './chrome/BugReporterDialog.js';
-import ErrorBar from './chrome/ErrorBar.js';
+import ErrorBar from './chrome/ErrorBar.tsx';
 import ShareSheet from './chrome/ShareSheet.js';
 import SignInSheet from './chrome/SignInSheet.js';
 import ExportDataPluginSheet from './chrome/ExportDataPluginSheet.js';
diff --git a/src/chrome/ErrorBar.js b/src/chrome/ErrorBar.tsx
similarity index 81%
rename from src/chrome/ErrorBar.js
rename to src/chrome/ErrorBar.tsx
index 7a580508d..cc49d922e 100644
--- a/src/chrome/ErrorBar.js
+++ b/src/chrome/ErrorBar.tsx
@@ -6,6 +6,7 @@
  */
 
 import {styled, colors} from 'flipper';
+import React from 'react';
 
 const ErrorBarContainer = styled('div')({
   backgroundColor: colors.cherry,
@@ -19,7 +20,11 @@ const ErrorBarContainer = styled('div')({
   zIndex: 2,
 });
 
-export default function ErrorBar(props: {|text: ?string|}) {
+type Props = {
+  text: string | null | undefined;
+};
+
+export default function ErrorBar(props: Props) {
   if (props.text == null) {
     return null;
   } else {