diff --git a/extensions/cornerstone-dicom-sr/src/index.tsx b/extensions/cornerstone-dicom-sr/src/index.tsx
index ff0c9e3cf..b6ca6efd2 100644
--- a/extensions/cornerstone-dicom-sr/src/index.tsx
+++ b/extensions/cornerstone-dicom-sr/src/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
 import { srProtocol } from './getHangingProtocolModule';
+import onModeEnter from './onModeEnter';
 import getCommandsModule from './commandsModule';
 import preRegistration from './init';
 import { id } from './id.js';
@@ -8,8 +9,6 @@ import toolNames from './tools/toolNames';
 import hydrateStructuredReport from './utils/hydrateStructuredReport';
 import createReferencedImageDisplaySet from './utils/createReferencedImageDisplaySet';
 import Enums from './enums';
-import { ViewportActionButton } from '@ohif/ui';
-import i18n from '@ohif/i18n';
 
 const Component = React.lazy(() => {
   return import(/* webpackPrefetch: true */ './components/OHIFCornerstoneSRViewport');
@@ -32,29 +31,7 @@ const dicomSRExtension = {
    */
   id,
 
-  onModeEnter({ servicesManager }) {
-    const { toolbarService } = servicesManager.services;
-
-    toolbarService.addButtons([
-      {
-        // A base/default button for loading measurements. It is added to the toolbar below.
-        // Customizations to this button can be made in the mode or by another extension.
-        // For example, the button label can be changed and/or the command to clear
-        // the measurements can be dropped.
-        id: 'loadSRMeasurements',
-        component: props => (
-          <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
-        ),
-        props: {
-          commands: ['clearMeasurements', 'loadSRMeasurements'],
-        },
-      },
-    ]);
-
-    // The toolbar used in the viewport's status bar. Modes and extensions can further customize
-    // it to optionally add other buttons.
-    toolbarService.createButtonSection('loadSRMeasurements', ['loadSRMeasurements']);
-  },
+  onModeEnter,
 
   preRegistration,
 
diff --git a/extensions/cornerstone-dicom-sr/src/onModeEnter.js b/extensions/cornerstone-dicom-sr/src/onModeEnter.js
deleted file mode 100644
index a23877204..000000000
--- a/extensions/cornerstone-dicom-sr/src/onModeEnter.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
-
-export default function onModeEnter({ servicesManager }) {
-  const { displaySetService } = servicesManager.services;
-  const displaySetCache = displaySetService.getDisplaySetCache();
-
-  const srDisplaySets = [...displaySetCache.values()].filter(
-    ds => ds.SOPClassHandlerId === SOPClassHandlerId || ds.SOPClassHandlerId === SOPClassHandlerId3D
-  );
-
-  srDisplaySets.forEach(ds => {
-    // New mode route, allow SRs to be hydrated again
-    ds.isHydrated = false;
-  });
-}
diff --git a/extensions/cornerstone-dicom-sr/src/onModeEnter.tsx b/extensions/cornerstone-dicom-sr/src/onModeEnter.tsx
new file mode 100644
index 000000000..603e46f9b
--- /dev/null
+++ b/extensions/cornerstone-dicom-sr/src/onModeEnter.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
+import { ViewportActionButton } from '@ohif/ui';
+import i18n from '@ohif/i18n';
+
+export default function onModeEnter({ servicesManager }) {
+  const { displaySetService, toolbarService } = servicesManager.services;
+  const displaySetCache = displaySetService.getDisplaySetCache();
+
+  const srDisplaySets = [...displaySetCache.values()].filter(
+    ds => ds.SOPClassHandlerId === SOPClassHandlerId || ds.SOPClassHandlerId === SOPClassHandlerId3D
+  );
+
+  srDisplaySets.forEach(ds => {
+    // New mode route, allow SRs to be hydrated again
+    ds.isHydrated = false;
+  });
+
+  toolbarService.addButtons([
+    {
+      // A base/default button for loading measurements. It is added to the toolbar below.
+      // Customizations to this button can be made in the mode or by another extension.
+      // For example, the button label can be changed and/or the command to clear
+      // the measurements can be dropped.
+      id: 'loadSRMeasurements',
+      component: props => (
+        <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
+      ),
+      props: {
+        commands: ['clearMeasurements', 'loadSRMeasurements'],
+      },
+    },
+  ]);
+
+  // The toolbar used in the viewport's status bar. Modes and extensions can further customize
+  // it to optionally add other buttons.
+  toolbarService.createButtonSection('loadSRMeasurements', ['loadSRMeasurements']);
+}