diff --git a/src/ui/components/ErrorBlock.js b/src/ui/components/ErrorBlock.tsx
similarity index 88%
rename from src/ui/components/ErrorBlock.js
rename to src/ui/components/ErrorBlock.tsx
index bf7f9c577..7e54411df 100644
--- a/src/ui/components/ErrorBlock.js
+++ b/src/ui/components/ErrorBlock.tsx
@@ -5,9 +5,9 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 import React from 'react';
-import CodeBlock from './CodeBlock.js';
+import CodeBlock from './CodeBlock';
 
 export const ErrorBlockContainer = styled(CodeBlock)({
   backgroundColor: '#f2dede',
@@ -23,9 +23,9 @@ export const ErrorBlockContainer = styled(CodeBlock)({
  */
 export default class ErrorBlock extends React.Component<{
   /** Error message to display. Error object's `stack` or `message` property is used. */
-  error: Error | string | void,
+  error: Error | string | void;
   /** Additional className added to the container. */
-  className?: string,
+  className?: string;
 }> {
   render() {
     const {className, error} = this.props;
diff --git a/src/ui/index.js b/src/ui/index.js
index 7b19e579c..20b572a78 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -80,8 +80,8 @@ export {default as Checkbox} from './components/Checkbox.js';
 export {default as CodeBlock} from './components/CodeBlock.js';
 
 // error
-export {default as ErrorBlock} from './components/ErrorBlock.js';
-export {ErrorBlockContainer} from './components/ErrorBlock.js';
+export {default as ErrorBlock} from './components/ErrorBlock.tsx';
+export {ErrorBlockContainer} from './components/ErrorBlock.tsx';
 export {default as ErrorBoundary} from './components/ErrorBoundary.tsx';
 
 // interactive components