diff --git a/src/ui/components/PathBreadcrumbs.js b/src/ui/components/PathBreadcrumbs.tsx
similarity index 74%
rename from src/ui/components/PathBreadcrumbs.js
rename to src/ui/components/PathBreadcrumbs.tsx
index d8bc5f1ac..acb1a3b9b 100644
--- a/src/ui/components/PathBreadcrumbs.js
+++ b/src/ui/components/PathBreadcrumbs.tsx
@@ -5,17 +5,17 @@
  * @format
  */
 
-import ButtonGroup from './ButtonGroup.js';
+import ButtonGroup from './ButtonGroup';
 import {Component} from 'react';
-import Button from './Button.js';
-
-const path = require('path');
+import Button from './Button';
+import path from 'path';
+import React from 'react';
 
 class PathBreadcrumbsItem extends Component<{
-  name: string,
-  path: string,
-  isFolder: boolean,
-  onClick: (path: string) => void,
+  name: string;
+  path: string;
+  isFolder: boolean;
+  onClick: (path: string) => void;
 }> {
   onClick = () => {
     this.props.onClick(this.props.path);
@@ -26,11 +26,11 @@ class PathBreadcrumbsItem extends Component<{
   }
 }
 
-export default function PathBreadcrumbs(props: {|
-  path: string,
-  isFile?: boolean,
-  onClick: (path: string) => void,
-|}) {
+export default function PathBreadcrumbs(props: {
+  path: string;
+  isFile?: boolean;
+  onClick: (path: string) => void;
+}) {
   const parts = props.path === path.sep ? [''] : props.path.split(path.sep);
   const {onClick} = props;
 
diff --git a/src/ui/index.js b/src/ui/index.js
index 67a4f74ad..477b00d56 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -128,7 +128,7 @@ export {default as Panel} from './components/Panel.tsx';
 export {default as Text} from './components/Text.js';
 export {default as TextParagraph} from './components/TextParagraph.js';
 export {default as Link} from './components/Link.js';
-export {default as PathBreadcrumbs} from './components/PathBreadcrumbs.js';
+export {default as PathBreadcrumbs} from './components/PathBreadcrumbs.tsx';
 export {default as ModalOverlay} from './components/ModalOverlay.tsx';
 export {default as Tooltip} from './components/Tooltip.js';
 export {default as TooltipProvider} from './components/TooltipProvider.js';