diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index a058648176..c59b58ea06 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as Sentry from '@sentry/react';
 import TriggerButton from './components/TriggerButton';
 import Notification from './components/Notification';
@@ -13,8 +14,6 @@ import NotificationParser from './utils/notifications';
 import {allowCompMemberUpgrade, createPopupNotification, getCurrencySymbol, getFirstpromoterId, getPriceIdFromPageQuery, getProductCadenceFromPrice, getProductFromId, getQueryPrice, getSiteDomain, isActiveOffer, isComplimentaryMember, isInviteOnlySite, isPaidMember, isSentryEventAllowed, removePortalLinkFromUrl} from './utils/helpers';
 import {handleDataAttributes} from './data-attributes';
 
-const React = require('react');
-
 const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
diff --git a/ghost/portal/src/AppContext.js b/ghost/portal/src/AppContext.js
index f402b7d5d7..73555c60bb 100644
--- a/ghost/portal/src/AppContext.js
+++ b/ghost/portal/src/AppContext.js
@@ -1,5 +1,5 @@
 // Ref: https://reactjs.org/docs/context.html
-const React = require('react');
+import React from 'react';
 
 const AppContext = React.createContext({
     site: {},
diff --git a/ghost/portal/src/components/Notification.js b/ghost/portal/src/components/Notification.js
index c125f26ca8..0ba6a3f440 100644
--- a/ghost/portal/src/components/Notification.js
+++ b/ghost/portal/src/components/Notification.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Frame from './Frame';
 import AppContext from '../AppContext';
 import NotificationStyle from './Notification.styles';
@@ -7,8 +8,6 @@ import {ReactComponent as WarningIcon} from '../images/icons/warning-fill.svg';
 import NotificationParser, {clearURLParams} from '../utils/notifications';
 import {getPortalLink} from '../utils/helpers';
 
-const React = require('react');
-
 const Styles = () => {
     return {
         frame: {
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 1c47241020..77b6b85ecb 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Frame from './Frame';
 import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
@@ -7,8 +8,6 @@ import PopupNotification from './common/PopupNotification';
 import PoweredBy from './common/PoweredBy';
 import {getSiteProducts, isInviteOnlySite, isCookiesDisabled, hasFreeProductPrice} from '../utils/helpers';
 
-const React = require('react');
-
 const StylesWrapper = ({member}) => {
     return {
         modalContainer: {
diff --git a/ghost/portal/src/components/TriggerButton.js b/ghost/portal/src/components/TriggerButton.js
index da49d2fc73..ce6d05a798 100644
--- a/ghost/portal/src/components/TriggerButton.js
+++ b/ghost/portal/src/components/TriggerButton.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Frame from './Frame';
 import MemberGravatar from './common/MemberGravatar';
 import AppContext from '../AppContext';
@@ -11,8 +12,6 @@ import TriggerButtonStyle from './TriggerButton.styles';
 import {isInviteOnlySite} from '../utils/helpers';
 import {hasMode} from '../utils/check-mode';
 
-const React = require('react');
-
 const ICON_MAPPING = {
     'icon-1': ButtonIcon1,
     'icon-2': ButtonIcon2,
diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
index 5278f806bd..b1245e9b31 100644
--- a/ghost/portal/src/components/common/NewsletterManagement.js
+++ b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -1,14 +1,12 @@
 import AppContext from '../../AppContext';
 import CloseButton from '../common/CloseButton';
 import BackButton from '../common/BackButton';
-import {useContext, useState} from 'react';
+import React, {useContext, useState} from 'react';
 import Switch from '../common/Switch';
 import {getSiteNewsletters, hasMemberGotEmailSuppression} from '../../utils/helpers';
 import ActionButton from '../common/ActionButton';
 import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.svg';
 
-const React = require('react');
-
 function AccountHeader() {
     const {brandColor, lastPage, onAction, t} = useContext(AppContext);
     return (
diff --git a/ghost/portal/src/components/pages/AccountEmailPage.js b/ghost/portal/src/components/pages/AccountEmailPage.js
index e5b482de5a..4e31ba34a2 100644
--- a/ghost/portal/src/components/pages/AccountEmailPage.js
+++ b/ghost/portal/src/components/pages/AccountEmailPage.js
@@ -1,10 +1,8 @@
 import AppContext from '../../AppContext';
-import {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {isPaidMember} from '../../utils/helpers';
 import NewsletterManagement from '../common/NewsletterManagement';
 
-const React = require('react');
-
 export default function AccountEmailPage() {
     const {member, onAction, site, t} = useContext(AppContext);
 
diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js
index 215b894504..ac0ae60bda 100644
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@@ -1,4 +1,4 @@
-import {useContext, useState} from 'react';
+import React, {useContext, useState} from 'react';
 import AppContext from '../../AppContext';
 import ActionButton from '../common/ActionButton';
 import CloseButton from '../common/CloseButton';
@@ -38,8 +38,6 @@ export const AccountPlanPageStyles = `
     }
 `;
 
-const React = require('react');
-
 function getConfirmationPageTitle({confirmationType}) {
     if (confirmationType === 'changePlan') {
         return 'Confirm subscription';
diff --git a/ghost/portal/src/components/pages/AccountProfilePage.js b/ghost/portal/src/components/pages/AccountProfilePage.js
index dad30ee304..5a298c26a9 100644
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import AppContext from '../../AppContext';
 import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
@@ -6,8 +7,6 @@ import BackButton from '../common/BackButton';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
 
-const React = require('react');
-
 export default class AccountProfilePage extends React.Component {
     static contextType = AppContext;
 
diff --git a/ghost/portal/src/components/pages/FeedbackPage.js b/ghost/portal/src/components/pages/FeedbackPage.js
index 241ee6cdd0..22ee61f7fd 100644
--- a/ghost/portal/src/components/pages/FeedbackPage.js
+++ b/ghost/portal/src/components/pages/FeedbackPage.js
@@ -1,4 +1,4 @@
-import {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import AppContext from '../../AppContext';
 import {ReactComponent as ThumbDownIcon} from '../../images/icons/thumbs-down.svg';
 import {ReactComponent as ThumbUpIcon} from '../../images/icons/thumbs-up.svg';
@@ -9,8 +9,6 @@ import ActionButton from '../common/ActionButton';
 import CloseButton from '../common/CloseButton';
 import LoadingPage from './LoadingPage';
 
-const React = require('react');
-
 export const FeedbackPageStyles = `
     .gh-portal-feedback {
 
diff --git a/ghost/portal/src/components/pages/LoadingPage.js b/ghost/portal/src/components/pages/LoadingPage.js
index 2034812df0..40778ef3c8 100644
--- a/ghost/portal/src/components/pages/LoadingPage.js
+++ b/ghost/portal/src/components/pages/LoadingPage.js
@@ -1,5 +1,6 @@
+import React from 'react';
 import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
-const React = require('react');
+
 export default class LoadingPage extends React.Component {
     render() {
         return (
diff --git a/ghost/portal/src/components/pages/MagicLinkPage.js b/ghost/portal/src/components/pages/MagicLinkPage.js
index 1c47b9a5d9..9b9008323f 100644
--- a/ghost/portal/src/components/pages/MagicLinkPage.js
+++ b/ghost/portal/src/components/pages/MagicLinkPage.js
@@ -1,10 +1,9 @@
+import React from 'react';
 import ActionButton from '../common/ActionButton';
 import CloseButton from '../common/CloseButton';
 import AppContext from '../../AppContext';
 import {ReactComponent as EnvelopeIcon} from '../../images/icons/envelope.svg';
 
-const React = require('react');
-
 export const MagicLinkStyles = `
     .gh-portal-icon-envelope {
         width: 44px;
diff --git a/ghost/portal/src/components/pages/NewsletterSelectionPage.js b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
index 51b82e2a5c..a0e84b8d5b 100644
--- a/ghost/portal/src/components/pages/NewsletterSelectionPage.js
+++ b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
@@ -1,12 +1,10 @@
 import AppContext from '../../AppContext';
-import {useContext, useState} from 'react';
+import React, {useContext, useState} from 'react';
 import Switch from '../common/Switch';
 import {getSiteNewsletters} from '../../utils/helpers';
 import ActionButton from '../common/ActionButton';
 import {ReactComponent as LockIcon} from '../../images/icons/lock.svg';
 
-const React = require('react');
-
 function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribedNewsletters}) {
     const isChecked = subscribedNewsletters.some((d) => {
         return d.id === newsletter?.id;
diff --git a/ghost/portal/src/components/pages/OfferPage.js b/ghost/portal/src/components/pages/OfferPage.js
index c494b15e13..e84ee0808a 100644
--- a/ghost/portal/src/components/pages/OfferPage.js
+++ b/ghost/portal/src/components/pages/OfferPage.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import ActionButton from '../common/ActionButton';
 import AppContext from '../../AppContext';
 import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
@@ -6,7 +7,6 @@ import InputForm from '../common/InputForm';
 import {getCurrencySymbol, getProductFromId, hasMultipleProductsFeature, isSameCurrency, formatNumber, hasMultipleNewsletters} from '../../utils/helpers';
 import {ValidateInputForm} from '../../utils/form';
 import NewsletterSelectionPage from './NewsletterSelectionPage';
-const React = require('react');
 
 export const OfferPageStyles = ({site}) => {
     return `
diff --git a/ghost/portal/src/components/pages/SigninPage.js b/ghost/portal/src/components/pages/SigninPage.js
index a03e219f98..15b2bc4886 100644
--- a/ghost/portal/src/components/pages/SigninPage.js
+++ b/ghost/portal/src/components/pages/SigninPage.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import ActionButton from '../common/ActionButton';
 import CloseButton from '../common/CloseButton';
 // import SiteTitleBackButton from '../common/SiteTitleBackButton';
@@ -5,8 +6,6 @@ import AppContext from '../../AppContext';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
 
-const React = require('react');
-
 export default class SigninPage extends React.Component {
     static contextType = AppContext;
 
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index e0c55589f5..6fefaf900c 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import ActionButton from '../common/ActionButton';
 import AppContext from '../../AppContext';
 import CloseButton from '../common/CloseButton';
@@ -9,8 +10,6 @@ import {ValidateInputForm} from '../../utils/form';
 import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription, hasFreeProductPrice, hasMultipleNewsletters, hasFreeTrialTier} from '../../utils/helpers';
 import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
 
-const React = require('react');
-
 export const SignupPageStyles = `
 .gh-portal-back-sitetitle {
     position: absolute;
diff --git a/ghost/portal/src/components/pages/UnsubscribePage.js b/ghost/portal/src/components/pages/UnsubscribePage.js
index dbcb441008..fa21ee433e 100644
--- a/ghost/portal/src/components/pages/UnsubscribePage.js
+++ b/ghost/portal/src/components/pages/UnsubscribePage.js
@@ -1,14 +1,12 @@
 import AppContext from '../../AppContext';
 import ActionButton from '../common/ActionButton';
-import {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {getSiteNewsletters} from '../../utils/helpers';
 import setupGhostApi from '../../utils/api';
 import NewsletterManagement from '../common/NewsletterManagement';
 import CloseButton from '../common/CloseButton';
 import {ReactComponent as WarningIcon} from '../../images/icons/warning-fill.svg';
 
-const React = require('react');
-
 function SiteLogo() {
     const {site} = useContext(AppContext);
     const siteLogo = site.icon;