diff --git a/mailpoet/assets/js/src/analytics.js b/mailpoet/assets/js/src/analytics.js
index 3e3031ce50..a52989c922 100644
--- a/mailpoet/assets/js/src/analytics.js
+++ b/mailpoet/assets/js/src/analytics.js
@@ -1,8 +1,8 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 let trackingDataLoading = null;
 
-function getTrackingData() {
+export function getTrackingData() {
   if (!trackingDataLoading) {
     trackingDataLoading = MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -12,5 +12,3 @@ function getTrackingData() {
   }
   return trackingDataLoading;
 }
-
-export default getTrackingData;
diff --git a/mailpoet/assets/js/src/announcements/feature_announcement.tsx b/mailpoet/assets/js/src/announcements/feature_announcement.tsx
index 2eac82cd7f..17428bab64 100644
--- a/mailpoet/assets/js/src/announcements/feature_announcement.tsx
+++ b/mailpoet/assets/js/src/announcements/feature_announcement.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
+import classnames from 'classnames';
+import { MailPoet } from 'mailpoet';
 import { withFeatureAnnouncement } from './with_feature_announcement';
 
 type Props = {
@@ -7,8 +7,8 @@ type Props = {
   onBeamerClick: () => void;
 };
 
-function FeatureAnnouncement({ hasNews, onBeamerClick }: Props) {
-  const buttonClasses = classNames(
+function FeatureAnnouncementComponent({ hasNews, onBeamerClick }: Props) {
+  const buttonClasses = classnames(
     'button mailpoet_feature_announcement_button',
     hasNews ? 'mailpoet_feature_announcement_dot' : '',
   );
@@ -27,4 +27,7 @@ function FeatureAnnouncement({ hasNews, onBeamerClick }: Props) {
   );
 }
 
-export default withFeatureAnnouncement(FeatureAnnouncement);
+const FeatureAnnouncement = withFeatureAnnouncement(
+  FeatureAnnouncementComponent,
+);
+export { FeatureAnnouncement };
diff --git a/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx b/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx
index 52f3633e16..fa197a8269 100644
--- a/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx
+++ b/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx
@@ -1,5 +1,5 @@
 import { ComponentType, FC } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 import jQuery from 'jquery';
 import { noop } from 'lodash';
diff --git a/mailpoet/assets/js/src/common/background/_stories/background.tsx b/mailpoet/assets/js/src/common/background/_stories/background.tsx
index 8fae9cb5ba..5292071bcd 100644
--- a/mailpoet/assets/js/src/common/background/_stories/background.tsx
+++ b/mailpoet/assets/js/src/common/background/_stories/background.tsx
@@ -1,4 +1,4 @@
-import Background from '../background';
+import { Background } from '../background';
 
 export default {
   title: 'Background',
diff --git a/mailpoet/assets/js/src/common/background/background.tsx b/mailpoet/assets/js/src/common/background/background.tsx
index 882f2ef66b..fc952e943c 100644
--- a/mailpoet/assets/js/src/common/background/background.tsx
+++ b/mailpoet/assets/js/src/common/background/background.tsx
@@ -2,7 +2,7 @@ type Props = {
   color: string;
 };
 
-function Background({ color }: Props) {
+export function Background({ color }: Props) {
   return (
     <style
       /* eslint-disable-next-line react/no-danger */
@@ -10,5 +10,3 @@ function Background({ color }: Props) {
     />
   );
 }
-
-export default Background;
diff --git a/mailpoet/assets/js/src/common/badge/_stories/badge.tsx b/mailpoet/assets/js/src/common/badge/_stories/badge.tsx
index 833cc5fc6f..c5d1e6d0ee 100644
--- a/mailpoet/assets/js/src/common/badge/_stories/badge.tsx
+++ b/mailpoet/assets/js/src/common/badge/_stories/badge.tsx
@@ -1,4 +1,4 @@
-import Badge from '../badge';
+import { Badge } from '../badge';
 
 export default {
   title: 'Badge',
diff --git a/mailpoet/assets/js/src/common/badge/badge.tsx b/mailpoet/assets/js/src/common/badge/badge.tsx
index febd2cd847..e03e0c42e1 100644
--- a/mailpoet/assets/js/src/common/badge/badge.tsx
+++ b/mailpoet/assets/js/src/common/badge/badge.tsx
@@ -2,8 +2,6 @@ type Props = {
   title: string;
 };
 
-function Badge({ title }: Props) {
+export function Badge({ title }: Props) {
   return <span className="mailpoet-badge">{title}</span>;
 }
-
-export default Badge;
diff --git a/mailpoet/assets/js/src/common/button/_stories/button.tsx b/mailpoet/assets/js/src/common/button/_stories/button.tsx
index 4e3849fc66..be564d6e4f 100644
--- a/mailpoet/assets/js/src/common/button/_stories/button.tsx
+++ b/mailpoet/assets/js/src/common/button/_stories/button.tsx
@@ -1,6 +1,6 @@
 import { action } from '_storybook/action';
-import Button from '../button';
-import Heading from '../../typography/heading/heading';
+import { Button } from '../button';
+import { Heading } from '../../typography/heading/heading';
 
 export default {
   title: 'Buttons',
diff --git a/mailpoet/assets/js/src/common/button/_stories/button_icons.tsx b/mailpoet/assets/js/src/common/button/_stories/button_icons.tsx
index ecf26fafa7..bc1949abcb 100644
--- a/mailpoet/assets/js/src/common/button/_stories/button_icons.tsx
+++ b/mailpoet/assets/js/src/common/button/_stories/button_icons.tsx
@@ -1,7 +1,7 @@
 import { action } from '_storybook/action';
-import Button from '../button';
-import Heading from '../../typography/heading/heading';
-import icon from '../icon/plus';
+import { Button } from '../button';
+import { Heading } from '../../typography/heading/heading';
+import { plusIcon } from '../icon/plus';
 
 export default {
   title: 'Buttons',
@@ -16,7 +16,7 @@ export function WithIcons() {
         <Button
           onClick={action('icon start primary small')}
           dimension="small"
-          iconStart={icon}
+          iconStart={plusIcon}
         >
           Icon start
         </Button>
@@ -24,8 +24,8 @@ export function WithIcons() {
           onClick={action('both icons secondary small')}
           dimension="small"
           variant="secondary"
-          iconStart={icon}
-          iconEnd={icon}
+          iconStart={plusIcon}
+          iconEnd={plusIcon}
         >
           Both icons
         </Button>
@@ -33,19 +33,19 @@ export function WithIcons() {
           onClick={action('only icon secondary small')}
           dimension="small"
           variant="secondary"
-          iconStart={icon}
+          iconStart={plusIcon}
         />
         <Button
           onClick={action('only icon tertiary small')}
           dimension="small"
           variant="tertiary"
-          iconStart={icon}
+          iconStart={plusIcon}
         />
         <Button
           onClick={action('icon end destructive small')}
           dimension="small"
           variant="destructive"
-          iconEnd={icon}
+          iconEnd={plusIcon}
         >
           Icon end
         </Button>
@@ -54,31 +54,34 @@ export function WithIcons() {
 
       <Heading level={3}>Regular buttons</Heading>
       <p>
-        <Button onClick={action('icon start primary regular')} iconStart={icon}>
+        <Button
+          onClick={action('icon start primary regular')}
+          iconStart={plusIcon}
+        >
           Icon start
         </Button>
         <Button
           onClick={action('both icons secondary regular')}
           variant="secondary"
-          iconStart={icon}
-          iconEnd={icon}
+          iconStart={plusIcon}
+          iconEnd={plusIcon}
         >
           Both icons
         </Button>
         <Button
           onClick={action('only icon secondary regular')}
           variant="secondary"
-          iconStart={icon}
+          iconStart={plusIcon}
         />
         <Button
           onClick={action('only icon tertiary regular')}
           variant="tertiary"
-          iconStart={icon}
+          iconStart={plusIcon}
         />
         <Button
           onClick={action('icon end destructive regular')}
           variant="destructive"
-          iconEnd={icon}
+          iconEnd={plusIcon}
         >
           Icon end
         </Button>
@@ -87,15 +90,20 @@ export function WithIcons() {
 
       <Heading level={3}>Disabled buttons</Heading>
       <p>
-        <Button isDisabled iconStart={icon}>
+        <Button isDisabled iconStart={plusIcon}>
           Icon start
         </Button>
-        <Button isDisabled variant="secondary" iconStart={icon} iconEnd={icon}>
+        <Button
+          isDisabled
+          variant="secondary"
+          iconStart={plusIcon}
+          iconEnd={plusIcon}
+        >
           Both icons
         </Button>
-        <Button isDisabled variant="secondary" iconStart={icon} />
-        <Button isDisabled variant="tertiary" iconStart={icon} />
-        <Button isDisabled variant="destructive" iconEnd={icon}>
+        <Button isDisabled variant="secondary" iconStart={plusIcon} />
+        <Button isDisabled variant="tertiary" iconStart={plusIcon} />
+        <Button isDisabled variant="destructive" iconEnd={plusIcon}>
           Icon end
         </Button>
       </p>
@@ -103,15 +111,20 @@ export function WithIcons() {
 
       <Heading level={3}>Buttons with spinner</Heading>
       <p>
-        <Button withSpinner iconStart={icon}>
+        <Button withSpinner iconStart={plusIcon}>
           Icon start
         </Button>
-        <Button withSpinner variant="secondary" iconStart={icon} iconEnd={icon}>
+        <Button
+          withSpinner
+          variant="secondary"
+          iconStart={plusIcon}
+          iconEnd={plusIcon}
+        >
           Both icons
         </Button>
-        <Button withSpinner variant="secondary" iconStart={icon} />
-        <Button withSpinner variant="tertiary" iconStart={icon} />
-        <Button withSpinner variant="destructive" iconEnd={icon}>
+        <Button withSpinner variant="secondary" iconStart={plusIcon} />
+        <Button withSpinner variant="tertiary" iconStart={plusIcon} />
+        <Button withSpinner variant="destructive" iconEnd={plusIcon}>
           Icon end
         </Button>
       </p>
@@ -122,7 +135,7 @@ export function WithIcons() {
         <Button
           onClick={action('icon start primary full-width')}
           isFullWidth
-          iconStart={icon}
+          iconStart={plusIcon}
         >
           Icon start
         </Button>
@@ -130,8 +143,8 @@ export function WithIcons() {
           onClick={action('both icons secondary full-width')}
           isFullWidth
           variant="secondary"
-          iconStart={icon}
-          iconEnd={icon}
+          iconStart={plusIcon}
+          iconEnd={plusIcon}
         >
           Both icons
         </Button>
@@ -139,19 +152,19 @@ export function WithIcons() {
           onClick={action('only icon secondary full-width')}
           isFullWidth
           variant="secondary"
-          iconStart={icon}
+          iconStart={plusIcon}
         />
         <Button
           onClick={action('only icon tertiary full-width')}
           isFullWidth
           variant="tertiary"
-          iconStart={icon}
+          iconStart={plusIcon}
         />
         <Button
           onClick={action('icon end destructive full-width')}
           isFullWidth
           variant="destructive"
-          iconEnd={icon}
+          iconEnd={plusIcon}
         >
           Icon end
         </Button>
diff --git a/mailpoet/assets/js/src/common/button/button.tsx b/mailpoet/assets/js/src/common/button/button.tsx
index 5362a1c9d8..63a27b5467 100644
--- a/mailpoet/assets/js/src/common/button/button.tsx
+++ b/mailpoet/assets/js/src/common/button/button.tsx
@@ -19,7 +19,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
 }
 
-function Button({
+export function Button({
   children,
   dimension,
   variant,
@@ -63,5 +63,3 @@ function Button({
     </Element>
   );
 }
-
-export default Button;
diff --git a/mailpoet/assets/js/src/common/button/icon/plus.tsx b/mailpoet/assets/js/src/common/button/icon/plus.tsx
index f4dd6342c5..176d413d50 100644
--- a/mailpoet/assets/js/src/common/button/icon/plus.tsx
+++ b/mailpoet/assets/js/src/common/button/icon/plus.tsx
@@ -1,4 +1,4 @@
-export default (
+export const plusIcon = (
   <svg viewBox="4 4 16 16">
     <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/categories/_stories/categories.tsx b/mailpoet/assets/js/src/common/categories/_stories/categories.tsx
index 8779e6ed2b..513e458fba 100644
--- a/mailpoet/assets/js/src/common/categories/_stories/categories.tsx
+++ b/mailpoet/assets/js/src/common/categories/_stories/categories.tsx
@@ -1,5 +1,5 @@
 import { noop } from 'lodash';
-import Categories from '../categories';
+import { Categories } from '../categories';
 
 export default {
   title: 'Categories',
diff --git a/mailpoet/assets/js/src/common/categories/categories.tsx b/mailpoet/assets/js/src/common/categories/categories.tsx
index b754bc5817..c54c6755bd 100644
--- a/mailpoet/assets/js/src/common/categories/categories.tsx
+++ b/mailpoet/assets/js/src/common/categories/categories.tsx
@@ -1,4 +1,4 @@
-import CategoriesItem, { Category } from './categories_item';
+import { CategoriesItem, Category } from './categories_item';
 
 type Props = {
   onSelect: (name: string) => void;
@@ -6,7 +6,7 @@ type Props = {
   active: string;
 };
 
-function Categories({ onSelect, categories, active }: Props) {
+export function Categories({ onSelect, categories, active }: Props) {
   const cats = categories.map((category) => (
     <CategoriesItem
       {...category}
@@ -18,5 +18,3 @@ function Categories({ onSelect, categories, active }: Props) {
 
   return <div className="mailpoet-categories">{cats}</div>;
 }
-
-export default Categories;
diff --git a/mailpoet/assets/js/src/common/categories/categories_item.tsx b/mailpoet/assets/js/src/common/categories/categories_item.tsx
index 8fb7320f9d..21104aa93e 100644
--- a/mailpoet/assets/js/src/common/categories/categories_item.tsx
+++ b/mailpoet/assets/js/src/common/categories/categories_item.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 export type Category = {
   name: string;
@@ -12,7 +12,7 @@ type Props = Category & {
   active?: boolean;
 };
 
-function CategoriesItem({
+export function CategoriesItem({
   onSelect,
   name,
   label,
@@ -20,7 +20,7 @@ function CategoriesItem({
   automationId,
   active,
 }: Props) {
-  const classes = classNames('mailpoet-categories-item', { active: !!active });
+  const classes = classnames('mailpoet-categories-item', { active: !!active });
 
   return (
     <a
@@ -44,5 +44,3 @@ function CategoriesItem({
     </a>
   );
 }
-
-export default CategoriesItem;
diff --git a/mailpoet/assets/js/src/common/confirm_alert.jsx b/mailpoet/assets/js/src/common/confirm_alert.jsx
index b9dc174251..a2b79e916d 100644
--- a/mailpoet/assets/js/src/common/confirm_alert.jsx
+++ b/mailpoet/assets/js/src/common/confirm_alert.jsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 import ReactDOMServer from 'react-dom/server';
 
@@ -54,7 +54,7 @@ ConfirmAlert.defaultProps = {
   confirmLabel: MailPoet.I18n.t('confirmLabel'),
 };
 
-export default function confirmAlert(props) {
+export function confirmAlert(props) {
   // the below render is only to invoke proptypes on ConfirmAlert
   ReactDOMServer.renderToString(
     <ConfirmAlert
diff --git a/mailpoet/assets/js/src/common/controls/call_api.ts b/mailpoet/assets/js/src/common/controls/call_api.ts
index 611a976c09..215a2715ce 100644
--- a/mailpoet/assets/js/src/common/controls/call_api.ts
+++ b/mailpoet/assets/js/src/common/controls/call_api.ts
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { isErrorResponse } from '../../ajax';
 
-export default async function callApi({ endpoint, action, data }) {
+export async function callApi({ endpoint, action, data }) {
   try {
     const res = await MailPoet.Ajax.post({
       api_version: MailPoet.apiVersion,
diff --git a/mailpoet/assets/js/src/common/controls/track_event.ts b/mailpoet/assets/js/src/common/controls/track_event.ts
index 5711df149f..06120dec1e 100644
--- a/mailpoet/assets/js/src/common/controls/track_event.ts
+++ b/mailpoet/assets/js/src/common/controls/track_event.ts
@@ -1,11 +1,11 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 const sleep = (ms: number) =>
   new Promise((resolve) => {
     setTimeout(resolve, ms);
   });
 
-export default async function trackEvent({
+export async function trackEvent({
   name,
   data,
   timeout = 0,
diff --git a/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx b/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx
index cbdeb32e4d..8b74d33fde 100644
--- a/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx
+++ b/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { action } from '_storybook/action';
-import Datepicker from '../datepicker';
-import Heading from '../../typography/heading/heading';
-import Icon from '../icon/calendar';
+import { Datepicker } from '../datepicker';
+import { Heading } from '../../typography/heading/heading';
+import { calendarIcon as Icon } from '../icon/calendar';
 
 export default {
   title: 'Datepickers',
diff --git a/mailpoet/assets/js/src/common/datepicker/datepicker.tsx b/mailpoet/assets/js/src/common/datepicker/datepicker.tsx
index 93788a378a..b69aad6a4c 100644
--- a/mailpoet/assets/js/src/common/datepicker/datepicker.tsx
+++ b/mailpoet/assets/js/src/common/datepicker/datepicker.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 type Props = ReactDatePickerProps & {
   dimension?: 'small';
@@ -9,7 +9,7 @@ type Props = ReactDatePickerProps & {
   iconEnd?: JSX.Element;
 };
 
-function Datepicker({
+export function Datepicker({
   dimension,
   isFullWidth,
   iconStart,
@@ -34,5 +34,3 @@ function Datepicker({
     </div>
   );
 }
-
-export default Datepicker;
diff --git a/mailpoet/assets/js/src/common/datepicker/icon/calendar.tsx b/mailpoet/assets/js/src/common/datepicker/icon/calendar.tsx
index 35463a765c..14eea6ac42 100644
--- a/mailpoet/assets/js/src/common/datepicker/icon/calendar.tsx
+++ b/mailpoet/assets/js/src/common/datepicker/icon/calendar.tsx
@@ -1,4 +1,4 @@
-export default (
+export const calendarIcon = (
   <svg viewBox="0 0 24 24">
     <path d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/form/checkbox/_stories/checkbox.tsx b/mailpoet/assets/js/src/common/form/checkbox/_stories/checkbox.tsx
index 20cf87f4f1..137c3b46de 100644
--- a/mailpoet/assets/js/src/common/form/checkbox/_stories/checkbox.tsx
+++ b/mailpoet/assets/js/src/common/form/checkbox/_stories/checkbox.tsx
@@ -1,7 +1,7 @@
 import { action } from '_storybook/action';
-import Checkbox from '../checkbox';
-import CheckboxGroup from '../group';
-import Heading from '../../../typography/heading/heading';
+import { Checkbox } from '../checkbox';
+import { CheckboxGroup } from '../group';
+import { Heading } from '../../../typography/heading/heading';
 
 export default {
   title: 'Form',
diff --git a/mailpoet/assets/js/src/common/form/checkbox/checkbox.tsx b/mailpoet/assets/js/src/common/form/checkbox/checkbox.tsx
index 443c79cc28..13476688ea 100644
--- a/mailpoet/assets/js/src/common/form/checkbox/checkbox.tsx
+++ b/mailpoet/assets/js/src/common/form/checkbox/checkbox.tsx
@@ -8,7 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   automationId?: string;
 };
 
-function Checkbox({
+export function Checkbox({
   children,
   isFullWidth,
   onCheck,
@@ -34,5 +34,3 @@ function Checkbox({
     </label>
   );
 }
-
-export default Checkbox;
diff --git a/mailpoet/assets/js/src/common/form/checkbox/group.tsx b/mailpoet/assets/js/src/common/form/checkbox/group.tsx
index 2cf1f94726..3d32bcf2b7 100644
--- a/mailpoet/assets/js/src/common/form/checkbox/group.tsx
+++ b/mailpoet/assets/js/src/common/form/checkbox/group.tsx
@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, useState } from 'react';
-import Checkbox from './checkbox';
+import { Checkbox } from './checkbox';
 
 type CheckboxValueType = string | string[] | number;
 
@@ -15,7 +15,7 @@ type Props = {
   onChange?: (values: CheckboxValueType[]) => void;
 };
 
-function CheckboxGroup({
+export function CheckboxGroup({
   name,
   options,
   defaultValue,
@@ -60,5 +60,3 @@ function CheckboxGroup({
     </div>
   );
 }
-
-export default CheckboxGroup;
diff --git a/mailpoet/assets/js/src/common/form/index.ts b/mailpoet/assets/js/src/common/form/index.ts
index d1625bf5a0..f80c088ab0 100644
--- a/mailpoet/assets/js/src/common/form/index.ts
+++ b/mailpoet/assets/js/src/common/form/index.ts
@@ -1,2 +1,3 @@
-export { default as Select } from './select/select';
-export { default as Input } from './input/input';
+export * from './select/select';
+export * from './input/input';
+export * from './toggle/toggle';
diff --git a/mailpoet/assets/js/src/common/form/input/_stories/assets/icon.tsx b/mailpoet/assets/js/src/common/form/input/_stories/assets/icon.tsx
index f3e8ef4d09..088377b261 100644
--- a/mailpoet/assets/js/src/common/form/input/_stories/assets/icon.tsx
+++ b/mailpoet/assets/js/src/common/form/input/_stories/assets/icon.tsx
@@ -1,4 +1,4 @@
-export default (
+export const Icon = (
   <svg viewBox="3 3 18 18">
     <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/form/input/_stories/input.tsx b/mailpoet/assets/js/src/common/form/input/_stories/input.tsx
index 33ebd744db..57b6823848 100644
--- a/mailpoet/assets/js/src/common/form/input/_stories/input.tsx
+++ b/mailpoet/assets/js/src/common/form/input/_stories/input.tsx
@@ -1,6 +1,6 @@
-import Input from '../input';
-import Heading from '../../../typography/heading/heading';
-import icon from './assets/icon';
+import { Input } from '../input';
+import { Heading } from '../../../typography/heading/heading';
+import { Icon } from './assets/icon';
 
 export default {
   title: 'Form',
@@ -18,22 +18,22 @@ export function Inputs() {
           type="text"
           placeholder="Small input with iconStart"
           dimension="small"
-          iconStart={icon}
+          iconStart={Icon}
         />
         <div className="mailpoet-gap" />
         <Input
           type="text"
           placeholder="Small input with iconEnd"
           dimension="small"
-          iconEnd={icon}
+          iconEnd={Icon}
         />
         <div className="mailpoet-gap" />
         <Input
           type="text"
           placeholder="Small input with both icons"
           dimension="small"
-          iconStart={icon}
-          iconEnd={icon}
+          iconStart={Icon}
+          iconEnd={Icon}
         />
       </div>
       <br />
@@ -44,20 +44,20 @@ export function Inputs() {
         <Input
           type="text"
           placeholder="Regular input with iconStart"
-          iconStart={icon}
+          iconStart={Icon}
         />
         <div className="mailpoet-gap" />
         <Input
           type="text"
           placeholder="Regular input with iconEnd"
-          iconEnd={icon}
+          iconEnd={Icon}
         />
         <div className="mailpoet-gap" />
         <Input
           type="text"
           placeholder="Regular input with both icons"
-          iconStart={icon}
-          iconEnd={icon}
+          iconStart={Icon}
+          iconEnd={Icon}
         />
         <div className="mailpoet-gap" />
         <Input disabled type="text" placeholder="Disabled input" />
@@ -70,20 +70,20 @@ export function Inputs() {
           type="text"
           placeholder="Full-width input with iconStart"
           isFullWidth
-          iconStart={icon}
+          iconStart={Icon}
         />
         <Input
           type="text"
           placeholder="Full-width input with iconEnd"
           isFullWidth
-          iconEnd={icon}
+          iconEnd={Icon}
         />
         <Input
           type="text"
           placeholder="Full-width input with both icons"
           isFullWidth
-          iconStart={icon}
-          iconEnd={icon}
+          iconStart={Icon}
+          iconEnd={Icon}
         />
       </div>
       <br />
diff --git a/mailpoet/assets/js/src/common/form/input/input.tsx b/mailpoet/assets/js/src/common/form/input/input.tsx
index 5dec0956f7..63b26d24db 100644
--- a/mailpoet/assets/js/src/common/form/input/input.tsx
+++ b/mailpoet/assets/js/src/common/form/input/input.tsx
@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import Tooltip from 'common/tooltip/tooltip';
+import { Tooltip } from 'common/tooltip/tooltip';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   customLabel?: string;
@@ -11,7 +11,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   tooltip?: string;
 };
 
-function Input({
+export function Input({
   className,
   customLabel,
   dimension,
@@ -52,5 +52,3 @@ function Input({
     </div>
   );
 }
-
-export default Input;
diff --git a/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx b/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx
index c814436e24..3d1fcd4442 100644
--- a/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx
+++ b/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx
@@ -1,7 +1,7 @@
 import { action } from '_storybook/action';
-import Radio from '../radio';
-import RadioGroup from '../group';
-import Heading from '../../../typography/heading/heading';
+import { Radio } from '../radio';
+import { RadioGroup } from '../group';
+import { Heading } from '../../../typography/heading/heading';
 
 export default {
   title: 'Form',
diff --git a/mailpoet/assets/js/src/common/form/radio/group.tsx b/mailpoet/assets/js/src/common/form/radio/group.tsx
index b852f75c2f..1aa01d6783 100644
--- a/mailpoet/assets/js/src/common/form/radio/group.tsx
+++ b/mailpoet/assets/js/src/common/form/radio/group.tsx
@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, useState } from 'react';
-import Radio from './radio';
+import { Radio } from './radio';
 
 type RadioValueType = string | string[] | number;
 
@@ -15,7 +15,7 @@ type Props = {
   onChange?: (value: RadioValueType) => void;
 };
 
-function RadioGroup({
+export function RadioGroup({
   name,
   options,
   defaultValue,
@@ -51,5 +51,3 @@ function RadioGroup({
     </div>
   );
 }
-
-export default RadioGroup;
diff --git a/mailpoet/assets/js/src/common/form/radio/radio.tsx b/mailpoet/assets/js/src/common/form/radio/radio.tsx
index 67e9faec52..c731d454c1 100644
--- a/mailpoet/assets/js/src/common/form/radio/radio.tsx
+++ b/mailpoet/assets/js/src/common/form/radio/radio.tsx
@@ -8,7 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   automationId?: string;
 };
 
-function Radio({
+export function Radio({
   children,
   isFullWidth,
   onCheck,
@@ -34,5 +34,3 @@ function Radio({
     </label>
   );
 }
-
-export default Radio;
diff --git a/mailpoet/assets/js/src/common/form/react_select/_stories/assets/icon.tsx b/mailpoet/assets/js/src/common/form/react_select/_stories/assets/icon.tsx
index f3e8ef4d09..088377b261 100644
--- a/mailpoet/assets/js/src/common/form/react_select/_stories/assets/icon.tsx
+++ b/mailpoet/assets/js/src/common/form/react_select/_stories/assets/icon.tsx
@@ -1,4 +1,4 @@
-export default (
+export const Icon = (
   <svg viewBox="3 3 18 18">
     <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/form/react_select/_stories/react_select.tsx b/mailpoet/assets/js/src/common/form/react_select/_stories/react_select.tsx
index 05132a0c63..71f4c491b5 100644
--- a/mailpoet/assets/js/src/common/form/react_select/_stories/react_select.tsx
+++ b/mailpoet/assets/js/src/common/form/react_select/_stories/react_select.tsx
@@ -1,7 +1,7 @@
 import { action } from '_storybook/action';
-import Select from '../react_select';
-import Heading from '../../../typography/heading/heading';
-import icon from './assets/icon';
+import { ReactSelect as Select } from '../react_select';
+import { Heading } from '../../../typography/heading/heading';
+import { Icon } from './assets/icon';
 
 export default {
   title: 'Form',
@@ -46,7 +46,7 @@ export function ReactSelect() {
         <div className="mailpoet-gap" />
         <Select
           dimension="small"
-          iconStart={icon}
+          iconStart={Icon}
           options={options}
           isMulti
           placeholder="Select multiple values"
@@ -63,7 +63,7 @@ export function ReactSelect() {
         />
         <div className="mailpoet-gap" />
         <Select
-          iconStart={icon}
+          iconStart={Icon}
           options={options}
           defaultValue={options[2]}
           onChange={action('regular single')}
@@ -77,7 +77,7 @@ export function ReactSelect() {
         />
         <div className="mailpoet-gap" />
         <Select
-          iconStart={icon}
+          iconStart={Icon}
           options={options}
           isMulti
           defaultValue={[options[2], options[1]]}
@@ -104,7 +104,7 @@ export function ReactSelect() {
         <div className="mailpoet-gap" />
         <Select
           isFullWidth
-          iconStart={icon}
+          iconStart={Icon}
           options={options}
           placeholder="Select single value"
           onChange={action('full-width single')}
diff --git a/mailpoet/assets/js/src/common/form/react_select/react_select.tsx b/mailpoet/assets/js/src/common/form/react_select/react_select.tsx
index c1e9df76e6..2a1ddef589 100644
--- a/mailpoet/assets/js/src/common/form/react_select/react_select.tsx
+++ b/mailpoet/assets/js/src/common/form/react_select/react_select.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import classnames from 'classnames';
-import Select, { Props as ReactSelectProps, OptionProps } from 'react-select';
+import Select, { OptionProps, Props as ReactSelectProps } from 'react-select';
 
 export type Props = ReactSelectProps & {
   dimension?: 'small';
@@ -97,7 +97,7 @@ function MultiValueLabel(props: MultiValueLabelProps) {
   );
 }
 
-function ReactSelect({
+export function ReactSelect({
   dimension,
   isFullWidth,
   iconStart,
@@ -123,5 +123,3 @@ function ReactSelect({
     </div>
   );
 }
-
-export default ReactSelect;
diff --git a/mailpoet/assets/js/src/common/form/select/_stories/assets/icon.tsx b/mailpoet/assets/js/src/common/form/select/_stories/assets/icon.tsx
index f3e8ef4d09..088377b261 100644
--- a/mailpoet/assets/js/src/common/form/select/_stories/assets/icon.tsx
+++ b/mailpoet/assets/js/src/common/form/select/_stories/assets/icon.tsx
@@ -1,4 +1,4 @@
-export default (
+export const Icon = (
   <svg viewBox="3 3 18 18">
     <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/form/select/_stories/select.tsx b/mailpoet/assets/js/src/common/form/select/_stories/select.tsx
index 4480d33b9d..b9f57ab4c5 100644
--- a/mailpoet/assets/js/src/common/form/select/_stories/select.tsx
+++ b/mailpoet/assets/js/src/common/form/select/_stories/select.tsx
@@ -1,6 +1,6 @@
-import Select from '../select';
-import Heading from '../../../typography/heading/heading';
-import icon from './assets/icon';
+import { Select } from '../select';
+import { Heading } from '../../../typography/heading/heading';
+import { Icon } from './assets/icon';
 
 export default {
   title: 'Form',
@@ -18,7 +18,7 @@ export function NativeSelect() {
           <option value="3">Opt 3</option>
         </Select>
         <div className="mailpoet-gap" />
-        <Select isMinWidth iconStart={icon}>
+        <Select isMinWidth iconStart={Icon}>
           <option value="1">Opt 1</option>
           <option value="2">Opt 2</option>
           <option value="3">Opt 3</option>
@@ -33,7 +33,7 @@ export function NativeSelect() {
           <option value="3">Option 3</option>
         </Select>
         <div className="mailpoet-gap" />
-        <Select dimension="small" iconStart={icon}>
+        <Select dimension="small" iconStart={Icon}>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
@@ -48,7 +48,7 @@ export function NativeSelect() {
           <option value="3">Option 3</option>
         </Select>
         <div className="mailpoet-gap" />
-        <Select iconStart={icon}>
+        <Select iconStart={Icon}>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
@@ -67,7 +67,7 @@ export function NativeSelect() {
           <option value="3">Option 3</option>
         </Select>
         <div className="mailpoet-gap" />
-        <Select isFullWidth iconStart={icon}>
+        <Select isFullWidth iconStart={Icon}>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
diff --git a/mailpoet/assets/js/src/common/form/select/select.tsx b/mailpoet/assets/js/src/common/form/select/select.tsx
index 1b880e7067..63c5cb12ab 100644
--- a/mailpoet/assets/js/src/common/form/select/select.tsx
+++ b/mailpoet/assets/js/src/common/form/select/select.tsx
@@ -10,7 +10,7 @@ type Props = SelectHTMLAttributes<HTMLSelectElement> & {
   automationId?: string;
 };
 
-const Select = forwardRef(
+export const Select = forwardRef(
   (
     {
       children,
@@ -38,5 +38,3 @@ const Select = forwardRef(
     </div>
   ),
 );
-
-export default Select;
diff --git a/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx b/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx
index fa0471c86a..8e1ccc80c4 100644
--- a/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx
+++ b/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx
@@ -1,5 +1,5 @@
-import Textarea from '../textarea';
-import Heading from '../../../typography/heading/heading';
+import { Textarea } from '../textarea';
+import { Heading } from '../../../typography/heading/heading';
 
 export default {
   title: 'Form',
diff --git a/mailpoet/assets/js/src/common/form/textarea/textarea.tsx b/mailpoet/assets/js/src/common/form/textarea/textarea.tsx
index 8306b9804f..375d839904 100644
--- a/mailpoet/assets/js/src/common/form/textarea/textarea.tsx
+++ b/mailpoet/assets/js/src/common/form/textarea/textarea.tsx
@@ -1,6 +1,6 @@
 import { TextareaHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import Tooltip from 'common/tooltip/tooltip';
+import { Tooltip } from 'common/tooltip/tooltip';
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   customLabel?: string;
@@ -10,7 +10,7 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   isCode?: boolean;
 };
 
-function Textarea({
+export function Textarea({
   className,
   customLabel,
   dimension,
@@ -48,5 +48,3 @@ function Textarea({
     </div>
   );
 }
-
-export default Textarea;
diff --git a/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx b/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx
index c87397090d..2872b6c281 100644
--- a/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx
+++ b/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx
@@ -1,6 +1,6 @@
 import { action } from '_storybook/action';
-import Toggle from '../toggle';
-import Heading from '../../../typography/heading/heading';
+import { Toggle } from '../toggle';
+import { Heading } from '../../../typography/heading/heading';
 import { Grid } from '../../../grid';
 
 export default {
diff --git a/mailpoet/assets/js/src/common/form/toggle/toggle.tsx b/mailpoet/assets/js/src/common/form/toggle/toggle.tsx
index 2f009893f1..b1622e8f76 100644
--- a/mailpoet/assets/js/src/common/form/toggle/toggle.tsx
+++ b/mailpoet/assets/js/src/common/form/toggle/toggle.tsx
@@ -7,7 +7,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   automationId?: string;
 };
 
-function Toggle({
+export function Toggle({
   dimension,
   onCheck,
   automationId,
@@ -33,5 +33,3 @@ function Toggle({
     </label>
   );
 }
-
-export default Toggle;
diff --git a/mailpoet/assets/js/src/common/form/yesno/_stories/yesno.tsx b/mailpoet/assets/js/src/common/form/yesno/_stories/yesno.tsx
index 7a901eb08e..dc983006bd 100644
--- a/mailpoet/assets/js/src/common/form/yesno/_stories/yesno.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/_stories/yesno.tsx
@@ -1,6 +1,6 @@
 import { action } from '_storybook/action';
-import YesNo from '../yesno';
-import Heading from '../../../typography/heading/heading';
+import { YesNo } from '../yesno';
+import { Heading } from '../../../typography/heading/heading';
 import { Grid } from '../../../grid';
 
 export default {
diff --git a/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx b/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx
index 9dafcc4d4a..130f798d5f 100644
--- a/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx
@@ -1,4 +1,4 @@
-export default (
+export const noIcon = (
   <svg width="17" height="16" viewBox="0 0 17 16">
     <path
       fill="currentColor"
diff --git a/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx b/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx
index 0028705ab5..90c69ccada 100644
--- a/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx
@@ -1,4 +1,4 @@
-export default (
+export const yesIcon = (
   <svg width="13" height="11" viewBox="0 0 13 11">
     <path
       fill="currentColor"
diff --git a/mailpoet/assets/js/src/common/form/yesno/yesno.tsx b/mailpoet/assets/js/src/common/form/yesno/yesno.tsx
index 96ff4a3297..ead694f46a 100644
--- a/mailpoet/assets/js/src/common/form/yesno/yesno.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/yesno.tsx
@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import iconYes from './icons/yes';
-import iconNo from './icons/no';
+import { yesIcon } from './icons/yes';
+import { noIcon } from './icons/no';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   name: string;
@@ -11,7 +11,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   automationId?: string;
 };
 
-function YesNo({
+export function YesNo({
   onCheck,
   showError,
   checked,
@@ -35,7 +35,7 @@ function YesNo({
           {...attributes}
         />
         <span className="mailpoet-form-yesno-control mailpoet-form-yesno-yes">
-          {iconYes}
+          {yesIcon}
         </span>
       </label>
       <label>
@@ -46,11 +46,9 @@ function YesNo({
           {...attributes}
         />
         <span className="mailpoet-form-yesno-control mailpoet-form-yesno-no">
-          {iconNo}
+          {noIcon}
         </span>
       </label>
     </div>
   );
 }
-
-export default YesNo;
diff --git a/mailpoet/assets/js/src/common/functions/index.ts b/mailpoet/assets/js/src/common/functions/index.ts
index 732bf96763..c0b780a396 100644
--- a/mailpoet/assets/js/src/common/functions/index.ts
+++ b/mailpoet/assets/js/src/common/functions/index.ts
@@ -1,4 +1,4 @@
 export * from './change_handlers';
-export { default as t } from './t';
-export { default as isEmail } from './is_email';
-export { default as setLowercaseValue } from './set_lowercase_value';
+export * from './t';
+export * from './is_email';
+export * from './set_lowercase_value';
diff --git a/mailpoet/assets/js/src/common/functions/is_email.ts b/mailpoet/assets/js/src/common/functions/is_email.ts
index eefc1db5bd..4cc427959f 100644
--- a/mailpoet/assets/js/src/common/functions/is_email.ts
+++ b/mailpoet/assets/js/src/common/functions/is_email.ts
@@ -1,3 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default (value: string): boolean => MailPoet.emailRegex.test(value);
+export const isEmail = (value: string): boolean =>
+  MailPoet.emailRegex.test(value);
diff --git a/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts b/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts
index fe556f41c1..a17065567f 100644
--- a/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts
+++ b/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts
@@ -1,9 +1,7 @@
 import { curry } from 'lodash';
 
-const setLowercaseValue = curry(
+export const setLowercaseValue = curry(
   (setter: (value: string) => void, value: string) => {
     setter(value.toLowerCase());
   },
 );
-
-export default setLowercaseValue;
diff --git a/mailpoet/assets/js/src/common/functions/t.ts b/mailpoet/assets/js/src/common/functions/t.ts
index d67abb5164..0612fa8e0b 100644
--- a/mailpoet/assets/js/src/common/functions/t.ts
+++ b/mailpoet/assets/js/src/common/functions/t.ts
@@ -1,3 +1,3 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default (word: string): string => MailPoet.I18n.t(word);
+export const t = (word: string): string => MailPoet.I18n.t(word);
diff --git a/mailpoet/assets/js/src/common/grid/_stories/grid.tsx b/mailpoet/assets/js/src/common/grid/_stories/grid.tsx
index 9ce43a66c3..fece06bf34 100644
--- a/mailpoet/assets/js/src/common/grid/_stories/grid.tsx
+++ b/mailpoet/assets/js/src/common/grid/_stories/grid.tsx
@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
-import Heading from '../../typography/heading/heading';
+import { Heading } from '../../typography/heading/heading';
 import { Grid } from '..';
-import Input from '../../form/input/input';
+import { Input } from '../../form/input/input';
 
 export default {
   title: 'Grid',
diff --git a/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx b/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx
index 44b1bb512e..d2839be242 100644
--- a/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx
+++ b/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx
@@ -1,4 +1,4 @@
-function HideScreenOptions() {
+export function HideScreenOptions() {
   return (
     <style
       /* eslint-disable-next-line react/no-danger */
@@ -11,5 +11,3 @@ function HideScreenOptions() {
     />
   );
 }
-
-export default HideScreenOptions;
diff --git a/mailpoet/assets/js/src/common/index.ts b/mailpoet/assets/js/src/common/index.ts
index 12e28873cb..5cfd29b93e 100644
--- a/mailpoet/assets/js/src/common/index.ts
+++ b/mailpoet/assets/js/src/common/index.ts
@@ -1,9 +1,9 @@
-export { default as Button } from './button/button';
-export { default as Loader } from './loader/loader';
-export { default as Tab } from './tabs/tab';
-export { default as Tag } from './tag/tag';
-export { default as TypographyHeading } from './typography/heading/heading';
-export { default as PremiumRequired } from './premium_required/premium_required';
-export { default as Loading } from './loading';
-export { default as Badge } from './listings/newsletter_stats/badge';
+export { Button } from './button/button';
+export * from './loader/loader';
+export * from './tabs/tab';
+export { Heading as TypographyHeading } from './typography/heading/heading';
+export * from './premium_required/premium_required';
+export * from './loading';
 export * from './form';
+export * from './tag';
+export * from './listings';
diff --git a/mailpoet/assets/js/src/common/key_value_table.jsx b/mailpoet/assets/js/src/common/key_value_table.jsx
index 5c4662ebe6..71b4d98a9b 100644
--- a/mailpoet/assets/js/src/common/key_value_table.jsx
+++ b/mailpoet/assets/js/src/common/key_value_table.jsx
@@ -33,4 +33,4 @@ KeyValueTable.defaultProps = {
   max_width: 'auto',
 };
 
-export default KeyValueTable;
+export { KeyValueTable };
diff --git a/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx b/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx
index 36bfdd4940..5103825db4 100644
--- a/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx
+++ b/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
-import NewsletterStats from '../newsletter_stats';
-import Heading from '../../typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { NewsletterStats } from '../newsletter_stats';
+import { Heading } from '../../typography/heading/heading';
 
 MailPoet.I18n.add('excellentBadgeName', 'Excellent');
 MailPoet.I18n.add('excellentBadgeTooltip', 'Congrats!');
diff --git a/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx b/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
index e8791ee262..aea464f6bc 100644
--- a/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
+++ b/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
@@ -1,7 +1,7 @@
 import { addHours, subHours } from 'date-fns';
-import MailPoet from 'mailpoet';
-import NewsletterStatus from '../newsletter_status';
-import Heading from '../../typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { NewsletterStatus } from '../newsletter_status';
+import { Heading } from '../../typography/heading/heading';
 
 MailPoet.I18n.add('notSentYet', 'Not sent yet!');
 MailPoet.I18n.add('sent', 'Sent');
diff --git a/mailpoet/assets/js/src/common/listings/index.ts b/mailpoet/assets/js/src/common/listings/index.ts
index 9bbc19fc44..632ddd10b0 100644
--- a/mailpoet/assets/js/src/common/listings/index.ts
+++ b/mailpoet/assets/js/src/common/listings/index.ts
@@ -1,5 +1,2 @@
-export { default as NewsletterStats } from './newsletter_stats';
-export {
-  default as NewsletterStatus,
-  ScheduledIcon,
-} from './newsletter_status';
+export { NewsletterStats } from './newsletter_stats';
+export { NewsletterStatus, ScheduledIcon } from './newsletter_status';
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx b/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx
index 2bb779fb3c..7d38db10d3 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { StatsBadge } from './newsletter_stats/stats';
-import Tooltip from '../tooltip/tooltip';
-import Tag from '../tag/tag';
+import { Tooltip } from '../tooltip/tooltip';
+import { Tag } from '../tag/tag';
 
 type NewsletterStatsProps = {
   opened: number;
@@ -13,7 +13,7 @@ type NewsletterStatsProps = {
   wrapContentInLink?: (content: ReactNode, idPrefix: string) => JSX.Element;
 };
 
-function NewsletterStats({
+export function NewsletterStats({
   opened,
   clicked,
   revenues,
@@ -79,5 +79,3 @@ function NewsletterStats({
     </div>
   );
 }
-
-export default NewsletterStats;
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx b/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx
index df85c1c278..bf34ba53c4 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Place } from 'react-tooltip';
-import Tag from '../../tag/tag';
-import Tooltip from '../../tooltip/tooltip';
+import { Tag } from '../../tag';
+import { Tooltip } from '../../tooltip/tooltip';
 
 type BadgeProps = {
   name: string;
@@ -42,4 +42,4 @@ Badge.defaultProps = {
   isInverted: true,
 };
 
-export default Badge;
+export { Badge };
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats/index.ts b/mailpoet/assets/js/src/common/listings/newsletter_stats/index.ts
deleted file mode 100644
index 1b8035e83c..0000000000
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Badge } from './badge';
-export * from './stats';
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx b/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx
index 9b4132b765..77184bfb3d 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { Place } from 'react-tooltip';
-import Badge from './badge';
+import { Badge } from './badge';
 
 type StatsBadgeProps = {
   stat: string;
@@ -50,7 +50,7 @@ export const getBadgeType = (statName, rate) => {
   return stat.badgeTypes[len - 1];
 };
 
-export function StatsBadge(props: StatsBadgeProps) {
+function StatsBadge(props: StatsBadgeProps) {
   const badges = {
     excellent: {
       name: MailPoet.I18n.t('excellentBadgeName'),
@@ -116,3 +116,5 @@ export function StatsBadge(props: StatsBadgeProps) {
 StatsBadge.defaultProps = {
   isInverted: true,
 };
+
+export { StatsBadge };
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_status.tsx b/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
index f88551a799..0a21d45a18 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
@@ -1,8 +1,8 @@
-import MailPoet from 'mailpoet';
-import classNames from 'classnames';
+import { MailPoet } from 'mailpoet';
+import classnames from 'classnames';
 import { addDays, differenceInMinutes, isFuture, isPast } from 'date-fns';
-import t from 'common/functions/t';
-import Tooltip from '../tooltip/tooltip';
+import { t } from 'common/functions/t';
+import { Tooltip } from '../tooltip/tooltip';
 
 type CircularProgressProps = {
   percentage: number;
@@ -63,7 +63,7 @@ type NewsletterStatusProps = {
   status?: string;
 };
 
-function NewsletterStatus({
+export function NewsletterStatus({
   scheduledFor,
   processed,
   total,
@@ -136,7 +136,7 @@ function NewsletterStatus({
   }
   return (
     <div
-      className={classNames({
+      className={classnames({
         'mailpoet-listing-status': true,
         'mailpoet-listing-status-unknown': unknown,
         'mailpoet-listing-status-scheduled': scheduled,
@@ -150,5 +150,3 @@ function NewsletterStatus({
     </div>
   );
 }
-
-export default NewsletterStatus;
diff --git a/mailpoet/assets/js/src/common/loader/_stories/loader.tsx b/mailpoet/assets/js/src/common/loader/_stories/loader.tsx
index 7a2bf27da1..e6767930c7 100644
--- a/mailpoet/assets/js/src/common/loader/_stories/loader.tsx
+++ b/mailpoet/assets/js/src/common/loader/_stories/loader.tsx
@@ -1,4 +1,4 @@
-import Loader from '../loader';
+import { Loader } from '../loader';
 
 export default {
   title: 'Loader',
diff --git a/mailpoet/assets/js/src/common/loader/loader.tsx b/mailpoet/assets/js/src/common/loader/loader.tsx
index 3a450f21c2..40bcf178cc 100644
--- a/mailpoet/assets/js/src/common/loader/loader.tsx
+++ b/mailpoet/assets/js/src/common/loader/loader.tsx
@@ -3,7 +3,7 @@ type Props = {
   size?: number;
 };
 
-function Loader({ variant, size }: Props) {
+export function Loader({ variant, size }: Props) {
   let color = '#ff5301';
   if (variant === 'light') color = '#ffe0d0';
   if (variant === 'dark') color = '#1d2327';
@@ -51,5 +51,3 @@ function Loader({ variant, size }: Props) {
     </svg>
   );
 }
-
-export default Loader;
diff --git a/mailpoet/assets/js/src/common/loading.jsx b/mailpoet/assets/js/src/common/loading.jsx
index 63c796d937..71058a42ec 100644
--- a/mailpoet/assets/js/src/common/loading.jsx
+++ b/mailpoet/assets/js/src/common/loading.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-class Loading extends Component {
+export class Loading extends Component {
   componentDidMount() {
     MailPoet.Modal.loading(true);
   }
@@ -14,5 +14,3 @@ class Loading extends Component {
     return null;
   }
 }
-
-export default Loading;
diff --git a/mailpoet/assets/js/src/common/modal/_stories/modal.tsx b/mailpoet/assets/js/src/common/modal/_stories/modal.tsx
index 5cd561d5eb..31578a0f63 100644
--- a/mailpoet/assets/js/src/common/modal/_stories/modal.tsx
+++ b/mailpoet/assets/js/src/common/modal/_stories/modal.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import Button from '../../button/button';
-import Modal from '../modal';
-import Heading from '../../typography/heading/heading';
+import { Button } from '../../button/button';
+import { Modal } from '../modal';
+import { Heading } from '../../typography/heading/heading';
 
 const shortContent = (
   <>
diff --git a/mailpoet/assets/js/src/common/modal/close_icon.tsx b/mailpoet/assets/js/src/common/modal/close_icon.tsx
index 74db755203..96f6049b6b 100644
--- a/mailpoet/assets/js/src/common/modal/close_icon.tsx
+++ b/mailpoet/assets/js/src/common/modal/close_icon.tsx
@@ -1,4 +1,4 @@
-export default (
+export const modalCloseIcon = (
   <svg viewBox="0 0 48 48">
     <path d="M42 6L6 42M6 6L42 42" strokeWidth="12" strokeLinecap="round" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/modal/frame.tsx b/mailpoet/assets/js/src/common/modal/frame.tsx
index e6a768831a..448d0d7c53 100644
--- a/mailpoet/assets/js/src/common/modal/frame.tsx
+++ b/mailpoet/assets/js/src/common/modal/frame.tsx
@@ -7,7 +7,11 @@ type Props = {
   children: ReactNode;
 };
 
-function ModalFrame({ fullScreen = false, className = '', children }: Props) {
+export function ModalFrame({
+  fullScreen = false,
+  className = '',
+  children,
+}: Props) {
   return (
     <div
       className={classnames(
@@ -22,5 +26,3 @@ function ModalFrame({ fullScreen = false, className = '', children }: Props) {
     </div>
   );
 }
-
-export default ModalFrame;
diff --git a/mailpoet/assets/js/src/common/modal/header.tsx b/mailpoet/assets/js/src/common/modal/header.tsx
index c72a4d4e1f..bbfcf76cea 100644
--- a/mailpoet/assets/js/src/common/modal/header.tsx
+++ b/mailpoet/assets/js/src/common/modal/header.tsx
@@ -1,15 +1,13 @@
-import Heading from '../typography/heading/heading';
+import { Heading } from '../typography/heading/heading';
 
 type Props = {
   title: string;
 };
 
-function ModalHeader({ title }: Props) {
+export function ModalHeader({ title }: Props) {
   return (
     <div className="mailpoet-modal-header">
       <Heading level={3}>{title}</Heading>
     </div>
   );
 }
-
-export default ModalHeader;
diff --git a/mailpoet/assets/js/src/common/modal/modal.tsx b/mailpoet/assets/js/src/common/modal/modal.tsx
index 63316e596c..a375f075ea 100644
--- a/mailpoet/assets/js/src/common/modal/modal.tsx
+++ b/mailpoet/assets/js/src/common/modal/modal.tsx
@@ -2,10 +2,10 @@ import { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { noop } from 'lodash';
 
-import ModalFrame from './frame';
-import ModalHeader from './header';
-import ModalOverlay from './overlay';
-import ModalCloseIcon from './close_icon';
+import { ModalFrame } from './frame';
+import { ModalHeader } from './header';
+import { ModalOverlay } from './overlay';
+import { modalCloseIcon } from './close_icon';
 
 type Props = {
   title?: string;
@@ -19,7 +19,7 @@ type Props = {
   children: ReactNode;
 };
 
-function Modal({
+export function Modal({
   title = null,
   isDismissible = true,
   shouldCloseOnEsc = true,
@@ -47,7 +47,7 @@ function Modal({
             className="mailpoet-modal-close"
             data-automation-id="mailpoet-modal-close"
           >
-            {ModalCloseIcon}
+            {modalCloseIcon}
           </button>
         )}
         <div className="mailpoet-modal-content" role="document">
@@ -58,5 +58,3 @@ function Modal({
     document.getElementById('mailpoet-modal'),
   );
 }
-
-export default Modal;
diff --git a/mailpoet/assets/js/src/common/modal/overlay.tsx b/mailpoet/assets/js/src/common/modal/overlay.tsx
index 93e97d650d..d4637c36db 100644
--- a/mailpoet/assets/js/src/common/modal/overlay.tsx
+++ b/mailpoet/assets/js/src/common/modal/overlay.tsx
@@ -20,7 +20,7 @@ type Props = {
   children: ReactNode;
 };
 
-function ModalOverlay({
+export function ModalOverlay({
   isDismissible = true,
   shouldCloseOnEsc = true,
   shouldCloseOnClickOutside = true,
@@ -78,5 +78,3 @@ function ModalOverlay({
     </div>
   );
 }
-
-export default ModalOverlay;
diff --git a/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx b/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
index 4583773068..5109c8bfb5 100644
--- a/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
+++ b/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import MailPoet from 'mailpoet';
-import PremiumRequired from 'common/premium_required/premium_required';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { PremiumRequired } from 'common/premium_required/premium_required';
+import { Button } from 'common/button/button';
 import ReactStringReplace from 'react-string-replace';
 
 type Props = {
@@ -48,7 +48,7 @@ const getCtaButton = (
   </Button>
 );
 
-function PremiumBannerWithUpgrade({
+export function PremiumBannerWithUpgrade({
   message,
   actionButton,
 }: Props): JSX.Element {
@@ -73,7 +73,7 @@ function PremiumBannerWithUpgrade({
       'premiumFeatureDescriptionSubscribersLimitReached',
     );
 
-    const link = anyValidKey
+    const link: string = anyValidKey
       ? MailPoet.MailPoetComUrlFactory.getUpgradeUrl(pluginPartialKey)
       : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
           +subscribersCount + 1,
@@ -94,5 +94,3 @@ function PremiumBannerWithUpgrade({
     />
   );
 }
-
-export default PremiumBannerWithUpgrade;
diff --git a/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx b/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx
index 46c2561a3b..857d039c86 100644
--- a/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx
+++ b/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx
@@ -1,5 +1,5 @@
-import PremiumRequired from '../premium_required';
-import Button from '../../button/button';
+import { PremiumRequired } from '../premium_required';
+import { Button } from '../../button/button';
 
 export default {
   title: 'Premium Required',
diff --git a/mailpoet/assets/js/src/common/premium_required/premium_required.tsx b/mailpoet/assets/js/src/common/premium_required/premium_required.tsx
index 8302d08387..3e3a76f484 100644
--- a/mailpoet/assets/js/src/common/premium_required/premium_required.tsx
+++ b/mailpoet/assets/js/src/common/premium_required/premium_required.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import Badge from 'common/badge/badge';
-import Heading from 'common/typography/heading/heading';
+import { Badge } from 'common/badge/badge';
+import { Heading } from 'common/typography/heading/heading';
 
 type Props = {
   title: string;
@@ -8,7 +8,7 @@ type Props = {
   actionButton: ReactNode;
 };
 
-function PremiumRequired({ title, message, actionButton }: Props) {
+export function PremiumRequired({ title, message, actionButton }: Props) {
   return (
     <div className="mailpoet-premium-required">
       <div className="mailpoet-premium-required-message">
@@ -21,5 +21,3 @@ function PremiumRequired({ title, message, actionButton }: Props) {
     </div>
   );
 }
-
-export default PremiumRequired;
diff --git a/mailpoet/assets/js/src/common/preview/desktop_icon.tsx b/mailpoet/assets/js/src/common/preview/desktop_icon.tsx
index 0132ccaf42..6daac3d02d 100644
--- a/mailpoet/assets/js/src/common/preview/desktop_icon.tsx
+++ b/mailpoet/assets/js/src/common/preview/desktop_icon.tsx
@@ -1,4 +1,4 @@
-export default function DesktopIcon() {
+export function DesktopIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/mailpoet/assets/js/src/common/preview/mobile_icon.tsx b/mailpoet/assets/js/src/common/preview/mobile_icon.tsx
index 46312e8543..4bf56b902b 100644
--- a/mailpoet/assets/js/src/common/preview/mobile_icon.tsx
+++ b/mailpoet/assets/js/src/common/preview/mobile_icon.tsx
@@ -1,4 +1,4 @@
-export default function MobileIcon() {
+export function MobileIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/mailpoet/assets/js/src/common/preview/preview.jsx b/mailpoet/assets/js/src/common/preview/preview.jsx
index a071f64dcc..bc929ba968 100644
--- a/mailpoet/assets/js/src/common/preview/preview.jsx
+++ b/mailpoet/assets/js/src/common/preview/preview.jsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import classnames from 'classnames';
-import MobileIcon from './mobile_icon';
-import DesktopIcon from './desktop_icon';
+import { MobileIcon } from './mobile_icon';
+import { DesktopIcon } from './desktop_icon';
 
 function Preview({ children, onDisplayTypeChange, selectedDisplayType }) {
   const [displayType, setDisplayType] = useState(selectedDisplayType);
@@ -78,4 +78,4 @@ Preview.defaultProps = {
   selectedDisplayType: 'desktop',
 };
 
-export default Preview;
+export { Preview };
diff --git a/mailpoet/assets/js/src/common/print_boolean.jsx b/mailpoet/assets/js/src/common/print_boolean.jsx
index cfcc6d670e..af36844899 100644
--- a/mailpoet/assets/js/src/common/print_boolean.jsx
+++ b/mailpoet/assets/js/src/common/print_boolean.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 function PrintBoolean(props) {
   return (
@@ -25,4 +25,4 @@ PrintBoolean.defaultProps = {
   children: null,
 };
 
-export default PrintBoolean;
+export { PrintBoolean };
diff --git a/mailpoet/assets/js/src/common/remove_wrap_margin/remove_wrap_margin.tsx b/mailpoet/assets/js/src/common/remove_wrap_margin/remove_wrap_margin.tsx
index 8ed4507ddd..6ea99c3eb7 100644
--- a/mailpoet/assets/js/src/common/remove_wrap_margin/remove_wrap_margin.tsx
+++ b/mailpoet/assets/js/src/common/remove_wrap_margin/remove_wrap_margin.tsx
@@ -1,4 +1,4 @@
-function RemoveWrapMargin() {
+export function RemoveWrapMargin() {
   return (
     <style
       /* eslint-disable-next-line react/no-danger */
@@ -6,5 +6,3 @@ function RemoveWrapMargin() {
     />
   );
 }
-
-export default RemoveWrapMargin;
diff --git a/mailpoet/assets/js/src/common/scroll_to_top.jsx b/mailpoet/assets/js/src/common/scroll_to_top.jsx
index c56f0b6c1d..b0261310ad 100644
--- a/mailpoet/assets/js/src/common/scroll_to_top.jsx
+++ b/mailpoet/assets/js/src/common/scroll_to_top.jsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { withRouter } from 'react-router-dom';
 
-function ScrollToTop({ children, location: { pathname } }) {
+function ScrollToTopComponent({ children, location: { pathname } }) {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);
@@ -9,4 +9,4 @@ function ScrollToTop({ children, location: { pathname } }) {
   return children || null;
 }
 
-export default withRouter(ScrollToTop);
+export const ScrollToTop = withRouter(ScrollToTopComponent);
diff --git a/mailpoet/assets/js/src/common/sender_email_address_warning.jsx b/mailpoet/assets/js/src/common/sender_email_address_warning.jsx
index 2123eca6f5..1126f6e0e5 100644
--- a/mailpoet/assets/js/src/common/sender_email_address_warning.jsx
+++ b/mailpoet/assets/js/src/common/sender_email_address_warning.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 
 const userHostDomain = window.location.hostname.replace('www.', '');
@@ -50,4 +50,4 @@ SenderEmailAddressWarning.propTypes = {
   mssActive: PropTypes.bool.isRequired,
 };
 
-export default SenderEmailAddressWarning;
+export { SenderEmailAddressWarning };
diff --git a/mailpoet/assets/js/src/common/set_from_address_modal.tsx b/mailpoet/assets/js/src/common/set_from_address_modal.tsx
index d439308755..ffe218d541 100644
--- a/mailpoet/assets/js/src/common/set_from_address_modal.tsx
+++ b/mailpoet/assets/js/src/common/set_from_address_modal.tsx
@@ -1,8 +1,8 @@
 import { useContext, useState } from 'react';
 import ReactStringReplace from 'react-string-replace';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
-import Modal from 'common/modal/modal';
+import { MailPoet } from 'mailpoet';
+import { Modal } from 'common/modal/modal';
 import { GlobalContext } from 'context';
 import { noop } from 'lodash';
 import { ErrorResponse, isErrorResponse } from '../ajax';
@@ -169,4 +169,4 @@ SetFromAddressModal.defaultProps = {
   setAuthorizedAddress: noop,
 };
 
-export default SetFromAddressModal;
+export { SetFromAddressModal };
diff --git a/mailpoet/assets/js/src/common/steps/_stories/steps.tsx b/mailpoet/assets/js/src/common/steps/_stories/steps.tsx
index 52aacf1717..04fac437da 100644
--- a/mailpoet/assets/js/src/common/steps/_stories/steps.tsx
+++ b/mailpoet/assets/js/src/common/steps/_stories/steps.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import Button from '../../button/button';
-import Heading from '../../typography/heading/heading';
-import Steps from '../steps';
-import StepsContent from '../steps_content';
+import { Button } from '../../button/button';
+import { Heading } from '../../typography/heading/heading';
+import { Steps } from '../steps';
+import { StepsContent } from '../steps_content';
 
 export default {
   title: 'Steps',
diff --git a/mailpoet/assets/js/src/common/steps/steps.tsx b/mailpoet/assets/js/src/common/steps/steps.tsx
index 5ad4a1d3d7..7601b77c44 100644
--- a/mailpoet/assets/js/src/common/steps/steps.tsx
+++ b/mailpoet/assets/js/src/common/steps/steps.tsx
@@ -1,5 +1,5 @@
 import range from 'lodash/range';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import { ContentWrapperFix } from './content_wrapper_fix';
 
 type Props = {
@@ -14,7 +14,7 @@ function Steps({ count, current, titles }: Props) {
       {range(1, count + 1).map((i) => (
         <div
           key={i}
-          className={classNames('mailpoet-step', {
+          className={classnames('mailpoet-step', {
             'mailpoet-step-done': i < current,
             'mailpoet-step-active': i === current,
           })}
@@ -39,4 +39,4 @@ Steps.defaultProps = {
   titles: [],
 };
 
-export default Steps;
+export { Steps };
diff --git a/mailpoet/assets/js/src/common/steps/steps_content.tsx b/mailpoet/assets/js/src/common/steps/steps_content.tsx
index 151b0581af..dabc2c1acf 100644
--- a/mailpoet/assets/js/src/common/steps/steps_content.tsx
+++ b/mailpoet/assets/js/src/common/steps/steps_content.tsx
@@ -4,8 +4,6 @@ type Props = {
   children: ReactNode;
 };
 
-function StepsContent({ children }: Props) {
+export function StepsContent({ children }: Props) {
   return <div className="mailpoet-steps-content">{children}</div>;
 }
-
-export default StepsContent;
diff --git a/mailpoet/assets/js/src/common/styles.ts b/mailpoet/assets/js/src/common/styles.ts
index 4410465e0d..b3b809232e 100644
--- a/mailpoet/assets/js/src/common/styles.ts
+++ b/mailpoet/assets/js/src/common/styles.ts
@@ -1,7 +1,5 @@
-enum HorizontalAlignment {
+export enum HorizontalAlignment {
   Left = 'left',
   Center = 'center',
   Right = 'right',
 }
-
-export default HorizontalAlignment;
diff --git a/mailpoet/assets/js/src/common/subscribers_cache_message.tsx b/mailpoet/assets/js/src/common/subscribers_cache_message.tsx
index 159981bf25..ea7d7351bf 100644
--- a/mailpoet/assets/js/src/common/subscribers_cache_message.tsx
+++ b/mailpoet/assets/js/src/common/subscribers_cache_message.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 import ReactStringReplace from 'react-string-replace';
-import Notice from '../notices/notice';
+import { Notice } from '../notices/notice';
 
 type Props = {
   cacheCalculation: string;
diff --git a/mailpoet/assets/js/src/common/subscribers_in_plan.tsx b/mailpoet/assets/js/src/common/subscribers_in_plan.tsx
index c085a2d075..162455e5a1 100644
--- a/mailpoet/assets/js/src/common/subscribers_in_plan.tsx
+++ b/mailpoet/assets/js/src/common/subscribers_in_plan.tsx
@@ -1,13 +1,13 @@
-import MailPoet from 'mailpoet';
-import HelpTooltip from 'help-tooltip.jsx';
 import ReactStringReplace from 'react-string-replace';
+import { MailPoet } from 'mailpoet';
+import { Tooltip } from 'help-tooltip.jsx';
 
 type Props = {
   subscribersInPlan: number | false;
   subscribersInPlanLimit: number | false;
 };
 
-function SubscribersInPlan({
+export function SubscribersInPlan({
   subscribersInPlan,
   subscribersInPlanLimit,
 }: Props) {
@@ -32,7 +32,7 @@ function SubscribersInPlan({
         '%s',
         () => subscribersInPlanCount,
       )}{' '}
-      <HelpTooltip
+      <Tooltip
         tooltip={MailPoet.I18n.t('subscribersInPlanTooltip')}
         place="right"
       />
@@ -40,5 +40,3 @@ function SubscribersInPlan({
     </div>
   );
 }
-
-export default SubscribersInPlan;
diff --git a/mailpoet/assets/js/src/common/tabs/_stories/assets/icon.tsx b/mailpoet/assets/js/src/common/tabs/_stories/assets/icon.tsx
index f4dd6342c5..bbd96dca2f 100644
--- a/mailpoet/assets/js/src/common/tabs/_stories/assets/icon.tsx
+++ b/mailpoet/assets/js/src/common/tabs/_stories/assets/icon.tsx
@@ -1,4 +1,4 @@
-export default (
+export const Icon = (
   <svg viewBox="4 4 16 16">
     <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/common/tabs/_stories/tabs.tsx b/mailpoet/assets/js/src/common/tabs/_stories/tabs.tsx
index 6ddbfc09af..a31d830e81 100644
--- a/mailpoet/assets/js/src/common/tabs/_stories/tabs.tsx
+++ b/mailpoet/assets/js/src/common/tabs/_stories/tabs.tsx
@@ -1,9 +1,9 @@
 import { action } from '_storybook/action';
 import { CSSProperties } from 'react';
-import Heading from '../../typography/heading/heading';
-import RoutedTabs from '../routed_tabs';
-import Tab from '../tab';
-import Tabs from '../tabs';
+import { Heading } from '../../typography/heading/heading';
+import { RoutedTabs } from '../routed_tabs';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
 
 const wrapperStyles: CSSProperties = {
   background: '#f1f1f1',
diff --git a/mailpoet/assets/js/src/common/tabs/_stories/tabs_icons.tsx b/mailpoet/assets/js/src/common/tabs/_stories/tabs_icons.tsx
index 6d9dd074db..d56ba03f4e 100644
--- a/mailpoet/assets/js/src/common/tabs/_stories/tabs_icons.tsx
+++ b/mailpoet/assets/js/src/common/tabs/_stories/tabs_icons.tsx
@@ -1,10 +1,10 @@
 import { action } from '_storybook/action';
 import { CSSProperties } from 'react';
-import Heading from '../../typography/heading/heading';
-import RoutedTabs from '../routed_tabs';
-import Tab from '../tab';
-import Tabs from '../tabs';
-import icon from './assets/icon';
+import { Heading } from '../../typography/heading/heading';
+import { RoutedTabs } from '../routed_tabs';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
+import { Icon } from './assets/icon';
 
 const wrapperStyles: CSSProperties = {
   background: '#f1f1f1',
@@ -24,13 +24,13 @@ export function WithIcons() {
     <div style={wrapperStyles}>
       <Heading level={3}>Tabs</Heading>
       <Tabs activeKey="first" onSwitch={action('onSwitchTabs')}>
-        <Tab key="first" title="Before" iconStart={icon}>
+        <Tab key="first" title="Before" iconStart={Icon}>
           First tab content
         </Tab>
-        <Tab key="second" title="After" iconEnd={icon}>
+        <Tab key="second" title="After" iconEnd={Icon}>
           Second tab content
         </Tab>
-        <Tab key="third" title="Both" iconStart={icon} iconEnd={icon}>
+        <Tab key="third" title="Both" iconStart={Icon} iconEnd={Icon}>
           Third tab content
         </Tab>
       </Tabs>
@@ -39,23 +39,23 @@ export function WithIcons() {
 
       <Heading level={3}>Nested tabs</Heading>
       <Tabs activeKey="first" onSwitch={action('onSwitchNestedTabsRoot')}>
-        <Tab key="first" title="Before" iconStart={icon}>
+        <Tab key="first" title="Before" iconStart={Icon}>
           <Tabs activeKey="first" onSwitch={action('onSwitchNestedTabsChild')}>
-            <Tab key="first" title="Before" iconStart={icon}>
+            <Tab key="first" title="Before" iconStart={Icon}>
               First tab content
             </Tab>
-            <Tab key="second" title="After" iconEnd={icon}>
+            <Tab key="second" title="After" iconEnd={Icon}>
               Second tab content
             </Tab>
-            <Tab key="third" title="Both" iconStart={icon} iconEnd={icon}>
+            <Tab key="third" title="Both" iconStart={Icon} iconEnd={Icon}>
               Third tab content
             </Tab>
           </Tabs>
         </Tab>
-        <Tab key="second" title="After" iconEnd={icon}>
+        <Tab key="second" title="After" iconEnd={Icon}>
           Second tab content
         </Tab>
-        <Tab key="third" title="Both" iconStart={icon} iconEnd={icon}>
+        <Tab key="third" title="Both" iconStart={Icon} iconEnd={Icon}>
           Third tab content
         </Tab>
       </Tabs>
@@ -66,13 +66,13 @@ export function WithIcons() {
         Routed tabs (work Back/Forward browser buttons)
       </Heading>
       <RoutedTabs activeKey="first" onSwitch={action('onSwitchRoutedTabs')}>
-        <Tab key="first" title="Before" iconStart={icon}>
+        <Tab key="first" title="Before" iconStart={Icon}>
           First tab content
         </Tab>
-        <Tab key="second" title="After" iconEnd={icon}>
+        <Tab key="second" title="After" iconEnd={Icon}>
           Second tab content
         </Tab>
-        <Tab key="third" title="Both" iconStart={icon} iconEnd={icon}>
+        <Tab key="third" title="Both" iconStart={Icon} iconEnd={Icon}>
           Third tab content
         </Tab>
       </RoutedTabs>
diff --git a/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx b/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx
index 3f79cbfbcb..95094a0405 100644
--- a/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx
+++ b/mailpoet/assets/js/src/common/tabs/routed_tabs.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-router-dom';
 import { noop } from 'lodash';
 
-import Tabs, { Props as TabProps } from './tabs';
+import { Tabs, Props as TabProps } from './tabs';
 
 function RouterAwareTabs(
   props: TabProps & {
@@ -105,4 +105,4 @@ function RoutedTabs({
   );
 }
 
-export default RoutedTabs;
+export { RoutedTabs };
diff --git a/mailpoet/assets/js/src/common/tabs/tab.tsx b/mailpoet/assets/js/src/common/tabs/tab.tsx
index be1dc2c193..456a3106c8 100644
--- a/mailpoet/assets/js/src/common/tabs/tab.tsx
+++ b/mailpoet/assets/js/src/common/tabs/tab.tsx
@@ -10,8 +10,6 @@ type Props = {
   children: ReactNode;
 };
 
-function Tab({ children }: Props) {
+export function Tab({ children }: Props) {
   return <>{children}</>;
 }
-
-export default Tab;
diff --git a/mailpoet/assets/js/src/common/tabs/tabs.tsx b/mailpoet/assets/js/src/common/tabs/tabs.tsx
index 8df0f83bbf..2b0d24a262 100644
--- a/mailpoet/assets/js/src/common/tabs/tabs.tsx
+++ b/mailpoet/assets/js/src/common/tabs/tabs.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react';
 import { noop } from 'lodash';
 
-import Tab from './tab';
+import { Tab } from './tab';
 
 const validateChildren = (children: ReactNode): ReactElement[] => {
   const keys = {};
@@ -60,7 +60,7 @@ type Props = {
   children: ReactNode;
 };
 
-function Tabs({
+export function Tabs({
   activeKey,
   onSwitch = noop,
   automationId = null,
@@ -130,5 +130,4 @@ function Tabs({
   );
 }
 
-export default Tabs;
 export type { Props };
diff --git a/mailpoet/assets/js/src/common/tag/_stories/tag.tsx b/mailpoet/assets/js/src/common/tag/_stories/tag.tsx
index 5db404ca56..7ee5c583a4 100644
--- a/mailpoet/assets/js/src/common/tag/_stories/tag.tsx
+++ b/mailpoet/assets/js/src/common/tag/_stories/tag.tsx
@@ -1,5 +1,5 @@
-import Heading from 'common/typography/heading/heading';
-import Tag from '../tag';
+import { Heading } from 'common/typography/heading/heading';
+import { Tag } from '../tag';
 
 export default {
   title: 'Tag',
diff --git a/mailpoet/assets/js/src/common/tag/_stories/tags.tsx b/mailpoet/assets/js/src/common/tag/_stories/tags.tsx
index 6ef7c4a92b..c8e95fa7df 100644
--- a/mailpoet/assets/js/src/common/tag/_stories/tags.tsx
+++ b/mailpoet/assets/js/src/common/tag/_stories/tags.tsx
@@ -1,5 +1,5 @@
-import Heading from 'common/typography/heading/heading';
-import Tags from '../tags';
+import { Heading } from 'common/typography/heading/heading';
+import { Tags } from '../tags';
 
 export default {
   title: 'Tags',
diff --git a/mailpoet/assets/js/src/common/tag/index.ts b/mailpoet/assets/js/src/common/tag/index.ts
index 1993c3b7cb..1b5668eca5 100644
--- a/mailpoet/assets/js/src/common/tag/index.ts
+++ b/mailpoet/assets/js/src/common/tag/index.ts
@@ -1 +1,2 @@
-export { default as Tag } from './tag';
+export * from './tag';
+export * from './tags';
diff --git a/mailpoet/assets/js/src/common/tag/tag.tsx b/mailpoet/assets/js/src/common/tag/tag.tsx
index 8dcd863f65..164b8ad1d3 100644
--- a/mailpoet/assets/js/src/common/tag/tag.tsx
+++ b/mailpoet/assets/js/src/common/tag/tag.tsx
@@ -10,7 +10,7 @@ type Props = {
   data?: string;
 };
 
-function Tag({
+export function Tag({
   children,
   variant,
   dimension,
@@ -31,5 +31,3 @@ function Tag({
     </div>
   );
 }
-
-export default Tag;
diff --git a/mailpoet/assets/js/src/common/tag/tags.tsx b/mailpoet/assets/js/src/common/tag/tags.tsx
index c6623511cf..f42a88d2da 100644
--- a/mailpoet/assets/js/src/common/tag/tags.tsx
+++ b/mailpoet/assets/js/src/common/tag/tags.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import Tag from './tag';
+import { Tag } from './tag';
 
 type Segment = {
   name: string;
@@ -32,4 +32,4 @@ function Tags({ children, dimension, segments, strings }: Props) {
   );
 }
 
-export default Tags;
+export { Tags };
diff --git a/mailpoet/assets/js/src/common/template_box/_stories/template_box.tsx b/mailpoet/assets/js/src/common/template_box/_stories/template_box.tsx
index ca694a835a..f46a3134ab 100644
--- a/mailpoet/assets/js/src/common/template_box/_stories/template_box.tsx
+++ b/mailpoet/assets/js/src/common/template_box/_stories/template_box.tsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { action } from '@storybook/addon-actions';
-import TemplateBox from '../template_box';
+import { TemplateBox } from '../template_box';
 
 export default {
   title: 'Template Box',
diff --git a/mailpoet/assets/js/src/common/template_box/template_box.tsx b/mailpoet/assets/js/src/common/template_box/template_box.tsx
index 21d6d7ea09..b29729c784 100644
--- a/mailpoet/assets/js/src/common/template_box/template_box.tsx
+++ b/mailpoet/assets/js/src/common/template_box/template_box.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import MailPoet from 'mailpoet';
-import Heading from 'common/typography/heading/heading';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Heading } from 'common/typography/heading/heading';
+import { Button } from 'common/button/button';
 
 type Props = {
   label: string;
@@ -12,7 +12,7 @@ type Props = {
   className?: string;
 };
 
-function TemplateBox({
+export function TemplateBox({
   label,
   onSelect,
   children,
@@ -44,5 +44,3 @@ function TemplateBox({
     </div>
   );
 }
-
-export default TemplateBox;
diff --git a/mailpoet/assets/js/src/common/thumbnail.ts b/mailpoet/assets/js/src/common/thumbnail.ts
index e05c5462f9..03ddd8b27e 100644
--- a/mailpoet/assets/js/src/common/thumbnail.ts
+++ b/mailpoet/assets/js/src/common/thumbnail.ts
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import html2canvas from 'html2canvas';
 
 /**
diff --git a/mailpoet/assets/js/src/common/tooltip/_stories/tooltip.tsx b/mailpoet/assets/js/src/common/tooltip/_stories/tooltip.tsx
index ecfa734679..bbd1609ae4 100644
--- a/mailpoet/assets/js/src/common/tooltip/_stories/tooltip.tsx
+++ b/mailpoet/assets/js/src/common/tooltip/_stories/tooltip.tsx
@@ -1,5 +1,5 @@
-import Heading from 'common/typography/heading/heading';
-import Tooltip from '../tooltip';
+import { Heading } from 'common/typography/heading/heading';
+import { Tooltip } from '../tooltip';
 
 export default {
   title: 'Tooltips',
diff --git a/mailpoet/assets/js/src/common/tooltip/tooltip.tsx b/mailpoet/assets/js/src/common/tooltip/tooltip.tsx
index 75a41f8a6c..a7690c762f 100644
--- a/mailpoet/assets/js/src/common/tooltip/tooltip.tsx
+++ b/mailpoet/assets/js/src/common/tooltip/tooltip.tsx
@@ -1,7 +1,7 @@
-import classNames from 'classnames';
+import classnames from 'classnames';
 import ReactTooltip, { TooltipProps } from 'react-tooltip';
 
-function Tooltip({
+export function Tooltip({
   effect,
   textColor,
   backgroundColor,
@@ -17,7 +17,7 @@ function Tooltip({
       textColor={textColor || '#1d2327'}
       backgroundColor={backgroundColor || '#fafbfe'}
       borderColor={borderColor || '#e5e9f8'}
-      className={classNames('mailpoet-tooltip', className)}
+      className={classnames('mailpoet-tooltip', className)}
       border={border === undefined ? true : border}
       {...props}
     >
@@ -25,5 +25,3 @@ function Tooltip({
     </ReactTooltip>
   );
 }
-
-export default Tooltip;
diff --git a/mailpoet/assets/js/src/common/top_bar/_stories/top_bar_with_children.tsx b/mailpoet/assets/js/src/common/top_bar/_stories/top_bar_with_children.tsx
index 6507a139ff..89fcc431e7 100644
--- a/mailpoet/assets/js/src/common/top_bar/_stories/top_bar_with_children.tsx
+++ b/mailpoet/assets/js/src/common/top_bar/_stories/top_bar_with_children.tsx
@@ -1,6 +1,6 @@
 import { action } from '_storybook/action';
 import { TopBar } from '../top_bar';
-import Button from '../../button/button';
+import { Button } from '../../button/button';
 
 export default {
   title: 'Top Bar/With Children',
diff --git a/mailpoet/assets/js/src/common/top_bar/top_bar.tsx b/mailpoet/assets/js/src/common/top_bar/top_bar.tsx
index b62ed79bdd..e6f59ce830 100644
--- a/mailpoet/assets/js/src/common/top_bar/top_bar.tsx
+++ b/mailpoet/assets/js/src/common/top_bar/top_bar.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import t from 'common/functions/t';
+import { t } from 'common/functions/t';
 import { withFeatureAnnouncement } from 'announcements/with_feature_announcement';
 import { MailPoetLogo } from './mailpoet_logo';
 import { MailPoetLogoMobile } from './mailpoet_logo_mobile';
@@ -15,7 +15,7 @@ type Props = {
 };
 
 export function TopBar({ children, hasNews, onBeamerClick }: Props) {
-  const buttonClasses = classNames(
+  const buttonClasses = classnames(
     'mailpoet-top-bar-beamer',
     hasNews ? 'mailpoet-top-bar-beamer-dot' : '',
   );
diff --git a/mailpoet/assets/js/src/common/typography/heading/_stories/heading.tsx b/mailpoet/assets/js/src/common/typography/heading/_stories/heading.tsx
index aad70ecd7c..0eed74d5a5 100644
--- a/mailpoet/assets/js/src/common/typography/heading/_stories/heading.tsx
+++ b/mailpoet/assets/js/src/common/typography/heading/_stories/heading.tsx
@@ -1,4 +1,4 @@
-import Heading from '../heading';
+import { Heading } from '../heading';
 
 export default {
   title: 'Typography',
diff --git a/mailpoet/assets/js/src/common/typography/heading/heading.tsx b/mailpoet/assets/js/src/common/typography/heading/heading.tsx
index 14cdaccff5..8597cbce47 100644
--- a/mailpoet/assets/js/src/common/typography/heading/heading.tsx
+++ b/mailpoet/assets/js/src/common/typography/heading/heading.tsx
@@ -1,21 +1,19 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 type Props = HTMLAttributes<HTMLHeadingElement> & {
   children: ReactNode;
   level: 0 | 1 | 2 | 3 | 4 | 5;
 };
 
-function Heading({ children, level, className, ...attributes }: Props) {
+export function Heading({ children, level, className, ...attributes }: Props) {
   const Element = level === 0 ? 'h1' : (`h${level}` as const);
   return (
     <Element
-      className={classNames(className, `mailpoet-h${level}`)}
+      className={classnames(className, `mailpoet-h${level}`)}
       {...attributes}
     >
       {children}
     </Element>
   );
 }
-
-export default Heading;
diff --git a/mailpoet/assets/js/src/common/typography/list/_stories/list.tsx b/mailpoet/assets/js/src/common/typography/list/_stories/list.tsx
index af8febf9eb..20405f2e15 100644
--- a/mailpoet/assets/js/src/common/typography/list/_stories/list.tsx
+++ b/mailpoet/assets/js/src/common/typography/list/_stories/list.tsx
@@ -1,5 +1,5 @@
-import List from '../list';
-import Heading from '../../heading/heading';
+import { List } from '../list';
+import { Heading } from '../../heading/heading';
 
 export default {
   title: 'Typography',
diff --git a/mailpoet/assets/js/src/common/typography/list/list.tsx b/mailpoet/assets/js/src/common/typography/list/list.tsx
index 68c9b27ac0..340c87d9e2 100644
--- a/mailpoet/assets/js/src/common/typography/list/list.tsx
+++ b/mailpoet/assets/js/src/common/typography/list/list.tsx
@@ -5,9 +5,7 @@ type Props = {
   isOrdered?: boolean;
 };
 
-function List({ children, isOrdered }: Props) {
+export function List({ children, isOrdered }: Props) {
   const Element = isOrdered ? 'ol' : 'ul';
   return <Element className={`mailpoet-${Element}`}>{children}</Element>;
 }
-
-export default List;
diff --git a/mailpoet/assets/js/src/context/index.jsx b/mailpoet/assets/js/src/context/index.jsx
index 7f5adca097..9231fdb4b5 100644
--- a/mailpoet/assets/js/src/context/index.jsx
+++ b/mailpoet/assets/js/src/context/index.jsx
@@ -1,8 +1,8 @@
 import { createContext } from 'react';
-import useFeaturesContext from './useFeaturesContext.jsx';
-import useSegmentsContext from './useSegmentsContext.jsx';
-import useUsersContext from './useUsersContext.jsx';
-import useNotices from './useNotices.jsx';
+import { useFeaturesContext } from './useFeaturesContext.jsx';
+import { useSegmentsContext } from './useSegmentsContext.jsx';
+import { useUsersContext } from './useUsersContext.jsx';
+import { useNotices } from './useNotices.jsx';
 
 /**
  * Builds the value of the global context.
diff --git a/mailpoet/assets/js/src/context/useFeaturesContext.jsx b/mailpoet/assets/js/src/context/useFeaturesContext.jsx
index c85324b953..47a11250eb 100644
--- a/mailpoet/assets/js/src/context/useFeaturesContext.jsx
+++ b/mailpoet/assets/js/src/context/useFeaturesContext.jsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-export default function useFeaturesContext(data) {
+export function useFeaturesContext(data) {
   return useMemo(() => {
     const flags = data.mailpoet_feature_flags;
     const isSupported = (feature) => flags[feature] || false;
diff --git a/mailpoet/assets/js/src/context/useNotices.jsx b/mailpoet/assets/js/src/context/useNotices.jsx
index ccd694af75..721239996d 100644
--- a/mailpoet/assets/js/src/context/useNotices.jsx
+++ b/mailpoet/assets/js/src/context/useNotices.jsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 
-export default () => {
+export const useNotices = () => {
   const [state, setState] = useState({
     items: [],
     nextId: 1,
diff --git a/mailpoet/assets/js/src/context/useSegmentsContext.jsx b/mailpoet/assets/js/src/context/useSegmentsContext.jsx
index 6b7655b2ae..2a59dcad16 100644
--- a/mailpoet/assets/js/src/context/useSegmentsContext.jsx
+++ b/mailpoet/assets/js/src/context/useSegmentsContext.jsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-export default function useSegmentsContext(data) {
+export function useSegmentsContext(data) {
   return useMemo(
     () => ({
       all: data.mailpoetSegments,
diff --git a/mailpoet/assets/js/src/context/useUsersContext.jsx b/mailpoet/assets/js/src/context/useUsersContext.jsx
index 9271850396..d963a9a0bc 100644
--- a/mailpoet/assets/js/src/context/useUsersContext.jsx
+++ b/mailpoet/assets/js/src/context/useUsersContext.jsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-export default function useUsersContext(data) {
+export function useUsersContext(data) {
   return useMemo(
     () => ({
       isNewUser: data.mailpoet_is_new_user,
diff --git a/mailpoet/assets/js/src/experimental_features/experimental_features.jsx b/mailpoet/assets/js/src/experimental_features/experimental_features.jsx
index 0613e666d6..ec38cd0e43 100644
--- a/mailpoet/assets/js/src/experimental_features/experimental_features.jsx
+++ b/mailpoet/assets/js/src/experimental_features/experimental_features.jsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
+import { Notices } from 'notices/notices.jsx';
 
 function ExperimentalFeatures() {
   const [flags, setFlags] = useState(null);
diff --git a/mailpoet/assets/js/src/features/context.jsx b/mailpoet/assets/js/src/features/context.jsx
index 1974bf9e99..e4009d90f9 100644
--- a/mailpoet/assets/js/src/features/context.jsx
+++ b/mailpoet/assets/js/src/features/context.jsx
@@ -1,4 +1,4 @@
 import { createContext } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default createContext(MailPoet.FeaturesController);
+export const AppContext = createContext(MailPoet.FeaturesController);
diff --git a/mailpoet/assets/js/src/features_controller.js b/mailpoet/assets/js/src/features_controller.js
index dd62a8600d..404e227a7d 100644
--- a/mailpoet/assets/js/src/features_controller.js
+++ b/mailpoet/assets/js/src/features_controller.js
@@ -1,7 +1,5 @@
-const FeaturesController = (config) => ({
+export const FeaturesController = (config) => ({
   isSupported: (feature) => {
     return config[feature] || false;
   },
 });
-
-export default FeaturesController;
diff --git a/mailpoet/assets/js/src/form/fields/checkbox.jsx b/mailpoet/assets/js/src/form/fields/checkbox.jsx
index 835fa26b27..c60238b771 100644
--- a/mailpoet/assets/js/src/form/fields/checkbox.jsx
+++ b/mailpoet/assets/js/src/form/fields/checkbox.jsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import Checkbox from 'common/form/checkbox/checkbox';
+import { Checkbox } from 'common/form/checkbox/checkbox';
 
 class FormFieldCheckbox extends Component {
   constructor(props) {
@@ -47,4 +47,4 @@ FormFieldCheckbox.propTypes = {
   item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-export default FormFieldCheckbox;
+export { FormFieldCheckbox };
diff --git a/mailpoet/assets/js/src/form/fields/date.jsx b/mailpoet/assets/js/src/form/fields/date.jsx
index e64d616c6c..29090b3e84 100644
--- a/mailpoet/assets/js/src/form/fields/date.jsx
+++ b/mailpoet/assets/js/src/form/fields/date.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import Select from '../../common/form/select/select';
+import { Select } from '../../common';
 
 function FormFieldDateYear(props) {
   const yearsRange = 100;
@@ -299,4 +299,4 @@ FormFieldDate.propTypes = {
   onValueChange: PropTypes.func.isRequired,
 };
 
-export default FormFieldDate;
+export { FormFieldDate };
diff --git a/mailpoet/assets/js/src/form/fields/field.jsx b/mailpoet/assets/js/src/form/fields/field.jsx
index 515d884bce..e21efda531 100644
--- a/mailpoet/assets/js/src/form/fields/field.jsx
+++ b/mailpoet/assets/js/src/form/fields/field.jsx
@@ -1,15 +1,16 @@
 import { Component } from 'react';
-import FormFieldText from 'form/fields/text.jsx';
-import FormFieldTextarea from 'form/fields/textarea.jsx';
-import FormFieldSelect from 'form/fields/select.jsx';
-import FormFieldRadio from 'form/fields/radio.jsx';
-import FormFieldCheckbox from 'form/fields/checkbox.jsx';
-import FormFieldSelection from 'form/fields/selection.jsx';
-import FormFieldDate from 'form/fields/date.jsx';
-import Heading from 'common/typography/heading/heading';
+import { FormFieldText } from 'form/fields/text.jsx';
 import jQuery from 'jquery';
 import PropTypes from 'prop-types';
 
+import { FormFieldTextarea } from 'form/fields/textarea.jsx';
+import { FormFieldSelect } from 'form/fields/select.jsx';
+import { FormFieldRadio } from 'form/fields/radio.jsx';
+import { FormFieldCheckbox } from 'form/fields/checkbox.jsx';
+import { Selection } from 'form/fields/selection.jsx';
+import { FormFieldDate } from 'form/fields/date.jsx';
+import { Heading } from 'common/typography/heading/heading';
+
 class FormField extends Component {
   renderField = (data) => {
     let description = false;
@@ -92,7 +93,7 @@ class FormField extends Component {
 
       case 'selection':
         field = (
-          <FormFieldSelection
+          <Selection
             key={`selection-field-${dataField.name}`}
             onValueChange={data.onValueChange}
             field={data.field}
@@ -208,4 +209,4 @@ FormField.defaultProps = {
   },
 };
 
-export default FormField;
+export { FormField };
diff --git a/mailpoet/assets/js/src/form/fields/radio.jsx b/mailpoet/assets/js/src/form/fields/radio.jsx
index 05e1d2f0ee..eee470fcfd 100644
--- a/mailpoet/assets/js/src/form/fields/radio.jsx
+++ b/mailpoet/assets/js/src/form/fields/radio.jsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 
 class FormFieldRadio extends Component {
   // eslint-disable-line react/prefer-stateless-function, max-len
@@ -49,4 +49,4 @@ FormFieldRadio.defaultProps = {
   },
 };
 
-export default FormFieldRadio;
+export { FormFieldRadio };
diff --git a/mailpoet/assets/js/src/form/fields/select.jsx b/mailpoet/assets/js/src/form/fields/select.jsx
index 4ee3ccc915..9566184872 100644
--- a/mailpoet/assets/js/src/form/fields/select.jsx
+++ b/mailpoet/assets/js/src/form/fields/select.jsx
@@ -1,9 +1,9 @@
 import { Component } from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
-import Select from 'common/form/select/select';
+import { Select } from 'common/form/select/select';
 
-class FormFieldSelect extends Component {
+export class FormFieldSelect extends Component {
   render() {
     if (this.props.field.values === undefined) {
       return false;
@@ -92,5 +92,3 @@ FormFieldSelect.defaultProps = {
     // no-op
   },
 };
-
-export default FormFieldSelect;
diff --git a/mailpoet/assets/js/src/form/fields/selection.jsx b/mailpoet/assets/js/src/form/fields/selection.jsx
index 5c22092adb..f3b40a7654 100644
--- a/mailpoet/assets/js/src/form/fields/selection.jsx
+++ b/mailpoet/assets/js/src/form/fields/selection.jsx
@@ -392,4 +392,4 @@ Selection.defaultProps = {
   item: undefined,
 };
 
-export default Selection;
+export { Selection };
diff --git a/mailpoet/assets/js/src/form/fields/text.jsx b/mailpoet/assets/js/src/form/fields/text.jsx
index 7cb6c3c577..1ecd5c4847 100644
--- a/mailpoet/assets/js/src/form/fields/text.jsx
+++ b/mailpoet/assets/js/src/form/fields/text.jsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 
 // eslint-disable-next-line react/prefer-stateless-function, max-len
 class FormFieldText extends Component {
@@ -87,4 +87,4 @@ FormFieldText.defaultProps = {
   },
 };
 
-export default FormFieldText;
+export { FormFieldText };
diff --git a/mailpoet/assets/js/src/form/fields/textarea.jsx b/mailpoet/assets/js/src/form/fields/textarea.jsx
index bbf8aec592..b4e0d63ef3 100644
--- a/mailpoet/assets/js/src/form/fields/textarea.jsx
+++ b/mailpoet/assets/js/src/form/fields/textarea.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import Textarea from 'common/form/textarea/textarea';
+import { Textarea } from 'common/form/textarea/textarea';
 
 function FormFieldTextarea(props) {
   return (
@@ -39,4 +39,4 @@ FormFieldTextarea.propTypes = {
   onValueChange: PropTypes.func.isRequired,
 };
 
-export default FormFieldTextarea;
+export { FormFieldTextarea };
diff --git a/mailpoet/assets/js/src/form/form.jsx b/mailpoet/assets/js/src/form/form.jsx
index 43f08db0bc..815ddcd6af 100644
--- a/mailpoet/assets/js/src/form/form.jsx
+++ b/mailpoet/assets/js/src/form/form.jsx
@@ -1,13 +1,14 @@
+import classnames from 'classnames';
 import { createRef, Component } from 'react';
-import MailPoet from 'mailpoet';
-import classNames from 'classnames';
-import FormField from 'form/fields/field.jsx';
+import { withRouter } from 'react-router-dom';
 import jQuery from 'jquery';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+
+import { MailPoet } from 'mailpoet';
+import { FormField } from 'form/fields/field.jsx';
 import { Button } from 'common';
 
-class Form extends Component {
+class FormComponent extends Component {
   constructor(props) {
     super(props);
     this.formRef = createRef();
@@ -173,7 +174,7 @@ class Form extends Component {
       ));
     }
 
-    const formClasses = classNames('mailpoet_form', {
+    const formClasses = classnames('mailpoet_form', {
       mailpoet_form_loading: this.state.loading || this.props.loading,
     });
 
@@ -248,7 +249,7 @@ class Form extends Component {
   }
 }
 
-Form.propTypes = {
+FormComponent.propTypes = {
   params: PropTypes.shape({
     id: PropTypes.string,
   }),
@@ -279,7 +280,7 @@ Form.propTypes = {
   }).isRequired,
 };
 
-Form.defaultProps = {
+FormComponent.defaultProps = {
   params: {},
   location: {},
   errors: undefined,
@@ -307,4 +308,4 @@ Form.defaultProps = {
   endpoint: undefined,
 };
 
-export default withRouter(Form);
+export const Form = withRouter(FormComponent);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field.jsx b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field.jsx
index d34a323dbe..c82650b394 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
-import Icon from './icon.jsx';
-import Edit from './edit.jsx';
+import { MailPoet } from 'mailpoet';
+import { Icon } from './icon.jsx';
+import { AddCustomField } from './edit.jsx';
 
 export const name = 'mailpoet-form/add-custom-field';
 
@@ -14,7 +14,7 @@ export const settings = {
     html: false,
     multiple: false,
   },
-  edit: Edit,
+  edit: AddCustomField,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
index c33069cf1a..2b4c28ac83 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
@@ -2,14 +2,14 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, SelectControl, TextControl } from '@wordpress/components';
 
-import MailPoet from 'mailpoet';
 import { isEmpty } from 'lodash';
 
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
-import TextFieldSettings from '../custom_text/custom_field_settings.jsx';
-import CheckboxFieldSettings from '../custom_checkbox/custom_field_settings.jsx';
-import DateFieldSettings from '../custom_date/custom_field_settings.jsx';
-import RadioAndSelectFieldSettings from '../custom_radio/custom_field_settings.jsx';
+import { MailPoet } from 'mailpoet';
+import { CustomFieldSettings as TextFieldSettings } from '../custom_text/custom_field_settings.jsx';
+import { CustomFieldSettings as CheckboxFieldSettings } from '../custom_checkbox/custom_field_settings.jsx';
+import { CustomFieldSettings as DateFieldSettings } from '../custom_date/custom_field_settings.jsx';
+import { CustomFieldSettings as RadioAndSelectFieldSettings } from '../custom_radio/custom_field_settings.jsx';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
 
 export const customFieldTypes = [
   {
@@ -170,4 +170,4 @@ AddCustomFieldForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 };
 
-export default AddCustomFieldForm;
+export { AddCustomFieldForm };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx
index 8b551d71aa..614a2c1a68 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/edit.jsx
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import { Placeholder, Spinner } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import MailPoet from 'mailpoet';
 
-import icon from './icon.jsx';
-import AddCustomFieldForm from './add_custom_field_form.jsx';
+import { MailPoet } from 'mailpoet';
+import { Icon } from './icon.jsx';
+import { AddCustomFieldForm } from './add_custom_field_form.jsx';
 
 function AddCustomField({ clientId }) {
   const { createCustomField } = useDispatch('mailpoet-form-editor');
@@ -26,7 +26,7 @@ function AddCustomField({ clientId }) {
 
   return (
     <Placeholder
-      icon={<BlockIcon icon={icon} showColors />}
+      icon={<BlockIcon icon={Icon} showColors />}
       label={MailPoet.I18n.t('blockAddCustomFieldFormHeading')}
       className="mailpoet_custom_field_add_placeholder"
     >
@@ -46,4 +46,4 @@ AddCustomField.propTypes = {
   clientId: PropTypes.string.isRequired,
 };
 
-export default AddCustomField;
+export { AddCustomField };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/icon.jsx
index 378d3b7c19..e83c8707c1 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/add_custom_field/icon.jsx
@@ -1,6 +1,6 @@
 import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 694 694">
     <G>
       <Path
diff --git a/mailpoet/assets/js/src/form_editor/blocks/blocks.jsx b/mailpoet/assets/js/src/form_editor/blocks/blocks.jsx
index 8b1db1a686..e3671f967c 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/blocks.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/blocks.jsx
@@ -1,8 +1,8 @@
 import { registerBlockType, setCategories } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
-import MailPoet from 'mailpoet';
-import formatCustomFieldBlockName from './format_custom_field_block_name.jsx';
-import getCustomFieldBlocksSettings from './custom_fields_blocks.jsx';
+import { MailPoet } from 'mailpoet';
+import { formatCustomFieldBlockName } from './format_custom_field_block_name.jsx';
+import { getCustomFieldBlockSettings } from './custom_fields_blocks.jsx';
 
 import * as divider from './divider/divider';
 import * as email from './email/email.jsx';
@@ -19,7 +19,7 @@ import * as paragraph from './paragraph/paragraph';
 import * as image from './image/image';
 
 export const registerCustomFieldBlock = (customField) => {
-  const namesMap = getCustomFieldBlocksSettings(customField);
+  const namesMap = getCustomFieldBlockSettings(customField);
 
   if (!namesMap[customField.type]) return null;
 
diff --git a/mailpoet/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts b/mailpoet/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts
index a375ad9b61..78b94133d9 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts
+++ b/mailpoet/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts
@@ -1,6 +1,8 @@
-import HorizontalAlignment from 'common/styles';
+import { HorizontalAlignment } from 'common/styles';
 
-function convert(alignment: HorizontalAlignment): string {
+export function convertAlignmentToMargin(
+  alignment: HorizontalAlignment,
+): string {
   if (alignment === HorizontalAlignment.Right) {
     return '0 0 0 auto';
   }
@@ -9,5 +11,3 @@ function convert(alignment: HorizontalAlignment): string {
   }
   return 'auto 0';
 }
-
-export default convert;
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_checkbox.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_checkbox.jsx
index 90651b51dd..b73af8108a 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_checkbox.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_checkbox.jsx
@@ -1,5 +1,5 @@
-import Icon from '../custom_text/icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from '../custom_text/icon.jsx';
+import { CustomCheckboxEdit } from './edit.jsx';
 import { customFieldValuesToBlockValues } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/custom-checkbox';
@@ -40,7 +40,7 @@ export function getSettings(customField) {
       html: false,
       multiple: false,
     },
-    edit: Edit,
+    edit: CustomCheckboxEdit,
     save() {
       return null;
     },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx
index bc6b84966c..f12d928c5a 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx
@@ -7,8 +7,9 @@ import {
 } from '@wordpress/components';
 import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import CustomFieldDelete from '../custom_field_delete.jsx';
+
+import { MailPoet } from 'mailpoet';
+import { CustomFieldDelete } from '../custom_field_delete.jsx';
 
 function CustomFieldSettings({
   label,
@@ -119,4 +120,4 @@ CustomFieldSettings.defaultProps = {
   onChange: () => {},
 };
 
-export default CustomFieldSettings;
+export { CustomFieldSettings };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx
index 47178b4f6b..699b83f9f9 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx
@@ -2,12 +2,12 @@
 import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import CustomFieldSettings from './custom_field_settings.jsx';
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
+import { CustomFieldSettings } from './custom_field_settings.jsx';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
 
 function CustomCheckboxEdit({ attributes, setAttributes, clientId }) {
   const isSaving = useSelect(
@@ -146,4 +146,4 @@ CustomCheckboxEdit.propTypes = {
   clientId: PropTypes.string.isRequired,
 };
 
-export default CustomCheckboxEdit;
+export { CustomCheckboxEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_date.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_date.jsx
index 267288c1ed..62bd8541ac 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_date.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_date.jsx
@@ -1,5 +1,5 @@
-import Icon from '../custom_text/icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from '../custom_text/icon.jsx';
+import { CustomDateEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/custom-date';
 
@@ -41,7 +41,7 @@ export function getSettings(customField) {
       html: false,
       multiple: false,
     },
-    edit: Edit,
+    edit: CustomDateEdit,
     save() {
       return null;
     },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx
index 4006edbf64..c2575212e3 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx
@@ -6,8 +6,9 @@ import {
   TextControl,
 } from '@wordpress/components';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import CustomFieldDelete from '../custom_field_delete.jsx';
+
+import { MailPoet } from 'mailpoet';
+import { CustomFieldDelete } from '../custom_field_delete.jsx';
 
 function CustomFieldSettings({
   label,
@@ -173,4 +174,4 @@ CustomFieldSettings.defaultProps = {
   onChange: null,
 };
 
-export default CustomFieldSettings;
+export { CustomFieldSettings };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_date/date.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_date/date.jsx
index 6858f660de..1a3f208c06 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_date/date.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_date/date.jsx
@@ -310,4 +310,4 @@ FormFieldDate.defaultProps = {
   addDefaultClasses: false,
 };
 
-export default FormFieldDate;
+export { FormFieldDate };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_date/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_date/edit.jsx
index c01efb212a..515f239ee9 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_date/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_date/edit.jsx
@@ -2,14 +2,14 @@ import moment from 'moment';
 import { Panel, PanelBody } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import CustomFieldSettings from './custom_field_settings.jsx';
-import FormFieldDate from './date.jsx';
-import formatLabel from '../label_formatter.jsx';
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
+import { MailPoet } from 'mailpoet';
+import { CustomFieldSettings } from './custom_field_settings.jsx';
+import { formatLabel } from '../label_formatter.jsx';
+import { FormFieldDate } from './date.jsx';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
 
 function CustomDateEdit({ attributes, setAttributes, clientId }) {
   const isSaving = useSelect(
@@ -118,4 +118,4 @@ CustomDateEdit.propTypes = {
   setAttributes: PropTypes.func.isRequired,
 };
 
-export default CustomDateEdit;
+export { CustomDateEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_field_delete.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_field_delete.jsx
index 31eeef7350..6344835cd3 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_field_delete.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_field_delete.jsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { Button } from '@wordpress/components';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 function CustomFieldDelete({ isBusy, onDelete }) {
   const displayConfirm = useCallback(() => {
@@ -34,4 +34,4 @@ CustomFieldDelete.defaultProps = {
   onDelete: () => {},
 };
 
-export default CustomFieldDelete;
+export { CustomFieldDelete };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_fields_blocks.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_fields_blocks.jsx
index 3fa483bc1d..8b02780673 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_fields_blocks.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_fields_blocks.jsx
@@ -5,7 +5,7 @@ import * as customRadio from './custom_radio/custom_radio.jsx';
 import * as customCheckbox from './custom_checkbox/custom_checkbox.jsx';
 import * as customSelect from './custom_select/custom_select.jsx';
 
-export default function getCustomFieldBlocksSettings(customField) {
+export function getCustomFieldBlockSettings(customField) {
   return {
     date: {
       name: customDate.name,
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
index 81b11120d0..d5bed53a08 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Button, TextControl, ToggleControl } from '@wordpress/components';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { reduce, isEmpty, isEqualWith } from 'lodash';
 
-import SettingsPreview from './settings_preview.jsx';
-import CustomFieldDelete from '../custom_field_delete.jsx';
+import { MailPoet } from 'mailpoet';
+import { CustomFieldDelete } from '../custom_field_delete.jsx';
+import { Preview } from './settings_preview.jsx';
 
 function CustomFieldSettings({
   label,
@@ -80,7 +80,7 @@ function CustomFieldSettings({
         checked={localMandatory}
         onChange={setLocalMandatory}
       />
-      <SettingsPreview
+      <Preview
         remove={remove}
         update={update}
         values={localValues}
@@ -161,4 +161,4 @@ CustomFieldSettings.defaultProps = {
   useDragAndDrop: true,
 };
 
-export default CustomFieldSettings;
+export { CustomFieldSettings };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_radio.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_radio.jsx
index 865a74bbda..814b5b27b2 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_radio.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/custom_radio.jsx
@@ -1,5 +1,5 @@
-import Icon from '../custom_text/icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from '../custom_text/icon.jsx';
+import { CustomRadioEdit } from './edit.jsx';
 import { customFieldValuesToBlockValues } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/custom-radio';
@@ -40,7 +40,7 @@ export function getSettings(customField) {
       html: false,
       multiple: false,
     },
-    edit: Edit,
+    edit: CustomRadioEdit,
     save() {
       return null;
     },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/edit.jsx
index a41644fe22..adcc689528 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/edit.jsx
@@ -1,13 +1,13 @@
 import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import CustomFieldSettings from './custom_field_settings.jsx';
-import formatLabel from '../label_formatter.jsx';
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
+import { MailPoet } from 'mailpoet';
+import { CustomFieldSettings } from './custom_field_settings.jsx';
+import { formatLabel } from '../label_formatter.jsx';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
 
 function CustomRadioEdit({ attributes, setAttributes, clientId }) {
   const isSaving = useSelect(
@@ -118,4 +118,4 @@ CustomRadioEdit.propTypes = {
   clientId: PropTypes.string.isRequired,
 };
 
-export default CustomRadioEdit;
+export { CustomRadioEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
index e2d6564016..620e9faa51 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
@@ -139,4 +139,4 @@ Preview.propTypes = {
   onReorder: PropTypes.func.isRequired,
 };
 
-export default Preview;
+export { Preview };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_select/custom_select.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_select/custom_select.jsx
index 893913b6ba..1986d26fbf 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_select/custom_select.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_select/custom_select.jsx
@@ -1,5 +1,5 @@
-import Icon from '../custom_text/icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from '../custom_text/icon.jsx';
+import { CustomSelectEdit } from './edit.jsx';
 import { customFieldValuesToBlockValues } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/custom-select';
@@ -40,7 +40,7 @@ export function getSettings(customField) {
       html: false,
       multiple: false,
     },
-    edit: Edit,
+    edit: CustomSelectEdit,
     save() {
       return null;
     },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_select/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_select/edit.jsx
index 80830f8673..5f9e9eddee 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_select/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_select/edit.jsx
@@ -1,14 +1,14 @@
 import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import formatLabel from '../label_formatter.jsx';
-import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
-import convertAlignmentToMargin from '../convert_alignment_to_margin';
+import { MailPoet } from 'mailpoet';
+import { convertAlignmentToMargin } from '../convert_alignment_to_margin';
+import { CustomFieldSettings } from '../custom_radio/custom_field_settings.jsx';
+import { formatLabel } from '../label_formatter.jsx';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
 
 function CustomSelectEdit({ attributes, setAttributes, clientId }) {
   const settings = useSelect(
@@ -166,4 +166,4 @@ CustomSelectEdit.propTypes = {
   clientId: PropTypes.string.isRequired,
 };
 
-export default CustomSelectEdit;
+export { CustomSelectEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx
index 130dd4762e..1370f16f1b 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx
@@ -6,9 +6,9 @@ import {
   ToggleControl,
 } from '@wordpress/components';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 
-import CustomFieldDelete from '../custom_field_delete.jsx';
+import { MailPoet } from 'mailpoet';
+import { CustomFieldDelete } from '../custom_field_delete.jsx';
 
 function CustomFieldSettings({
   label,
@@ -128,4 +128,4 @@ CustomFieldSettings.defaultProps = {
   onChange: null,
 };
 
-export default CustomFieldSettings;
+export { CustomFieldSettings };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
index ad57bdc91c..fe25a4e146 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
@@ -1,6 +1,6 @@
 import { defaultBlockStyles } from 'form_editor/store/mapping/to_blocks/styles_mapper';
-import Icon from './icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from './icon.jsx';
+import { CustomTextEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/custom-text';
 
@@ -42,7 +42,7 @@ export function getSettings(customField) {
       html: false,
       multiple: false,
     },
-    edit: Edit,
+    edit: CustomTextEdit,
     save() {
       return null;
     },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_text/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_text/edit.jsx
index 83080cf04f..cba69bcc3d 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_text/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_text/edit.jsx
@@ -1,16 +1,16 @@
 import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import CustomFieldSettings from './custom_field_settings.jsx';
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
+import { CustomFieldSettings } from './custom_field_settings.jsx';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
 import {
   InputStylesSettings,
   inputStylesPropTypes,
 } from '../input_styles_settings.jsx';
-import TextInputEdit from '../text_input_edit.jsx';
+import { TextInputEdit } from '../text_input_edit.jsx';
 
 function CustomTextEdit({ attributes, setAttributes, clientId }) {
   const isSaving = useSelect(
@@ -109,4 +109,4 @@ CustomTextEdit.propTypes = {
   clientId: PropTypes.string.isRequired,
 };
 
-export default CustomTextEdit;
+export { CustomTextEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_text/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_text/icon.jsx
index 903279fbb6..c5a88a9ccd 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_text/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_text/icon.jsx
@@ -1,6 +1,6 @@
 import { Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path d="M0,0h24v24H0V0z" fill="none" />
     <Path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4V6h16V18z" />
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx
index da216e6d91..f5aa37fbb5 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx
@@ -1,6 +1,6 @@
 import { defaultBlockStyles } from 'form_editor/store/mapping/to_blocks/styles_mapper';
-import Icon from '../custom_text/icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from '../custom_text/icon.jsx';
+import { CustomTextAreaEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/custom-textarea';
 
@@ -46,7 +46,7 @@ export function getSettings(customField) {
       html: false,
       multiple: false,
     },
-    edit: Edit,
+    edit: CustomTextAreaEdit,
     save() {
       return null;
     },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
index ba3ffb6754..10b9a35e84 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
@@ -7,18 +7,18 @@ import {
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
-import formatLabel from '../label_formatter.jsx';
-import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
+import { MailPoet } from 'mailpoet';
+import { convertAlignmentToMargin } from '../convert_alignment_to_margin';
+import { CustomFieldSettings } from '../custom_text/custom_field_settings.jsx';
+import { formatLabel } from '../label_formatter.jsx';
 import {
-  InputStylesSettings,
   inputStylesPropTypes,
+  InputStylesSettings,
 } from '../input_styles_settings.jsx';
-import convertAlignmentToMargin from '../convert_alignment_to_margin';
+import { mapCustomFieldFormData } from '../map_custom_field_form_data.jsx';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
 
 function CustomTextAreaEdit({ name, attributes, setAttributes, clientId }) {
   const id = `${name.replace(/[^a-zA-Z]/g, '')}_${Math.random()
@@ -238,4 +238,4 @@ CustomTextAreaEdit.propTypes = {
   name: PropTypes.string.isRequired,
 };
 
-export default CustomTextAreaEdit;
+export { CustomTextAreaEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/divider/divider.ts b/mailpoet/assets/js/src/form_editor/blocks/divider/divider.ts
index d2ee1e7ffc..8fbee6eaee 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/divider/divider.ts
+++ b/mailpoet/assets/js/src/form_editor/blocks/divider/divider.ts
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
-import icon from './icon.jsx';
-import edit from './edit';
+import { MailPoet } from 'mailpoet';
+import { Icon } from './icon.jsx';
+import { DividerEdit } from './edit';
 import { defaultAttributes } from './divider_types';
 
 export const name = 'mailpoet-form/divider';
@@ -8,7 +8,7 @@ export const name = 'mailpoet-form/divider';
 export const settings = {
   title: MailPoet.I18n.t('blockDivider'),
   description: null,
-  icon,
+  icon: Icon,
   category: 'design',
   attributes: {
     height: {
@@ -40,7 +40,7 @@ export const settings = {
     html: false,
     multiple: true,
   },
-  edit,
+  edit: DividerEdit,
   save(): null {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/divider/edit.tsx b/mailpoet/assets/js/src/form_editor/blocks/divider/edit.tsx
index 83dad236ec..78b3ca874d 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/divider/edit.tsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/divider/edit.tsx
@@ -1,8 +1,8 @@
 import { CSSProperties } from 'react';
 import classnames from 'classnames';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { InspectorControls } from '@wordpress/block-editor';
-import ColorSettings from 'form_editor/components/color_settings';
+import { ColorSettings } from 'form_editor/components/color_settings';
 import {
   Panel,
   PanelBody,
@@ -10,14 +10,14 @@ import {
   SelectControl,
   ToggleControl,
 } from '@wordpress/components';
-import { Attributes, Style, Types, defaultAttributes } from './divider_types';
+import { Attributes, defaultAttributes, Style, Types } from './divider_types';
 
 type Props = {
   attributes: Attributes;
   setAttributes: (attribute) => void;
 };
 
-function DividerEdit({ attributes, setAttributes }: Props): JSX.Element {
+export function DividerEdit({ attributes, setAttributes }: Props): JSX.Element {
   const attributeDividerHeight =
     attributes.dividerHeight ?? defaultAttributes.dividerHeight;
   const attributeDividerWidth =
@@ -154,4 +154,3 @@ function DividerEdit({ attributes, setAttributes }: Props): JSX.Element {
     </>
   );
 }
-export default DividerEdit;
diff --git a/mailpoet/assets/js/src/form_editor/blocks/divider/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/divider/icon.jsx
index 48d8741ace..a0f69bab4d 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/divider/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/divider/icon.jsx
@@ -1,6 +1,6 @@
 import { Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path fill="none" d="M0 0h24v24H0V0z" />
     <Path d="M19 13H5v-2h14v2z" />
diff --git a/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx
index c110889f7f..404ae158e7 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx
@@ -6,13 +6,13 @@ import {
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 
-import TextInputEdit from '../text_input_edit.jsx';
+import { MailPoet } from 'mailpoet';
 import {
-  InputStylesSettings,
   inputStylesPropTypes,
+  InputStylesSettings,
 } from '../input_styles_settings.jsx';
+import { TextInputEdit } from '../text_input_edit.jsx';
 
 function EmailEdit({ attributes, setAttributes }) {
   const inspectorControls = (
@@ -64,4 +64,4 @@ EmailEdit.propTypes = {
   setAttributes: PropTypes.func.isRequired,
 };
 
-export default EmailEdit;
+export { EmailEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/email/email.jsx b/mailpoet/assets/js/src/form_editor/blocks/email/email.jsx
index 559523e0b8..dc3735df25 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/email/email.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/email/email.jsx
@@ -1,14 +1,14 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { defaultBlockStyles } from 'form_editor/store/mapping/to_blocks/styles_mapper';
-import edit from './edit.jsx';
-import icon from './icon.jsx';
+import { EmailEdit } from './edit.jsx';
+import { Icon } from './icon.jsx';
 
 export const name = 'mailpoet-form/email-input';
 
 export const settings = {
   title: MailPoet.I18n.t('blockEmail'),
   description: MailPoet.I18n.t('blockEmailDescription'),
-  icon,
+  icon: Icon,
   category: 'obligatory',
   attributes: {
     label: {
@@ -29,7 +29,7 @@ export const settings = {
     inserter: false,
     multiple: false,
   },
-  edit,
+  edit: EmailEdit,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/email/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/email/icon.jsx
index 8413ab58eb..9f16efb999 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/email/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/email/icon.jsx
@@ -1,6 +1,6 @@
 import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path fill="none" d="M0 0h24v24H0V0z" />
     <G>
diff --git a/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx
index cf6f492c7e..08fbee212a 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx
@@ -6,9 +6,9 @@ import {
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-import TextInputEdit from '../text_input_edit.jsx';
+import { TextInputEdit } from '../text_input_edit.jsx';
 import {
   InputStylesSettings,
   inputStylesPropTypes,
@@ -71,4 +71,4 @@ FirstNameEdit.propTypes = {
   setAttributes: PropTypes.func.isRequired,
 };
 
-export default FirstNameEdit;
+export { FirstNameEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/first_name/first_name.jsx b/mailpoet/assets/js/src/form_editor/blocks/first_name/first_name.jsx
index e2ea5ecd37..ef67c58b6f 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/first_name/first_name.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/first_name/first_name.jsx
@@ -1,14 +1,14 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { defaultBlockStyles } from 'form_editor/store/mapping/to_blocks/styles_mapper';
-import icon from './icon.jsx';
-import edit from './edit.jsx';
+import { Icon } from './icon.jsx';
+import { FirstNameEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/first-name-input';
 
 export const settings = {
   title: MailPoet.I18n.t('blockFirstName'),
   description: MailPoet.I18n.t('blockFirstNameDescription'),
-  icon,
+  icon: Icon,
   category: 'fields',
   attributes: {
     label: {
@@ -32,7 +32,7 @@ export const settings = {
     html: false,
     multiple: false,
   },
-  edit,
+  edit: FirstNameEdit,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/first_name/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/first_name/icon.jsx
index 8f9a097c6f..9ab78badc2 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/first_name/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/first_name/icon.jsx
@@ -1,6 +1,6 @@
 import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path fill="none" d="M0 0h24v24H0V0z" />
     <G>
diff --git a/mailpoet/assets/js/src/form_editor/blocks/format_custom_field_block_name.jsx b/mailpoet/assets/js/src/form_editor/blocks/format_custom_field_block_name.jsx
index c6100840cf..70897a9dd7 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/format_custom_field_block_name.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/format_custom_field_block_name.jsx
@@ -1,10 +1,8 @@
 import slugify from 'slugify';
 
-function formatCustomFieldBlockName(blockName, customField) {
+export function formatCustomFieldBlockName(blockName, customField) {
   const name = slugify(customField.name, { lower: true })
     .replace(/[^a-z0-9]+/g, '')
     .replace(/-$/, '');
   return `${blockName}-${name}`;
 }
-
-export default formatCustomFieldBlockName;
diff --git a/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx
index bae9264d61..7b41585fe3 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx
@@ -8,12 +8,12 @@ import {
 } from '@wordpress/components';
 import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { debounce } from 'lodash';
 import { useSelect } from '@wordpress/data';
-import { mapColorSlugToValue } from 'form_editor/store/mapping/from_blocks/styles_mapper';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
+import { MailPoet } from 'mailpoet';
+import { mapColorSlugToValue } from 'form_editor/store/mapping/from_blocks/styles_mapper';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
 
 function CustomHtmlEdit({ attributes, setAttributes, clientId }) {
   const colorDefinitions = useSetting('color.palette');
@@ -127,4 +127,4 @@ CustomHtmlEdit.propTypes = {
   clientId: PropTypes.string.isRequired,
 };
 
-export default CustomHtmlEdit;
+export { CustomHtmlEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/html/html.jsx b/mailpoet/assets/js/src/form_editor/blocks/html/html.jsx
index 4033471f13..56adfa96c4 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/html/html.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/html/html.jsx
@@ -1,13 +1,13 @@
-import MailPoet from 'mailpoet';
-import icon from './icon.jsx';
-import edit from './edit.jsx';
+import { MailPoet } from 'mailpoet';
+import { Icon } from './icon.jsx';
+import { CustomHtmlEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/html';
 
 export const settings = {
   title: MailPoet.I18n.t('blockCustomHtml'),
   description: MailPoet.I18n.t('blockCustomHtmlDescription'),
-  icon,
+  icon: Icon,
   category: 'fields',
   attributes: {
     content: {
@@ -23,7 +23,7 @@ export const settings = {
     html: false,
     multiple: true,
   },
-  edit,
+  edit: CustomHtmlEdit,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/html/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/html/icon.jsx
index 84cecde744..382bb596ec 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/html/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/html/icon.jsx
@@ -1,6 +1,6 @@
 import { SVG, Path } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path d="M4.5,11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5V11z M7,10.5h1.5V15H10v-4.5h1.5V9H7V10.5z M14.5,10l-1-1H12v6h1.5v-3.9  l1,1l1-1V15H17V9h-1.5L14.5,10z M19.5,13.5V9H18v6h5v-1.5H19.5z" />
   </SVG>
diff --git a/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx
index 2a4a338a86..b24a1d0546 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import {
   Button,
   Panel,
@@ -11,7 +11,7 @@ import { useDispatch } from '@wordpress/data';
 import { partial } from 'lodash';
 import PropTypes from 'prop-types';
 
-import ColorSettings from 'form_editor/components/color_settings';
+import { ColorSettings } from 'form_editor/components/color_settings';
 
 function InputStylesSettings({ styles, onChange }) {
   const localStylesRef = useRef(styles);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/label_formatter.jsx b/mailpoet/assets/js/src/form_editor/blocks/label_formatter.jsx
index 0d147f7cba..cd2a31fb39 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/label_formatter.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/label_formatter.jsx
@@ -1,4 +1,4 @@
-export default (attributes) => {
+export const formatLabel = (attributes) => {
   const labelText = attributes.label ? attributes.label : '';
   if (attributes.mandatory) {
     return `${labelText} *`;
diff --git a/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx
index 3ca67245e0..dcd77bed21 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx
@@ -6,12 +6,12 @@ import {
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 
-import TextInputEdit from '../text_input_edit.jsx';
+import { MailPoet } from 'mailpoet';
+import { TextInputEdit } from '../text_input_edit.jsx';
 import {
-  InputStylesSettings,
   inputStylesPropTypes,
+  InputStylesSettings,
 } from '../input_styles_settings.jsx';
 
 function LastNameEdit({ attributes, setAttributes }) {
@@ -70,4 +70,4 @@ LastNameEdit.propTypes = {
   setAttributes: PropTypes.func.isRequired,
 };
 
-export default LastNameEdit;
+export { LastNameEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/last_name/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/last_name/icon.jsx
index 8f9a097c6f..9ab78badc2 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/last_name/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/last_name/icon.jsx
@@ -1,6 +1,6 @@
 import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path fill="none" d="M0 0h24v24H0V0z" />
     <G>
diff --git a/mailpoet/assets/js/src/form_editor/blocks/last_name/last_name.jsx b/mailpoet/assets/js/src/form_editor/blocks/last_name/last_name.jsx
index 98ad154aab..9ba3bf7af7 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/last_name/last_name.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/last_name/last_name.jsx
@@ -1,14 +1,14 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { defaultBlockStyles } from 'form_editor/store/mapping/to_blocks/styles_mapper';
-import icon from './icon.jsx';
-import edit from './edit.jsx';
+import { Icon } from './icon.jsx';
+import { LastNameEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/last-name-input';
 
 export const settings = {
   title: MailPoet.I18n.t('blockLastName'),
   description: MailPoet.I18n.t('blockLastNameDescription'),
-  icon,
+  icon: Icon,
   category: 'fields',
   attributes: {
     label: {
@@ -32,7 +32,7 @@ export const settings = {
     html: false,
     multiple: false,
   },
-  edit,
+  edit: LastNameEdit,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx b/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx
index a7ffb1f5a3..9d590f1420 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx
@@ -1,4 +1,4 @@
-function mapFormDataToParams(fieldType, data) {
+export function mapCustomFieldFormData(fieldType, data) {
   switch (fieldType) {
     case 'checkbox':
       return {
@@ -51,5 +51,3 @@ function mapFormDataToParams(fieldType, data) {
       throw new Error(`Invalid custom field type ${fieldType}!`);
   }
 }
-
-export default mapFormDataToParams;
diff --git a/mailpoet/assets/js/src/form_editor/blocks/paragraph_edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/paragraph_edit.jsx
index 6160c9b7e7..9933c04bda 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/paragraph_edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/paragraph_edit.jsx
@@ -18,4 +18,4 @@ ParagraphEdit.defaultProps = {
   className: '',
 };
 
-export default ParagraphEdit;
+export { ParagraphEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx
index f4fcf9ba08..1bda8d0481 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
 import { useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import Settings from './settings.jsx';
+import { MailPoet } from 'mailpoet';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
+import { SegmentSelectSettings } from './settings.jsx';
 
 function SegmentSelectEdit({ attributes, setAttributes }) {
   const segments = useSelect(
@@ -53,7 +53,7 @@ function SegmentSelectEdit({ attributes, setAttributes }) {
 
   return (
     <ParagraphEdit className={attributes.className}>
-      <Settings
+      <SegmentSelectSettings
         label={attributes.label}
         onLabelChanged={(label) => setAttributes({ label })}
         segmentsAddedIntoSelection={valuesWithNames}
@@ -91,4 +91,4 @@ SegmentSelectEdit.propTypes = {
   setAttributes: PropTypes.func.isRequired,
 };
 
-export default SegmentSelectEdit;
+export { SegmentSelectEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/icon.jsx
index f49b8d1d94..fe68db72dc 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/icon.jsx
@@ -1,6 +1,6 @@
 import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <G>
       <Path d="M9 19h12v-2H9v2zm0-6h12v-2H9v2zm0-8v2h12V5H9zm-4-.5c-.828 0-1.5.672-1.5 1.5S4.172 7.5 5 7.5 6.5 6.828 6.5 6 5.828 4.5 5 4.5zm0 6c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm0 6c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5z" />
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/segment_select.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/segment_select.jsx
index bda1c8377a..f6b2f77363 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/segment_select.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/segment_select.jsx
@@ -1,13 +1,13 @@
-import MailPoet from 'mailpoet';
-import icon from './icon.jsx';
-import edit from './edit.jsx';
+import { MailPoet } from 'mailpoet';
+import { Icon } from './icon.jsx';
+import { SegmentSelectEdit } from './edit.jsx';
 
 export const name = 'mailpoet-form/segment-select';
 
 export const settings = {
   title: MailPoet.I18n.t('blockSegmentSelect'),
   description: MailPoet.I18n.t('blockLastNameDescription'),
-  icon,
+  icon: Icon,
   category: 'fields',
   attributes: {
     label: {
@@ -23,7 +23,7 @@ export const settings = {
     html: false,
     multiple: false,
   },
-  edit,
+  edit: SegmentSelectEdit,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx
index 55db19fb03..6fd875d119 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx
@@ -1,4 +1,3 @@
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
 import { InspectorControls } from '@wordpress/block-editor';
 import {
@@ -10,7 +9,8 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
-import Preview from './settings_preview.jsx';
+import { MailPoet } from 'mailpoet';
+import { Preview } from './settings_preview.jsx';
 
 const findSegment = (segments, segmentId) =>
   segments.find((s) => s.id === segmentId);
@@ -116,4 +116,4 @@ SegmentSelectSettings.propTypes = {
   ).isRequired,
 };
 
-export default SegmentSelectSettings;
+export { SegmentSelectSettings };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
index 7f7a6cc190..e7add51c58 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
@@ -112,4 +112,4 @@ Preview.propTypes = {
   onSegmentsReorder: PropTypes.func.isRequired,
 };
 
-export default Preview;
+export { Preview };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx b/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx
index a4f98c53d6..c5c469254e 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx
@@ -1,12 +1,12 @@
+import classnames from 'classnames';
 import { CSSProperties } from 'react';
 import { Panel, PanelBody, TextControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
-import MailPoet from 'mailpoet';
-import classnames from 'classnames';
 import { useSelect } from '@wordpress/data';
 
-import ParagraphEdit from '../paragraph_edit.jsx';
-import StylesSettings from './styles_settings';
+import { MailPoet } from 'mailpoet';
+import { ParagraphEdit } from '../paragraph_edit.jsx';
+import { StylesSettings } from './styles_settings';
 import {
   FormSettingsType,
   InputBlockStyles,
@@ -122,4 +122,4 @@ function SubmitEdit({ attributes, setAttributes }: Props): JSX.Element {
   );
 }
 
-export default SubmitEdit;
+export { SubmitEdit };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/submit/icon.jsx b/mailpoet/assets/js/src/form_editor/blocks/submit/icon.jsx
index 8f9a097c6f..9ab78badc2 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/submit/icon.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/submit/icon.jsx
@@ -1,6 +1,6 @@
 import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const Icon = (
   <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <Path fill="none" d="M0 0h24v24H0V0z" />
     <G>
diff --git a/mailpoet/assets/js/src/form_editor/blocks/submit/styles_settings.tsx b/mailpoet/assets/js/src/form_editor/blocks/submit/styles_settings.tsx
index 7999d06751..05faa5dafb 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/submit/styles_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/submit/styles_settings.tsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import {
   Panel,
   PanelBody,
@@ -8,11 +8,11 @@ import {
 } from '@wordpress/components';
 import { partial } from 'lodash';
 
-import ColorGradientSettings from 'form_editor/components/color_gradient_settings';
-import ColorSettings from 'form_editor/components/color_settings';
-import FontSizeSetting from 'form_editor/components/font_size_settings';
+import { ColorGradientSettings } from 'form_editor/components/color_gradient_settings';
+import { ColorSettings } from 'form_editor/components/color_settings';
+import { FontSizeSettings } from 'form_editor/components/font_size_settings';
 import { InputBlockStyles } from 'form_editor/store/form_data_types';
-import FontFamilySettings from '../../components/font_family_settings';
+import { FontFamilySettings } from '../../components/font_family_settings';
 
 type Props = {
   styles: InputBlockStyles;
@@ -91,7 +91,7 @@ function StylesSettings({
                 value={styles.fontColor}
                 onChange={partial(updateStyles, 'fontColor')}
               />
-              <FontSizeSetting
+              <FontSizeSettings
                 value={styles.fontSize}
                 onChange={partial(updateStyles, 'fontSize')}
               />
@@ -156,4 +156,4 @@ function StylesSettings({
   );
 }
 
-export default StylesSettings;
+export { StylesSettings };
diff --git a/mailpoet/assets/js/src/form_editor/blocks/submit/submit.jsx b/mailpoet/assets/js/src/form_editor/blocks/submit/submit.jsx
index 4f992e485e..60a64638c5 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/submit/submit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/submit/submit.jsx
@@ -1,13 +1,13 @@
-import MailPoet from 'mailpoet';
-import edit from './edit';
-import icon from './icon.jsx';
+import { MailPoet } from 'mailpoet';
+import { SubmitEdit } from './edit';
+import { Icon } from './icon.jsx';
 
 export const name = 'mailpoet-form/submit-button';
 
 export const settings = {
   title: MailPoet.I18n.t('blockSubmit'),
   description: MailPoet.I18n.t('blockSubmitDescription'),
-  icon,
+  icon: Icon,
   category: 'obligatory',
   attributes: {
     label: {
@@ -27,7 +27,7 @@ export const settings = {
     inserter: false,
     multiple: false,
   },
-  edit,
+  edit: SubmitEdit,
   save() {
     return null;
   },
diff --git a/mailpoet/assets/js/src/form_editor/blocks/text_input_edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/text_input_edit.jsx
index 89ccb848e6..4e3515b9fb 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/text_input_edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/text_input_edit.jsx
@@ -1,10 +1,11 @@
 import { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelect } from '@wordpress/data';
-import ParagraphEdit from './paragraph_edit.jsx';
-import formatLabel from './label_formatter.jsx';
+
+import { ParagraphEdit } from './paragraph_edit.jsx';
+import { formatLabel } from './label_formatter.jsx';
 import { inputStylesPropTypes } from './input_styles_settings.jsx';
-import convertAlignmentToMargin from './convert_alignment_to_margin';
+import { convertAlignmentToMargin } from './convert_alignment_to_margin';
 
 function TextInputEdit({
   label,
@@ -127,4 +128,4 @@ TextInputEdit.defaultProps = {
   className: '',
 };
 
-export default TextInputEdit;
+export { TextInputEdit };
diff --git a/mailpoet/assets/js/src/form_editor/components/close_button_settings.tsx b/mailpoet/assets/js/src/form_editor/components/close_button_settings.tsx
index 2638394e16..be921c36a9 100644
--- a/mailpoet/assets/js/src/form_editor/components/close_button_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/close_button_settings.tsx
@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { BaseControl } from '@wordpress/components';
 
-import SelectionItem from './form_settings/selection_item';
+import { SelectionItem } from './form_settings/selection_item';
 
 type CloseButtonProps = {
   label: string;
diff --git a/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx b/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx
index 65a9ad843c..7628dc9e96 100644
--- a/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx
@@ -9,7 +9,7 @@ type Props = {
   onGradientChange: (value: string | undefined) => void;
 };
 
-function ColorGradientSettings({
+export function ColorGradientSettings({
   name,
   colorValue,
   gradientValue,
@@ -33,5 +33,3 @@ function ColorGradientSettings({
     </div>
   );
 }
-
-export default ColorGradientSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/color_settings.tsx b/mailpoet/assets/js/src/form_editor/components/color_settings.tsx
index f93ec3e72b..f9520cea54 100644
--- a/mailpoet/assets/js/src/form_editor/components/color_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/color_settings.tsx
@@ -7,7 +7,7 @@ type Props = {
   onChange: (value: string | undefined) => void;
 };
 
-function ColorSettings({ name, value, onChange }: Props): JSX.Element {
+export function ColorSettings({ name, value, onChange }: Props): JSX.Element {
   const settingsColors = useSetting('color.palette');
   return (
     <div>
@@ -22,5 +22,3 @@ function ColorSettings({ name, value, onChange }: Props): JSX.Element {
     </div>
   );
 }
-
-export default ColorSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/editor.jsx b/mailpoet/assets/js/src/form_editor/components/editor.jsx
index 536c3728a6..9e374ffe60 100644
--- a/mailpoet/assets/js/src/form_editor/components/editor.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/editor.jsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, SlotFillProvider } from '@wordpress/components';
@@ -13,19 +14,19 @@ import {
   SETTINGS_DEFAULTS,
 } from '@wordpress/block-editor';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-import classnames from 'classnames';
-import fetchLinkSuggestions from '../utils/link_suggestions';
-import Header from './header.jsx';
+
+import { fetchLinkSuggestions } from '../utils/link_suggestions';
+import { Header } from './header.jsx';
 import { Tutorial } from './tutorial';
-import Sidebar from './sidebar/sidebar';
-import Inserter from './inserter';
-import Notices from './notices.jsx';
-import UnsavedChangesNotice from './unsaved_changes_notice.jsx';
-import FormStyles from './form_styles.jsx';
-import Preview from './preview/preview';
-import FormStylingBackground from './form_styling_background.jsx';
+import { Sidebar } from './sidebar/sidebar';
+import { Inserter } from './inserter';
+import { Notices } from './notices.jsx';
+import { UnsavedChangesNotice } from './unsaved_changes_notice.jsx';
+import { FormStyles } from './form_styles.jsx';
+import { FormPreview } from './preview/preview';
+import { FormStylingBackground } from './form_styling_background.jsx';
 import { CustomFontsStyleSheetLink } from './font_family_settings';
-import Fullscreen from './fullscreen';
+import { Fullscreen } from './fullscreen';
 
 /**
  * This component renders the form editor app.
@@ -36,7 +37,7 @@ import Fullscreen from './fullscreen';
  * To find out more about how block editor components are used visit
  * https://developer.wordpress.org/block-editor/packages/packages-block-editor/
  */
-export default function Editor() {
+export function Editor() {
   const sidebarOpened = useSelect(
     (sel) => sel('mailpoet-form-editor').getSidebarOpened(),
     [],
@@ -161,7 +162,7 @@ export default function Editor() {
           </div>
         </SlotFillProvider>
       </ShortcutProvider>
-      <Preview />
+      <FormPreview />
       <Tutorial />
     </>
   );
diff --git a/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx b/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx
index 9461801cb3..017583ae19 100644
--- a/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx
@@ -9,7 +9,7 @@ type Props = {
   onToggle: () => void;
 };
 
-function FeatureToggle({
+export function FeatureToggle({
   isActive,
   label,
   info,
@@ -27,5 +27,3 @@ function FeatureToggle({
     </MenuItem>
   );
 }
-
-export default FeatureToggle;
diff --git a/mailpoet/assets/js/src/form_editor/components/font_family_settings.tsx b/mailpoet/assets/js/src/form_editor/components/font_family_settings.tsx
index c857ed73fe..4801f59133 100644
--- a/mailpoet/assets/js/src/form_editor/components/font_family_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/font_family_settings.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { CustomSelectControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 const standardFonts = [
   'Arial',
@@ -22,7 +22,7 @@ type Props = {
   hideLabelFromVision?: boolean;
 };
 
-function FontFamilySettings({
+export function FontFamilySettings({
   onChange,
   value,
   name,
@@ -102,8 +102,6 @@ function FontFamilySettings({
   );
 }
 
-export default FontFamilySettings;
-
 export function CustomFontsStyleSheetLink(): JSX.Element {
   const customFonts = useSelect(
     (select) => select('mailpoet-form-editor').getAllCustomFonts(),
diff --git a/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx b/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx
index 1e05607f39..f34b8ec8e7 100644
--- a/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx
@@ -6,11 +6,9 @@ type Props = {
   onChange: (value: string | undefined) => void;
 };
 
-function FontSizeSettings({ value, onChange }: Props): JSX.Element {
+export function FontSizeSettings({ value, onChange }: Props): JSX.Element {
   const fontSizes = useSetting('typography.fontSizes');
   return (
     <FontSizePicker value={value} onChange={onChange} fontSizes={fontSizes} />
   );
 }
-
-export default FontSizeSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx
index fa07d27875..4607a14761 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx
@@ -1,5 +1,5 @@
 import { action } from '_storybook/action';
-import SelectionItem from '../selection_item';
+import { SelectionItem } from '../selection_item';
 
 export default {
   title: 'FormEditor/Selection Item',
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx
index 507e445946..e0a636eade 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx
@@ -8,12 +8,12 @@ import {
   SelectControl,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { isEqual } from 'lodash';
-import Selection from './selection.jsx';
-import FormTitle from '../form_title';
+import { Selection } from './selection.jsx';
+import { FormTitle } from '../form_title';
 
 function BasicSettingsPanel({ onToggle, isOpened }) {
   const settings = useSelect(
@@ -169,4 +169,4 @@ BasicSettingsPanel.propTypes = {
   isOpened: PropTypes.bool.isRequired,
 };
 
-export default BasicSettingsPanel;
+export { BasicSettingsPanel };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx
index 87f15ab6ad..3bb86eb1fa 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx
@@ -66,4 +66,4 @@ CodemirrorWrap.defaultProps = {
   },
 };
 
-export default CodemirrorWrap;
+export { CodemirrorWrap };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx
index 34f73e5f9d..30458982d2 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx
@@ -1,8 +1,9 @@
 import { Panel, PanelBody } from '@wordpress/components';
-import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 import PropTypes from 'prop-types';
-import CodeMirror from './codemirror_wrap.jsx';
+
+import { MailPoet } from 'mailpoet';
+import { CodemirrorWrap } from './codemirror_wrap.jsx';
 
 function CustomCssPanel({ onToggle, isOpened }) {
   const styles = useSelect(
@@ -19,7 +20,7 @@ function CustomCssPanel({ onToggle, isOpened }) {
         opened={isOpened}
         onToggle={onToggle}
       >
-        <CodeMirror value={styles} onChange={changeFormStyles} />
+        <CodemirrorWrap value={styles} onChange={changeFormStyles} />
       </PanelBody>
     </Panel>
   );
@@ -30,4 +31,4 @@ CustomCssPanel.propTypes = {
   isOpened: PropTypes.bool.isRequired,
 };
 
-export default CustomCssPanel;
+export { CustomCssPanel };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/_stories/form_placement_option.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/_stories/form_placement_option.tsx
index da700f1347..8f3c885dd5 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/_stories/form_placement_option.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/_stories/form_placement_option.tsx
@@ -1,6 +1,6 @@
 import { action } from '_storybook/action';
-import Option from '../form_placement_option';
-import Icon from '../icons/sidebar_icon';
+import { FormPlacementOption } from '../form_placement_option';
+import { SidebarIcon } from '../icons/sidebar_icon';
 
 export default {
   title: 'FormEditor/Form Placement Options',
@@ -9,21 +9,21 @@ export default {
 export function Options(): JSX.Element {
   return (
     <>
-      <Option
+      <FormPlacementOption
         label="Active option"
-        icon={Icon}
+        icon={SidebarIcon}
         active
         onClick={action('active option click')}
       />
-      <Option
+      <FormPlacementOption
         label="Inactive option"
-        icon={Icon}
+        icon={SidebarIcon}
         active={false}
         onClick={action('inactive option click')}
       />
-      <Option
+      <FormPlacementOption
         label="Always inactive"
-        icon={Icon}
+        icon={SidebarIcon}
         active
         canBeActive={false}
         onClick={action('inactive option click')}
@@ -36,21 +36,21 @@ export function OptionsListInSidebar(): JSX.Element {
   return (
     <div className="edit-post-sidebar mailpoet_form_editor_sidebar">
       <div className="form-placement-option-list">
-        <Option
+        <FormPlacementOption
           label="Active option"
-          icon={Icon}
+          icon={SidebarIcon}
           active
           onClick={action('active option click')}
         />
-        <Option
+        <FormPlacementOption
           label="Inactive option"
-          icon={Icon}
+          icon={SidebarIcon}
           active={false}
           onClick={action('inactive option click')}
         />
-        <Option
+        <FormPlacementOption
           label="Always inactive"
-          icon={Icon}
+          icon={SidebarIcon}
           active
           canBeActive={false}
           onClick={action('inactive option click')}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
index 1bf629e1cb..4c0e8ef183 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
@@ -1,10 +1,10 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-import Icon from './icons/below_pages_icon';
-import FormPlacementOption from './form_placement_option';
+import { BelowPageIcon } from './icons/below_pages_icon';
+import { FormPlacementOption } from './form_placement_option';
 
-function BelowPages(): JSX.Element {
+export function BelowPages(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -16,11 +16,9 @@ function BelowPages(): JSX.Element {
     <FormPlacementOption
       active={formSettings.formPlacement.belowPosts.enabled}
       label={MailPoet.I18n.t('placeFormBellowPages')}
-      icon={Icon}
+      icon={BelowPageIcon}
       onClick={(): void => showPlacementSettings('below_post')}
       canBeActive
     />
   );
 }
-
-export default BelowPages;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx
index eadd0d1b1a..cdbfbe80a6 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx
@@ -1,10 +1,10 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-import FormPlacementOption from './form_placement_option';
-import Icon from './icons/fixed_bar_icon';
+import { FormPlacementOption } from './form_placement_option';
+import { FixedBarIcon } from './icons/fixed_bar_icon';
 
-function FixedBar(): JSX.Element {
+export function FixedBar(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -15,11 +15,9 @@ function FixedBar(): JSX.Element {
     <FormPlacementOption
       active={formSettings.formPlacement.fixedBar.enabled}
       label={MailPoet.I18n.t('placeFixedBarFormOnPages')}
-      icon={Icon}
+      icon={FixedBarIcon}
       onClick={(): void => showPlacementSettings('fixed_bar')}
       canBeActive
     />
   );
 }
-
-export default FixedBar;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
index 79c5c45462..25a42961a0 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
@@ -1,4 +1,4 @@
-import SelectionItem from '../selection_item';
+import { SelectionItem } from '../selection_item';
 
 type Props = {
   label: string;
@@ -36,4 +36,4 @@ FormPlacementOption.defaultProps = {
   canBeActive: true,
 };
 
-export default FormPlacementOption;
+export { FormPlacementOption };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx
index b53446f794..04b9aa3890 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, Rect, G } from '@wordpress/components';
+import { G, Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export const BelowPageIcon = (
   <SVG
     width="144"
     height="120"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx
index db475a3568..b3de21812b 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, G } from '@wordpress/components';
+import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const CheckboxIcon = (
   <SVG
     width="13"
     height="13"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx
index ee8613b7c6..2ee8965a1e 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, Rect, G } from '@wordpress/components';
+import { G, Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export const FixedBarIcon = (
   <SVG
     width="144"
     height="120"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx
index a576d31b65..8561efe7bd 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, Rect, G } from '@wordpress/components';
+import { G, Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export const PopupIcon = (
   <SVG
     width="144"
     height="120"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx
index b8feacecf8..2ef22c3785 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, G } from '@wordpress/components';
+import { G, Path, SVG } from '@wordpress/components';
 
-export default (
+export const SettingsIcon = (
   <SVG
     width="14px"
     height="14px"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx
index 334e8069c5..dcc2f0da25 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, Rect, G } from '@wordpress/components';
+import { G, Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export const SidebarIcon = (
   <SVG
     xmlns="http://www.w3.org/2000/svg"
     width="144"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx
index 2f3b8c116d..e7fce002c0 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx
@@ -1,6 +1,6 @@
-import { SVG, Path, Rect, G } from '@wordpress/components';
+import { G, Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export const SlideInIcon = (
   <SVG
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
index 1b3ca129ef..e536377048 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
@@ -1,20 +1,18 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useDispatch } from '@wordpress/data';
-import Icon from './icons/sidebar_icon';
-import FormPlacementOption from './form_placement_option';
+import { SidebarIcon } from './icons/sidebar_icon';
+import { FormPlacementOption } from './form_placement_option';
 
-function Other(): JSX.Element {
+export function Other(): JSX.Element {
   const { showPlacementSettings } = useDispatch('mailpoet-form-editor');
 
   return (
     <FormPlacementOption
       active={false}
       label={MailPoet.I18n.t('formPlacementOtherLabel')}
-      icon={Icon}
+      icon={SidebarIcon}
       onClick={(): void => showPlacementSettings('others')}
       canBeActive={false}
     />
   );
 }
-
-export default Other;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx
index dbfa7fd98b..29633acaba 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx
@@ -1,10 +1,10 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-import FormPlacementOption from './form_placement_option';
-import Icon from './icons/popup_icon';
+import { FormPlacementOption } from './form_placement_option';
+import { PopupIcon } from './icons/popup_icon';
 
-function Popup(): JSX.Element {
+export function Popup(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -15,11 +15,9 @@ function Popup(): JSX.Element {
     <FormPlacementOption
       active={formSettings.formPlacement.popup.enabled}
       label={MailPoet.I18n.t('placePopupFormOnPages')}
-      icon={Icon}
+      icon={PopupIcon}
       onClick={(): void => showPlacementSettings('popup')}
       canBeActive
     />
   );
 }
-
-export default Popup;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx
index 0c05f36b03..0727a38ebd 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx
@@ -1,14 +1,14 @@
-import BelowPostsSettings from './settings_panels/below_posts_settings';
-import PopUpSettings from './settings_panels/popup_settings';
-import OtherSettings from './settings_panels/other_settings';
-import FixedBarSettings from './settings_panels/fixed_bar_settings';
-import SlideInSettings from './settings_panels/slide_in_settings';
+import { BelowPostsSettings } from './settings_panels/below_posts_settings';
+import { PopUpSettings } from './settings_panels/popup_settings';
+import { OtherSettings } from './settings_panels/other_settings';
+import { FixedBarSettings } from './settings_panels/fixed_bar_settings';
+import { SlideInSettings } from './settings_panels/slide_in_settings';
 
 type Props = {
   activePanel: string;
 };
 
-function SettingsPanel({ activePanel }: Props): JSX.Element {
+export function SettingsPanel({ activePanel }: Props): JSX.Element {
   return (
     <div className="mailpoet-styles-settings">
       {activePanel === 'others' && <OtherSettings />}
@@ -19,5 +19,3 @@ function SettingsPanel({ activePanel }: Props): JSX.Element {
     </div>
   );
 }
-
-export default SettingsPanel;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx
index 03ec875f6e..121c7ca91b 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx
@@ -1,13 +1,15 @@
-import MailPoet from 'mailpoet';
-import { assocPath, compose, __ } from 'lodash/fp';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { __, assocPath, compose } from 'lodash/fp';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { SelectControl } from '@wordpress/components';
 
 type Props = {
   settingsPlacementKey: string;
 };
 
-function AnimationSettings({ settingsPlacementKey }: Props): JSX.Element {
+export function AnimationSettings({
+  settingsPlacementKey,
+}: Props): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -40,5 +42,3 @@ function AnimationSettings({ settingsPlacementKey }: Props): JSX.Element {
     />
   );
 }
-
-export default AnimationSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
index f2bc607658..09fb05d071 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
@@ -1,11 +1,11 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { ToggleControl } from '@wordpress/components';
-import { assocPath, compose, __ } from 'lodash/fp';
+import { __, assocPath, compose } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
-import PlacementSettings from './placement_settings';
+import { PlacementSettings } from './placement_settings';
 
-function BelowPostsSettings(): JSX.Element {
+export function BelowPostsSettings(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -52,5 +52,3 @@ function BelowPostsSettings(): JSX.Element {
     </>
   );
 }
-
-export default BelowPostsSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx
index 111d4275e2..8be6479e2d 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx
@@ -1,13 +1,13 @@
-import MailPoet from 'mailpoet';
-import { assocPath, compose, __ } from 'lodash/fp';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { __, assocPath, compose } from 'lodash/fp';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { SelectControl } from '@wordpress/components';
 
 type Props = {
   settingsPlacementKey: string;
 };
 
-function CookieSettings({ settingsPlacementKey }: Props): JSX.Element {
+export function CookieSettings({ settingsPlacementKey }: Props): JSX.Element {
   const cookieExpirationValues = [3, 7, 14, 30, 60, 90];
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
@@ -47,5 +47,3 @@ function CookieSettings({ settingsPlacementKey }: Props): JSX.Element {
     />
   );
 }
-
-export default CookieSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
index e0725e2d0f..6fea0248e6 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
   SelectControl,
@@ -7,13 +7,13 @@ import {
 } from '@wordpress/components';
 import { assocPath, compose, __ } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
-import AnimationSettings from './animation_settings';
-import PlacementSettings from './placement_settings';
-import CookieSettings from './cookie_settings';
+import { AnimationSettings } from './animation_settings';
+import { PlacementSettings } from './placement_settings';
+import { CookieSettings } from './cookie_settings';
 
 const delayValues = [0, 2, 5, 10, 15, 30, 45, 60, 120, 180, 240];
 
-function FixedBarSettings(): JSX.Element {
+export function FixedBarSettings(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -96,5 +96,3 @@ function FixedBarSettings(): JSX.Element {
     </>
   );
 }
-
-export default FixedBarSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx
index 55b28d28cf..fd5e11e44d 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx
@@ -1,13 +1,13 @@
 import { FunctionComponent, useState } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { curry } from 'lodash';
 import { assocPath } from 'lodash/fp';
 import { TextareaControl } from '@wordpress/components';
 import { SizeSettings } from 'form_editor/components/size_settings';
 
-function OtherSettings(): JSX.Element {
+export function OtherSettings(): JSX.Element {
   const [copyAreaContent, setCopyAreaContent] = useState(null);
 
   const formExports = useSelect(
@@ -114,5 +114,3 @@ function OtherSettings(): JSX.Element {
     </>
   );
 }
-
-export default OtherSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
index 2bb4157bd7..79fae3a2d0 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
@@ -1,14 +1,16 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { ToggleControl } from '@wordpress/components';
-import { assocPath, compose, cond, isEqual, identity, sortBy } from 'lodash/fp';
-import Selection from '../../selection';
+import { assocPath, compose, cond, identity, isEqual, sortBy } from 'lodash/fp';
+import { Selection } from '../../selection';
 
 type Props = {
   settingsPlacementKey: string;
 };
 
-function PlacementSettings({ settingsPlacementKey }: Props): JSX.Element {
+export function PlacementSettings({
+  settingsPlacementKey,
+}: Props): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -336,5 +338,3 @@ function PlacementSettings({ settingsPlacementKey }: Props): JSX.Element {
     </>
   );
 }
-
-export default PlacementSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
index b4daedeefa..4fb6bd060b 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
@@ -1,15 +1,15 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { SelectControl, ToggleControl } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { assocPath, compose, __ } from 'lodash/fp';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, assocPath, compose } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
-import AnimationSettings from './animation_settings';
-import PlacementSettings from './placement_settings';
-import CookieSettings from './cookie_settings';
+import { AnimationSettings } from './animation_settings';
+import { PlacementSettings } from './placement_settings';
+import { CookieSettings } from './cookie_settings';
 
 const delayValues = [0, 2, 5, 10, 15, 30, 45, 60, 120, 180, 240];
 
-function PopUpSettings(): JSX.Element {
+export function PopUpSettings(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -93,5 +93,3 @@ function PopUpSettings(): JSX.Element {
     </>
   );
 }
-
-export default PopUpSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
index 79e2d99936..fcac92286b 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
@@ -1,19 +1,19 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
-  SelectControl,
   RadioControl,
+  SelectControl,
   ToggleControl,
 } from '@wordpress/components';
-import { assocPath, compose, __ } from 'lodash/fp';
+import { __, assocPath, compose } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
-import AnimationSettings from './animation_settings';
-import PlacementSettings from './placement_settings';
-import CookieSettings from './cookie_settings';
+import { AnimationSettings } from './animation_settings';
+import { PlacementSettings } from './placement_settings';
+import { CookieSettings } from './cookie_settings';
 
 const delayValues = [0, 2, 5, 10, 15, 30, 45, 60, 120, 180, 240];
 
-function SlideInSettings(): JSX.Element {
+export function SlideInSettings(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -96,5 +96,3 @@ function SlideInSettings(): JSX.Element {
     </>
   );
 }
-
-export default SlideInSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx
index a8665d9696..9cb79238c7 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx
@@ -1,10 +1,10 @@
-import MailPoet from 'mailpoet';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { MailPoet } from 'mailpoet';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-import Icon from './icons/slide_in_icon';
-import FormPlacementOption from './form_placement_option';
+import { SlideInIcon } from './icons/slide_in_icon';
+import { FormPlacementOption } from './form_placement_option';
 
-function SlideIn(): JSX.Element {
+export function SlideIn(): JSX.Element {
   const formSettings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     [],
@@ -15,11 +15,9 @@ function SlideIn(): JSX.Element {
     <FormPlacementOption
       active={formSettings.formPlacement.slideIn.enabled}
       label={MailPoet.I18n.t('placeSlideInFormOnPages')}
-      icon={Icon}
+      icon={SlideInIcon}
       onClick={(): void => showPlacementSettings('slide_in')}
       canBeActive
     />
   );
 }
-
-export default SlideIn;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx
index c5497775db..46ec1320ca 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx
@@ -1,12 +1,12 @@
 import { Panel, PanelBody } from '@wordpress/components';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 
-import FormPlacementOptionBelowPages from './form_placement_options/below_pages';
-import FormPlacementOptionPopup from './form_placement_options/popup';
-import FormPlacementOptionFixedBar from './form_placement_options/fixed_bar';
-import FormPlacementOptionSlideIn from './form_placement_options/slide_in';
-import FormPlacementOptionOther from './form_placement_options/other';
+import { BelowPages as FormPlacementOptionBelowPages } from './form_placement_options/below_pages';
+import { Popup as FormPlacementOptionPopup } from './form_placement_options/popup';
+import { FixedBar as FormPlacementOptionFixedBar } from './form_placement_options/fixed_bar';
+import { SlideIn as FormPlacementOptionSlideIn } from './form_placement_options/slide_in';
+import { Other as FormPlacementOptionOther } from './form_placement_options/other';
 
 function FormPlacementPanel({ onToggle, isOpened }) {
   return (
@@ -34,4 +34,4 @@ FormPlacementPanel.propTypes = {
   isOpened: PropTypes.bool.isRequired,
 };
 
-export default FormPlacementPanel;
+export { FormPlacementPanel };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx
index 745a2d815e..f9d20ead6c 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx
@@ -1,11 +1,11 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { partial } from 'lodash';
-import BasicSettingsPanel from './basic_settings_panel';
-import StylesSettingsPanel from './styles_settings_panel';
-import FormPlacementPanel from './form_placement_panel';
-import CustomCssPanel from './custom_css_panel';
+import { BasicSettingsPanel } from './basic_settings_panel';
+import { StylesSettingsPanel } from './styles_settings_panel';
+import { FormPlacementPanel } from './form_placement_panel';
+import { CustomCssPanel } from './custom_css_panel';
 
-export default function FormSettings(): JSX.Element {
+export function FormSettings(): JSX.Element {
   const dispatchResult = useDispatch('mailpoet-form-editor');
   const toggleSidebarPanel: (t1: string, ...ts: []) => void =
     dispatchResult.toggleSidebarPanel;
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx
index 651bd2ba04..affdcf2a8c 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx
@@ -373,4 +373,4 @@ Selection.defaultProps = {
   dropDownParent: undefined,
 };
 
-export default Selection;
+export { Selection };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx
index 43f84b1194..a978e209d4 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx
@@ -1,8 +1,8 @@
 import { ReactNode, useState } from 'react';
 import classnames from 'classnames';
 
-import SettingsIcon from './form_placement_options/icons/settings_icon';
-import CheckIcon from './form_placement_options/icons/checkbox_icon';
+import { SettingsIcon } from './form_placement_options/icons/settings_icon';
+import { CheckboxIcon } from './form_placement_options/icons/checkbox_icon';
 
 type Props = {
   label: string;
@@ -65,7 +65,7 @@ function SelectionItem({
             <div className="selection-item-settings-oval" />
           )}
           {active && canBeActive && (
-            <div className="selection-item-check">{CheckIcon}</div>
+            <div className="selection-item-check">{CheckboxIcon}</div>
           )}
         </div>
         {children}
@@ -82,4 +82,4 @@ SelectionItem.defaultProps = {
   automationId: undefined,
 };
 
-export default SelectionItem;
+export { SelectionItem };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
index e61ab38a3c..9b9f8a2c5c 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
@@ -1,23 +1,23 @@
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   Panel,
   PanelBody,
   RangeControl,
   SelectControl,
 } from '@wordpress/components';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { partial } from 'lodash';
-import HorizontalAlignment from 'common/styles';
+import { HorizontalAlignment } from 'common/styles';
 
-import ColorSettings from 'form_editor/components/color_settings';
-import ColorGradientSettings from 'form_editor/components/color_gradient_settings';
-import FontSizeSettings from 'form_editor/components/font_size_settings';
-import ImageSettings from 'form_editor/components/image_settings';
+import { ColorSettings } from 'form_editor/components/color_settings';
+import { ColorGradientSettings } from 'form_editor/components/color_gradient_settings';
+import { FontSizeSettings } from 'form_editor/components/font_size_settings';
+import { ImageSettings } from 'form_editor/components/image_settings';
 import { CloseButtonsSettings } from 'form_editor/components/close_button_settings';
 import { formStyles as defaultFormStyles } from 'form_editor/store/defaults';
-import FontFamilySettings from '../font_family_settings';
+import { FontFamilySettings } from '../font_family_settings';
 
 function StylesSettingsPanel({ onToggle, isOpened }) {
   const { changeFormSettings } = useDispatch('mailpoet-form-editor');
@@ -161,4 +161,4 @@ StylesSettingsPanel.propTypes = {
   isOpened: PropTypes.bool.isRequired,
 };
 
-export default StylesSettingsPanel;
+export { StylesSettingsPanel };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_styles.jsx b/mailpoet/assets/js/src/form_editor/components/form_styles.jsx
index 47e1a315ff..4fb5c8a875 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_styles.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_styles.jsx
@@ -3,7 +3,7 @@ import { useSelect } from '@wordpress/data';
 import { transformStyles } from '@wordpress/block-editor';
 import css from 'css';
 
-export default () => {
+export const FormStyles = () => {
   const element = document.getElementById('mailpoet-form-editor-form-styles');
 
   const formStyles = useSelect(
diff --git a/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx b/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx
index 1428cd22be..35110baecb 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx
@@ -130,4 +130,4 @@ FormStylingBackground.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default FormStylingBackground;
+export { FormStylingBackground };
diff --git a/mailpoet/assets/js/src/form_editor/components/form_title.jsx b/mailpoet/assets/js/src/form_editor/components/form_title.jsx
index b36f710582..163ef7d45c 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_title.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_title.jsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import classnames from 'classnames';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default function FormTitle() {
+export function FormTitle() {
   const [isSelected, setIsSelected] = useState(false);
   const title = useSelect(
     (select) => select('mailpoet-form-editor').getFormName(),
diff --git a/mailpoet/assets/js/src/form_editor/components/fullscreen.tsx b/mailpoet/assets/js/src/form_editor/components/fullscreen.tsx
index 82cb556c40..ed9e070b49 100644
--- a/mailpoet/assets/js/src/form_editor/components/fullscreen.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/fullscreen.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useSelect } from '@wordpress/data';
 
-function Fullscreen(): null {
+export function Fullscreen(): null {
   const isFullscreen = useSelect(
     (select) => select('mailpoet-form-editor').isFullscreenEnabled(),
     [],
@@ -17,5 +17,3 @@ function Fullscreen(): null {
 
   return null;
 }
-
-export default Fullscreen;
diff --git a/mailpoet/assets/js/src/form_editor/components/header.jsx b/mailpoet/assets/js/src/form_editor/components/header.jsx
index 39fee0fa7e..2754603f96 100644
--- a/mailpoet/assets/js/src/form_editor/components/header.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/header.jsx
@@ -1,17 +1,17 @@
 import {
   Button,
-  MenuGroup,
   DropdownMenu,
+  MenuGroup,
   ToolbarItem,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical, plus } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import FeatureToggle from './feature_toggle';
-import HistoryUndo from './history_undo';
-import HistoryRedo from './history_redo';
+import { MailPoet } from 'mailpoet';
+import { FeatureToggle } from './feature_toggle';
+import { HistoryUndo } from './history_undo';
+import { HistoryRedo } from './history_redo';
 
 function Header({ isInserterOpened, setIsInserterOpened }) {
   const sidebarOpened = useSelect(
@@ -118,4 +118,4 @@ Header.propTypes = {
   setIsInserterOpened: PropTypes.func.isRequired,
 };
 
-export default Header;
+export { Header };
diff --git a/mailpoet/assets/js/src/form_editor/components/history_redo.tsx b/mailpoet/assets/js/src/form_editor/components/history_redo.tsx
index 795b4c9092..6ea12a16b4 100644
--- a/mailpoet/assets/js/src/form_editor/components/history_redo.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/history_redo.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { redo as redoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
-function HistoryRedo(props: Record<string, unknown>): JSX.Element {
+export function HistoryRedo(props: Record<string, unknown>): JSX.Element {
   const hasRedo = useSelect(
     (select) => select('mailpoet-form-editor').hasEditorRedo(),
     [],
@@ -52,5 +52,3 @@ function HistoryRedo(props: Record<string, unknown>): JSX.Element {
     />
   );
 }
-
-export default HistoryRedo;
diff --git a/mailpoet/assets/js/src/form_editor/components/history_undo.tsx b/mailpoet/assets/js/src/form_editor/components/history_undo.tsx
index a6aea68156..6dd4f23953 100644
--- a/mailpoet/assets/js/src/form_editor/components/history_undo.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/history_undo.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { undo as undoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
-function HistoryUndo(props: Record<string, unknown>): JSX.Element {
+export function HistoryUndo(props: Record<string, unknown>): JSX.Element {
   const hasUndo = useSelect(
     (select) => select('mailpoet-form-editor').hasEditorUndo(),
     [],
@@ -52,5 +52,3 @@ function HistoryUndo(props: Record<string, unknown>): JSX.Element {
     />
   );
 }
-
-export default HistoryUndo;
diff --git a/mailpoet/assets/js/src/form_editor/components/image_settings.tsx b/mailpoet/assets/js/src/form_editor/components/image_settings.tsx
index 52cdcf19a4..2f90f4028f 100644
--- a/mailpoet/assets/js/src/form_editor/components/image_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/image_settings.tsx
@@ -1,6 +1,6 @@
 import { MediaUpload } from '@wordpress/block-editor';
-import MailPoet from 'mailpoet';
-import { Button, BaseControl, SelectControl } from '@wordpress/components';
+import { MailPoet } from 'mailpoet';
+import { BaseControl, Button, SelectControl } from '@wordpress/components';
 
 type Props = {
   name: string;
@@ -10,7 +10,7 @@ type Props = {
   onImageDisplayChange: (value: string) => void;
 };
 
-function ImageSettings({
+export function ImageSettings({
   name,
   imageUrl,
   onImageUrlChange,
@@ -62,4 +62,3 @@ function ImageSettings({
     </div>
   );
 }
-export default ImageSettings;
diff --git a/mailpoet/assets/js/src/form_editor/components/inserter.tsx b/mailpoet/assets/js/src/form_editor/components/inserter.tsx
index 1372ac6e16..7c7a33e661 100644
--- a/mailpoet/assets/js/src/form_editor/components/inserter.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/inserter.tsx
@@ -7,7 +7,7 @@ type Props = {
   setIsInserterOpened: (boolean) => void;
 };
 
-function Inserter({ setIsInserterOpened }: Props): JSX.Element {
+export function Inserter({ setIsInserterOpened }: Props): JSX.Element {
   const insertPoint = useSelect(
     (sel) => sel('mailpoet-form-editor').getInserterPanelInsertPoint(),
     [],
@@ -28,5 +28,3 @@ function Inserter({ setIsInserterOpened }: Props): JSX.Element {
     </div>
   );
 }
-
-export default Inserter;
diff --git a/mailpoet/assets/js/src/form_editor/components/notices.jsx b/mailpoet/assets/js/src/form_editor/components/notices.jsx
index 3e3244c08a..e8a72d9467 100644
--- a/mailpoet/assets/js/src/form_editor/components/notices.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/notices.jsx
@@ -2,7 +2,7 @@ import { memoize } from 'lodash';
 import { NoticeList } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-export default function Notices() {
+export function Notices() {
   const dismissibleNotices = useSelect(
     (select) => select('mailpoet-form-editor').getDismissibleNotices(),
     [],
diff --git a/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx b/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx
index 2cb1ab50d5..e92693d05a 100644
--- a/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx
@@ -1,13 +1,13 @@
-import { useCallback, useEffect, useState, useRef } from 'react';
-import MailPoet from 'mailpoet';
-import { Spinner, SelectControl } from '@wordpress/components';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { MailPoet } from 'mailpoet';
+import { SelectControl, Spinner } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import Preview from 'common/preview/preview.jsx';
-import Modal from 'common/modal/modal';
-import PlacementSettingsPanel from 'form_editor/components/form_settings/form_placement_options/settings_panel';
+import { Modal } from 'common/modal/modal';
+import { Preview } from 'common/preview/preview.jsx';
+import { SettingsPanel } from 'form_editor/components/form_settings/form_placement_options/settings_panel';
 
-function FormPreview(): JSX.Element {
+export function FormPreview(): JSX.Element {
   const iframeElement = useRef(null);
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const { hidePreview, changePreviewSettings } = useDispatch(
@@ -146,7 +146,7 @@ function FormPreview(): JSX.Element {
                 },
               ]}
             />
-            <PlacementSettingsPanel activePanel={previewSettings.formType} />
+            <SettingsPanel activePanel={previewSettings.formType} />
           </div>
           <Preview
             onDisplayTypeChange={onPreviewTypeChange}
@@ -178,5 +178,3 @@ function FormPreview(): JSX.Element {
     </Modal>
   );
 }
-
-export default FormPreview;
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx b/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx
index c2bb5cddef..681bb400b8 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx
@@ -1,7 +1,7 @@
 import { Panel } from '@wordpress/components';
 import { BlockInspector } from '@wordpress/block-editor';
 
-export default function BlockSettings() {
+export function BlockSettings() {
   return (
     <Panel>
       <BlockInspector />
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx
index 2099ae5dda..bd59402237 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx
@@ -2,16 +2,16 @@ import { useEffect } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import MailPoet from 'mailpoet';
-import FormSettings from 'form_editor/components/form_settings/form_settings';
-import BlockSettings from './block_settings.jsx';
-import SidebarHeader from './sidebar_header';
+import { MailPoet } from 'mailpoet';
+import { FormSettings } from 'form_editor/components/form_settings/form_settings';
+import { BlockSettings } from './block_settings.jsx';
+import { SidebarHeader } from './sidebar_header';
 
 type Props = {
   onClose: () => void;
 };
 
-export default function DefaultSidebar({ onClose }: Props): JSX.Element {
+export function DefaultSidebar({ onClose }: Props): JSX.Element {
   const activeTab = useSelect(
     (select) => select('mailpoet-form-editor').getDefaultSidebarActiveTab(),
     [],
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx
index d911762213..cdac41abf4 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx
@@ -1,16 +1,15 @@
-import { useSelect } from '@wordpress/data';
 import { Panel, PanelBody } from '@wordpress/components';
-import MailPoet from 'mailpoet';
-import PlacementSettingsPanel from 'form_editor/components/form_settings/form_placement_options/settings_panel';
-import SidebarHeader from './sidebar_header';
+import { useSelect } from '@wordpress/data';
+
+import { MailPoet } from 'mailpoet';
+import { SettingsPanel } from 'form_editor/components/form_settings/form_placement_options/settings_panel';
+import { SidebarHeader } from './sidebar_header';
 
 type Props = {
   onClose: () => void;
 };
 
-export default function PlaceMentSettingsSidebar({
-  onClose,
-}: Props): JSX.Element {
+export function PlacementSettingsSidebar({ onClose }: Props): JSX.Element {
   const previewSettings = useSelect(
     (select) => select('mailpoet-form-editor').getPreviewSettings(),
     [],
@@ -33,7 +32,7 @@ export default function PlaceMentSettingsSidebar({
       </SidebarHeader>
       <Panel>
         <PanelBody>
-          <PlacementSettingsPanel activePanel={previewSettings.formType} />
+          <SettingsPanel activePanel={previewSettings.formType} />
         </PanelBody>
       </Panel>
     </>
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx
index e1ef4e0762..cfe86ecb88 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
-import DefaultSidebar from './default_sidebar';
-import PlacementSettingsSidebar from './placement_settings_sidebar';
+import { DefaultSidebar } from './default_sidebar';
+import { PlacementSettingsSidebar } from './placement_settings_sidebar';
 
-export default function Sidebar(): JSX.Element {
+export function Sidebar(): JSX.Element {
   const { toggleSidebar, changeActiveSidebar } = useDispatch(
     'mailpoet-form-editor',
   );
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx
index 6d4089eba1..2c0b5dbea4 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { Button } from '@wordpress/components';
 
 type Props = {
@@ -7,7 +7,7 @@ type Props = {
   children: ReactNode;
 };
 
-function SidebarHeader({ children, closeSidebar }: Props): JSX.Element {
+export function SidebarHeader({ children, closeSidebar }: Props): JSX.Element {
   return (
     <>
       <div className="components-panel__header interface-complementary-area-header__small">
@@ -23,5 +23,3 @@ function SidebarHeader({ children, closeSidebar }: Props): JSX.Element {
     </>
   );
 }
-
-export default SidebarHeader;
diff --git a/mailpoet/assets/js/src/form_editor/components/tutorial.tsx b/mailpoet/assets/js/src/form_editor/components/tutorial.tsx
index 14d31d5f9b..9bed0fe1f9 100644
--- a/mailpoet/assets/js/src/form_editor/components/tutorial.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/tutorial.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import Modal from 'common/modal/modal';
-import Heading from 'common/typography/heading/heading';
-import MailPoet from 'mailpoet';
+import { Modal } from 'common/modal/modal';
+import { Heading } from 'common/typography/heading/heading';
+import { MailPoet } from 'mailpoet';
 
 export function Tutorial(): JSX.Element {
   const url = useSelect(
diff --git a/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx b/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx
index 70ab9f2387..bfe596be91 100644
--- a/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect } from '@wordpress/data';
 
-function UnsavedChangesNotice() {
+export function UnsavedChangesNotice() {
   const hasUnsavedChanges = useSelect(
     (sel) => sel('mailpoet-form-editor').hasUnsavedChanges(),
     [],
@@ -24,5 +24,3 @@ function UnsavedChangesNotice() {
 
   return null;
 }
-
-export default UnsavedChangesNotice;
diff --git a/mailpoet/assets/js/src/form_editor/form_editor.jsx b/mailpoet/assets/js/src/form_editor/form_editor.jsx
index 21a70517d5..52c51d0b88 100644
--- a/mailpoet/assets/js/src/form_editor/form_editor.jsx
+++ b/mailpoet/assets/js/src/form_editor/form_editor.jsx
@@ -2,13 +2,13 @@ import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import apiFetch from '@wordpress/api-fetch';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import Editor from './components/editor.jsx';
-import initStore from './store/store.jsx';
+import { Notices } from 'notices/notices.jsx';
+import { Editor } from './components/editor.jsx';
+import { initStore } from './store/store.jsx';
 import { initBlocks } from './blocks/blocks.jsx';
-import initHooks from './hooks';
-import initTranslations from './translations';
-import initRichText from './rich_text/init.ts';
+import { initHooks } from './hooks';
+import { initTranslations } from './translations';
+import { initRichText } from './rich_text/init.ts';
 import './template_selection';
 
 function App() {
diff --git a/mailpoet/assets/js/src/form_editor/hooks.tsx b/mailpoet/assets/js/src/form_editor/hooks.tsx
index 95346d67ea..32aaf041f3 100644
--- a/mailpoet/assets/js/src/form_editor/hooks.tsx
+++ b/mailpoet/assets/js/src/form_editor/hooks.tsx
@@ -5,7 +5,7 @@ import '@wordpress/edit-post/build-module/hooks/validate-multiple-use/index.js';
 import { MediaUpload } from '@wordpress/media-utils';
 import { addFilter } from '@wordpress/hooks';
 
-export default (): void => {
+export const initHooks = (): void => {
   // This hook replaces dummy media upload buttons within Gutenberg
   // see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md
   const replaceMediaUpload = (): ReactNode => MediaUpload;
diff --git a/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx b/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx
index b3a85cf666..9295dee556 100644
--- a/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx
+++ b/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx
@@ -1,9 +1,9 @@
 import { applyFormat } from '@wordpress/rich-text';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { BlockFormatControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
-import FontFamilySettings from '../components/font_family_settings';
+import { FontFamilySettings } from '../components/font_family_settings';
 
 const name = 'mailpoet-form/font-selection';
 const title = 'Font Selection';
diff --git a/mailpoet/assets/js/src/form_editor/rich_text/init.ts b/mailpoet/assets/js/src/form_editor/rich_text/init.ts
index 5e0c98995c..79c67b4e08 100644
--- a/mailpoet/assets/js/src/form_editor/rich_text/init.ts
+++ b/mailpoet/assets/js/src/form_editor/rich_text/init.ts
@@ -2,6 +2,6 @@ import '@wordpress/format-library'; // load default formats (bold, italic, ...)
 import { registerFormatType } from '@wordpress/rich-text';
 import * as FontSelectionFormat from './font_selection_format';
 
-export default function Init(): void {
+export function initRichText(): void {
   registerFormatType(FontSelectionFormat.name, FontSelectionFormat.settings);
 }
diff --git a/mailpoet/assets/js/src/form_editor/store/actions.ts b/mailpoet/assets/js/src/form_editor/store/actions.ts
index 8b1ca376d8..1dd2c28ca2 100644
--- a/mailpoet/assets/js/src/form_editor/store/actions.ts
+++ b/mailpoet/assets/js/src/form_editor/store/actions.ts
@@ -1,7 +1,7 @@
 import { select, dispatch } from '@wordpress/data';
 import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
-import blocksToFormBodyFactory from './blocks_to_form_body';
-import mapFormDataBeforeSaving from './map_form_data_before_saving';
+import { blocksToFormBodyFactory } from './blocks_to_form_body';
+import { mapFormDataBeforeSaving } from './map_form_data_before_saving';
 import { ToggleAction, ToggleBlockInserterAction } from './actions_types';
 import { BlockInsertionPoint } from './state_types';
 
diff --git a/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx
index f13e67ecf7..f764d084cb 100644
--- a/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx
@@ -75,7 +75,7 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
  * @param {Array.<{name: string, slug: string, gradient: string}>} gradientDefinitions
  * @param customFields - list of all custom Fields
  */
-const blocksToFormBodyFactory = (
+export const blocksToFormBodyFactory = (
   fontSizeDefinitions,
   colorDefinitions,
   gradientDefinitions,
@@ -333,5 +333,3 @@ const blocksToFormBodyFactory = (
   };
   return mapBlocks;
 };
-
-export default blocksToFormBodyFactory;
diff --git a/mailpoet/assets/js/src/form_editor/store/controls.jsx b/mailpoet/assets/js/src/form_editor/store/controls.jsx
index 9a385bded8..8a60fc11e9 100644
--- a/mailpoet/assets/js/src/form_editor/store/controls.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/controls.jsx
@@ -1,16 +1,16 @@
 import { select, dispatch } from '@wordpress/data';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { merge } from 'lodash';
 import Cookies from 'js-cookie';
 import { createBlock, unregisterBlockType } from '@wordpress/blocks';
-import CALL_API from 'common/controls/call_api';
+import { callApi as CALL_API } from 'common/controls/call_api';
 import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
-import blocksToFormBodyFactory from './blocks_to_form_body.jsx';
-import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
-import getCustomFieldBlockSettings from '../blocks/custom_fields_blocks.jsx';
+import { blocksToFormBodyFactory } from './blocks_to_form_body.jsx';
+import { formatCustomFieldBlockName } from '../blocks/format_custom_field_block_name.jsx';
+import { getCustomFieldBlockSettings } from '../blocks/custom_fields_blocks.jsx';
 import { registerCustomFieldBlock } from '../blocks/blocks.jsx';
-import mapFormDataBeforeSaving from './map_form_data_before_saving.jsx';
-import findBlock from './find_block.jsx';
+import { mapFormDataBeforeSaving } from './map_form_data_before_saving.jsx';
+import { findBlock } from './find_block.jsx';
 
 const formatApiErrorMessage = (response) => {
   let errorMessage = null;
@@ -31,7 +31,7 @@ const mapBlocks = (blocks, callback) =>
     return result;
   });
 
-export default {
+export const controls = {
   SAVE_FORM() {
     if (select('mailpoet-form-editor').getIsFormSaving()) {
       return;
diff --git a/mailpoet/assets/js/src/form_editor/store/find_block.jsx b/mailpoet/assets/js/src/form_editor/store/find_block.jsx
index 70de496144..8b983b448b 100644
--- a/mailpoet/assets/js/src/form_editor/store/find_block.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/find_block.jsx
@@ -1,4 +1,4 @@
-const findBlock = (blocks, name) =>
+export const findBlock = (blocks, name) =>
   blocks.reduce((result, block) => {
     if (result) {
       return result;
@@ -11,5 +11,3 @@ const findBlock = (blocks, name) =>
     }
     return null;
   }, null);
-
-export default findBlock;
diff --git a/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx
index 964348ee39..f7c404b5b8 100644
--- a/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx
@@ -1,13 +1,13 @@
 /* eslint-disable camelcase */
 import { has } from 'lodash';
-import asNum from './server_value_as_num';
+import { asNum } from './server_value_as_num';
 import {
   mapInputBlockStyles,
   mapColorSlug,
   mapFontSizeSlug,
   mapGradientSlug,
 } from './mapping/to_blocks/styles_mapper';
-import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
+import { formatCustomFieldBlockName } from '../blocks/format_custom_field_block_name.jsx';
 import { defaultAttributes as dividerDefaultAttributes } from '../blocks/divider/divider_types';
 
 const generateId = () => `${Math.random().toString()}-${Date.now()}`;
diff --git a/mailpoet/assets/js/src/form_editor/store/form_validator.jsx b/mailpoet/assets/js/src/form_editor/store/form_validator.jsx
index b4df0e8602..eac1786fae 100644
--- a/mailpoet/assets/js/src/form_editor/store/form_validator.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/form_validator.jsx
@@ -1,6 +1,6 @@
-import findBlock from './find_block.jsx';
+import { findBlock } from './find_block.jsx';
 
-export default (formData, formBlocks) => {
+export const validateForm = (formData, formBlocks) => {
   if (
     !formData ||
     !formData.settings ||
diff --git a/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx b/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx
index cd6fedfe5e..54aab88b17 100644
--- a/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx
@@ -1,8 +1,7 @@
-/* eslint-disable camelcase */
-import asNum from './server_value_as_num';
+import { asNum } from './server_value_as_num';
 import * as defaults from './defaults';
 
-export default function mapFormDataAfterLoading(data) {
+export function mapFormDataAfterLoading(data) {
   const mapped = {
     ...data,
     settings: {
diff --git a/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx b/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx
index 78f0265706..463cb44a74 100644
--- a/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx
@@ -1,4 +1,4 @@
-export default function mapFormDataBeforeSaving(data) {
+export function mapFormDataBeforeSaving(data) {
   const mappedData = {
     ...data,
     settings: {
diff --git a/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts b/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts
index 9dfd8eb631..493fa27ccd 100644
--- a/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts
+++ b/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts
@@ -1,12 +1,12 @@
 import { has } from 'lodash';
 import {
+  ColorDefinition,
+  FontSizeDefinition,
+  GradientDefinition,
   InputBlockStyles,
   InputBlockStylesServerData,
-  FontSizeDefinition,
-  ColorDefinition,
-  GradientDefinition,
 } from 'form_editor/store/form_data_types';
-import asNum from '../../server_value_as_num';
+import { asNum } from '../../server_value_as_num';
 
 export const defaultBlockStyles: InputBlockStyles = {
   fullWidth: true,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducer.jsx b/mailpoet/assets/js/src/form_editor/store/reducer.jsx
index ee15701843..d260fc58f0 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducer.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducer.jsx
@@ -1,45 +1,45 @@
-import MailPoet from 'mailpoet';
-import createCustomFieldDone from './reducers/create_custom_field_done.jsx';
-import createCustomFieldFailed from './reducers/create_custom_field_failed.jsx';
-import customFieldEdited from './reducers/custom_field_edited.jsx';
-import createCustomFieldStartedFactory from './reducers/create_custom_field_started.jsx';
-import changeFormName from './reducers/change_form_name.jsx';
-import changeFormSettings from './reducers/change_form_settings.jsx';
-import changeFormStyles from './reducers/change_form_styles.jsx';
-import removeNotice from './reducers/remove_notice.jsx';
+import { MailPoet } from 'mailpoet';
+import { createCustomFieldDone } from './reducers/create_custom_field_done.jsx';
+import { createCustomFieldFailed } from './reducers/create_custom_field_failed.jsx';
+import { customFieldEdited } from './reducers/custom_field_edited.jsx';
+import { createCustomFieldStartedFactory } from './reducers/create_custom_field_started.jsx';
+import { changeFormName } from './reducers/change_form_name.jsx';
+import { changeFormSettings } from './reducers/change_form_settings.jsx';
+import { changeFormStyles } from './reducers/change_form_styles.jsx';
+import { removeNotice } from './reducers/remove_notice.jsx';
 import { tutorialDismiss } from './reducers/tutorial_dismiss';
 import {
-  showPreview,
-  hidePreview,
-  previewDataSaved,
-  previewDataNotSaved,
   changePreviewSettings,
+  hidePreview,
+  previewDataNotSaved,
+  previewDataSaved,
+  showPreview,
 } from './reducers/preview.jsx';
-import saveFormDone from './reducers/save_form_done.jsx';
-import saveFormFailed from './reducers/save_form_failed.jsx';
-import saveFormStartedFactory from './reducers/save_form_started.jsx';
-import switchDefaultSidebarTab from './reducers/switch_sidebar_tab.jsx';
+import { saveFormDone } from './reducers/save_form_done.jsx';
+import { saveFormFailed } from './reducers/save_form_failed.jsx';
+import { saveFormStartedFactory } from './reducers/save_form_started.jsx';
+import { switchDefaultSidebarTab } from './reducers/switch_sidebar_tab.jsx';
 import {
-  toggleSidebar,
   toggleInserterSidebar,
+  toggleSidebar,
 } from './reducers/toggle_sidebar.ts';
-import toggleSidebarPanel from './reducers/toggle_sidebar_panel.jsx';
-import changeFormBlocks from './reducers/change_form_blocks.jsx';
-import saveCustomFieldDone from './reducers/save_custom_field_done.jsx';
-import saveCustomFieldFailed from './reducers/save_custom_field_failed.jsx';
-import saveCustomFieldStarted from './reducers/save_custom_field_started.jsx';
+import { toggleSidebarPanel } from './reducers/toggle_sidebar_panel.jsx';
+import { changeFormBlocks } from './reducers/change_form_blocks.jsx';
+import { saveCustomFieldDone } from './reducers/save_custom_field_done.jsx';
+import { saveCustomFieldFailed } from './reducers/save_custom_field_failed.jsx';
+import { saveCustomFieldStarted } from './reducers/save_custom_field_started.jsx';
 import {
-  customFieldDeleteStart,
   customFieldDeleteDone,
   customFieldDeleteFailed,
+  customFieldDeleteStart,
 } from './reducers/custom_field_delete.jsx';
-import changeActiveSidebar from './reducers/change_active_sidebar';
+import { changeActiveSidebar } from './reducers/change_active_sidebar';
 import { disableForm, enableForm } from './reducers/toggle_form';
-import toggleFullscreen from './reducers/toggle_fullscreen';
+import { toggleFullscreen } from './reducers/toggle_fullscreen';
 import {
   createHistoryRecord,
-  historyUndo,
   historyRedo,
+  historyUndo,
 } from './reducers/history_record';
 
 const createCustomFieldStarted = createCustomFieldStartedFactory(MailPoet);
@@ -133,9 +133,9 @@ const undoRedoReducer = (state, action) => {
   return state;
 };
 
-export default (defaultState) =>
-  // eslint-disable-next-line default-param-last
-  (state = defaultState, action) => {
+export const createReducer =
+  (defaultState) =>
+  (state = defaultState, action = {}) => {
     const stateAfterUndo = undoRedoReducer(state, action);
     return mainReducer(stateAfterUndo, action);
   };
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/change_active_sidebar.ts b/mailpoet/assets/js/src/form_editor/store/reducers/change_active_sidebar.ts
index 519bc2f74f..670471f003 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/change_active_sidebar.ts
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/change_active_sidebar.ts
@@ -1,6 +1,6 @@
 import { CHANGE_ACTIVE_SIDEBAR } from 'form_editor/store/actions';
 
-export default (state, action: CHANGE_ACTIVE_SIDEBAR) => ({
+export const changeActiveSidebar = (state, action: CHANGE_ACTIVE_SIDEBAR) => ({
   ...state,
   sidebar: {
     ...state.sidebar,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_blocks.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_blocks.jsx
index 0b1b474a40..5194e82319 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_blocks.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_blocks.jsx
@@ -1,6 +1,6 @@
-import validateForm from '../form_validator.jsx';
+import { validateForm } from '../form_validator.jsx';
 
-export default (state, action) => {
+export const changeFormBlocks = (state, action) => {
   const newState = {
     ...state,
     formBlocks: action.blocks,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_name.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_name.jsx
index 8ede578462..8cb19a46fc 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_name.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_name.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => ({
+export const changeFormName = (state, action) => ({
   ...state,
   formData: {
     ...state.formData,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_settings.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_settings.jsx
index 224d3b540c..ae412c3b83 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_settings.jsx
@@ -1,6 +1,6 @@
-import validateForm from '../form_validator.jsx';
+import { validateForm } from '../form_validator.jsx';
 
-export default (state, action) => {
+export const changeFormSettings = (state, action) => {
   const newState = {
     ...state,
     formData: {
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_styles.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_styles.jsx
index 47c779ddc5..608f9e078f 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/change_form_styles.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/change_form_styles.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => ({
+export const changeFormStyles = (state, action) => ({
   ...state,
   formData: {
     ...state.formData,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx
index 41b1ec9e56..976e91e6ca 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default (state, action) => {
+export const createCustomFieldDone = (state, action) => {
   const notices = state.notices.filter(
     (notice) => notice.id !== 'custom-field',
   );
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx
index 576f128a46..8218d9ce78 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => {
+export const createCustomFieldFailed = (state, action) => {
   const notices = state.notices.filter(
     (notice) => notice.id !== 'custom-field',
   );
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx
index 3337784638..10d6a0f81c 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx
@@ -1,27 +1,28 @@
 import { trim } from 'lodash';
 
-export default (MailPoet) => (state, action) => {
-  const notices = state.notices.filter(
-    (notice) => notice.id !== 'custom-field',
-  );
-  const fieldName = trim(action.customField.name);
-  const duplicity = state.customFields.find(
-    (field) => field.name === fieldName,
-  );
-  if (duplicity) {
-    notices.push({
-      id: 'custom-field',
-      content: MailPoet.I18n.t('customFieldWithNameExists').replace(
-        '[name]',
-        fieldName,
-      ),
-      isDismissible: true,
-      status: 'error',
-    });
-  }
-  return {
-    ...state,
-    isCustomFieldCreating: !duplicity,
-    notices,
+export const createCustomFieldStartedFactory =
+  (MailPoet) => (state, action) => {
+    const notices = state.notices.filter(
+      (notice) => notice.id !== 'custom-field',
+    );
+    const fieldName = trim(action.customField.name);
+    const duplicity = state.customFields.find(
+      (field) => field.name === fieldName,
+    );
+    if (duplicity) {
+      notices.push({
+        id: 'custom-field',
+        content: MailPoet.I18n.t('customFieldWithNameExists').replace(
+          '[name]',
+          fieldName,
+        ),
+        isDismissible: true,
+        status: 'error',
+      });
+    }
+    return {
+      ...state,
+      isCustomFieldCreating: !duplicity,
+      notices,
+    };
   };
-};
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_edited.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_edited.jsx
index 9b50ce5ff6..264e1968a9 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_edited.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_edited.jsx
@@ -1,4 +1,4 @@
-export default (state) => ({
+export const customFieldEdited = (state) => ({
   ...state,
   hasUnsavedChanges: true,
 });
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/remove_notice.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/remove_notice.jsx
index bfa5b5b4a1..af638b9a04 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/remove_notice.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/remove_notice.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => ({
+export const removeNotice = (state, action) => ({
   ...state,
   notices: [...state.notices].filter((item) => item.id !== action.id),
 });
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx
index 0c1e712ad6..a04cc4474b 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default (state, action) => {
+export const saveCustomFieldDone = (state, action) => {
   const notices = state.notices.filter(
     (notice) => notice.id !== 'custom-field',
   );
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx
index 7ace04ed26..3fa0a4c54d 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => {
+export const saveCustomFieldFailed = (state, action) => {
   const notices = state.notices.filter(
     (notice) => notice.id !== 'custom-field',
   );
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx
index bdb0bbe514..d89ff78452 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx
@@ -1,4 +1,4 @@
-export default (state) => {
+export const saveCustomFieldStarted = (state) => {
   const notices = state.notices.filter(
     (notice) => notice.id !== 'custom-field',
   );
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx
index a34f6a4010..f6a81cc096 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default (state, action) => {
+export const saveFormDone = (state, action) => {
   const notices = state.notices.filter((notice) => notice.id !== 'save-form');
   notices.push({
     id: 'save-form',
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_failed.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_failed.jsx
index 30212dc644..760d94339c 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_failed.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_failed.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => {
+export const saveFormFailed = (state, action) => {
   const notices = state.notices.filter((notice) => notice.id !== 'save-form');
   notices.push({
     id: 'save-form',
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx
index b588e856fe..2a12b8f0c2 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx
@@ -1,4 +1,4 @@
-export default (MailPoet) => (state) => {
+export const saveFormStartedFactory = (MailPoet) => (state) => {
   // remove all form saving related notices
   const notices = state.notices.filter(
     (notice) =>
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/switch_sidebar_tab.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/switch_sidebar_tab.jsx
index a9bd9483c2..733527e5a5 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/switch_sidebar_tab.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/switch_sidebar_tab.jsx
@@ -1,4 +1,4 @@
-export default (state, action) => ({
+export const switchDefaultSidebarTab = (state, action) => ({
   ...state,
   sidebar: {
     ...state.sidebar,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/toggle_fullscreen.ts b/mailpoet/assets/js/src/form_editor/store/reducers/toggle_fullscreen.ts
index edf7af3f24..b23a345a5f 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/toggle_fullscreen.ts
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/toggle_fullscreen.ts
@@ -1,4 +1,4 @@
-export default (state, action) => ({
+export const toggleFullscreen = (state, action) => ({
   ...state,
   fullscreenStatus: action.toggleTo,
 });
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar_panel.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar_panel.jsx
index 6c58bcd418..a597c11b0a 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar_panel.jsx
@@ -20,7 +20,7 @@ const getRequiredAction = (openedPanels, panelId, toggleTo) => {
  * @param {{toggleTo: string|undefined, id: string, type: string}} action
  * @return {object} Modified state object
  */
-export default (state, action) => {
+export const toggleSidebarPanel = (state, action) => {
   let toggleTo;
   if (action.toggleTo === true) toggleTo = 'opened';
   if (action.toggleTo === false) toggleTo = 'closed';
diff --git a/mailpoet/assets/js/src/form_editor/store/selectors.jsx b/mailpoet/assets/js/src/form_editor/store/selectors.jsx
index 78f2d8e504..ef5539951c 100644
--- a/mailpoet/assets/js/src/form_editor/store/selectors.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/selectors.jsx
@@ -14,7 +14,7 @@ const findBlockPath = (blocks, id, path = []) =>
     return [];
   }, []);
 
-export default {
+export const selectors = {
   isFormSaved(state) {
     return typeof state.formData.id === 'number';
   },
diff --git a/mailpoet/assets/js/src/form_editor/store/server_value_as_num.ts b/mailpoet/assets/js/src/form_editor/store/server_value_as_num.ts
index fc2856341f..7c3f2e3d2d 100644
--- a/mailpoet/assets/js/src/form_editor/store/server_value_as_num.ts
+++ b/mailpoet/assets/js/src/form_editor/store/server_value_as_num.ts
@@ -1,9 +1,7 @@
-function asNum(num?: string): number | undefined {
+export function asNum(num?: string): number | undefined {
   const numI = parseInt(num, 10);
   if (Number.isNaN(numI)) {
     return undefined;
   }
   return numI;
 }
-
-export default asNum;
diff --git a/mailpoet/assets/js/src/form_editor/store/store.jsx b/mailpoet/assets/js/src/form_editor/store/store.jsx
index dfbe23a16a..8b8540655e 100644
--- a/mailpoet/assets/js/src/form_editor/store/store.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/store.jsx
@@ -6,14 +6,14 @@ import '@wordpress/notices';
 import { registerStore } from '@wordpress/data';
 import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
 import * as actions from './actions';
-import createReducer from './reducer.jsx';
-import selectors from './selectors.jsx';
-import controls from './controls.jsx';
-import validateForm from './form_validator.jsx';
+import { createReducer } from './reducer.jsx';
+import { selectors } from './selectors.jsx';
+import { controls } from './controls.jsx';
+import { validateForm } from './form_validator.jsx';
 import { formBodyToBlocksFactory } from './form_body_to_blocks.jsx';
-import mapFormDataAfterLoading from './map_form_data_after_loading.jsx';
+import { mapFormDataAfterLoading } from './map_form_data_after_loading.jsx';
 
-export default () => {
+export const initStore = () => {
   const customFields = window.mailpoet_custom_fields.map((field) => ({
     ...field,
     params: field.params || {},
diff --git a/mailpoet/assets/js/src/form_editor/template_selection.tsx b/mailpoet/assets/js/src/form_editor/template_selection.tsx
index 34d10a578c..fffc34c8cd 100644
--- a/mailpoet/assets/js/src/form_editor/template_selection.tsx
+++ b/mailpoet/assets/js/src/form_editor/template_selection.tsx
@@ -1,9 +1,9 @@
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import Selection from './templates/selection';
-import initStore from './templates/store/store';
+import { Notices } from 'notices/notices.jsx';
+import { Selection } from './templates/selection';
+import { initStore } from './templates/store/store';
 
 function App() {
   return (
diff --git a/mailpoet/assets/js/src/form_editor/templates/selection.tsx b/mailpoet/assets/js/src/form_editor/templates/selection.tsx
index 49988e9851..21cdc73a72 100644
--- a/mailpoet/assets/js/src/form_editor/templates/selection.tsx
+++ b/mailpoet/assets/js/src/form_editor/templates/selection.tsx
@@ -1,15 +1,15 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
-import Categories from 'common/categories/categories';
-import Background from 'common/background/background';
-import Loading from 'common/loading';
-import TemplateBox from 'common/template_box/template_box';
-import Heading from 'common/typography/heading/heading';
+import { Categories } from 'common/categories/categories';
+import { Background } from 'common/background/background';
+import { Loading } from 'common/loading';
+import { TemplateBox } from 'common/template_box/template_box';
+import { Heading } from 'common/typography/heading/heading';
 import { Button } from 'common';
-import Notice from 'notices/notice';
+import { Notice } from 'notices/notice';
 import { TemplateData } from './store/types';
 
-export default function Selection(): JSX.Element {
+export function Selection(): JSX.Element {
   const categories = [
     {
       name: 'popup',
diff --git a/mailpoet/assets/js/src/form_editor/templates/store/controls.ts b/mailpoet/assets/js/src/form_editor/templates/store/controls.ts
index 8a641c98b3..98774bfd93 100644
--- a/mailpoet/assets/js/src/form_editor/templates/store/controls.ts
+++ b/mailpoet/assets/js/src/form_editor/templates/store/controls.ts
@@ -1,7 +1,4 @@
-import CALL_API from 'common/controls/call_api';
-import TRACK_EVENT from 'common/controls/track_event';
+import { callApi as CALL_API } from 'common/controls/call_api';
+import { trackEvent as TRACK_EVENT } from 'common/controls/track_event';
 
-export default {
-  CALL_API,
-  TRACK_EVENT,
-};
+export { CALL_API, TRACK_EVENT };
diff --git a/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts b/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts
index 160bd8bdd6..208c0f21a2 100644
--- a/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts
+++ b/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts
@@ -1,4 +1,4 @@
-import { StateType, CategoryActionType, ActionType } from './types';
+import { ActionType, CategoryActionType, StateType } from './types';
 
 export const selectTemplateFailed = (state: StateType): StateType => ({
   ...state,
@@ -20,7 +20,8 @@ export const selectCategory = (
   activeCategory: action.category,
 });
 
-export default (defaultState: StateType) =>
+export const createReducer =
+  (defaultState: StateType) =>
   (
     state: StateType = defaultState, // eslint-disable-line @typescript-eslint/default-param-last
     action: ActionType,
diff --git a/mailpoet/assets/js/src/form_editor/templates/store/selectors.ts b/mailpoet/assets/js/src/form_editor/templates/store/selectors.ts
index e422f9ec50..31ff83505c 100644
--- a/mailpoet/assets/js/src/form_editor/templates/store/selectors.ts
+++ b/mailpoet/assets/js/src/form_editor/templates/store/selectors.ts
@@ -1,6 +1,6 @@
 import { TemplateData, StateType } from './types';
 
-export default {
+export const selectors = {
   getTemplates(state: StateType): TemplateData {
     return state.templates;
   },
diff --git a/mailpoet/assets/js/src/form_editor/templates/store/store.ts b/mailpoet/assets/js/src/form_editor/templates/store/store.ts
index ead9a0198a..7a82872dd0 100644
--- a/mailpoet/assets/js/src/form_editor/templates/store/store.ts
+++ b/mailpoet/assets/js/src/form_editor/templates/store/store.ts
@@ -3,10 +3,10 @@
  * @see https://developer.wordpress.org/block-editor/packages/packages-data/
  */
 import { registerStore } from '@wordpress/data';
-import selectors from './selectors';
-import createReducer from './reducer';
+import { selectors } from './selectors';
+import { createReducer } from './reducer';
 import * as actions from './actions';
-import controls from './controls';
+import * as controls from './controls';
 
 import { TemplateData, StateType, CategoryType } from './types';
 
@@ -17,7 +17,7 @@ interface StoreWindow extends Window {
 
 declare let window: StoreWindow;
 
-export default (): void => {
+export const initStore = (): void => {
   const defaultState: StateType = {
     templates: window.mailpoet_templates,
     formEditorUrl: window.mailpoet_form_edit_url,
diff --git a/mailpoet/assets/js/src/form_editor/translations.ts b/mailpoet/assets/js/src/form_editor/translations.ts
index f843ff980d..3ed0936a1b 100644
--- a/mailpoet/assets/js/src/form_editor/translations.ts
+++ b/mailpoet/assets/js/src/form_editor/translations.ts
@@ -1,6 +1,6 @@
 import { LocaleData, setLocaleData } from '@wordpress/i18n';
 
-export default (moduleTranslations: string[]): void => {
+export const initTranslations = (moduleTranslations: string[]): void => {
   moduleTranslations.forEach((translations) => {
     const parsed = JSON.parse(translations);
     if (!parsed || !parsed.locale_data?.messages) {
diff --git a/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx b/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx
index 9780f8557b..5d1cf9d469 100644
--- a/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx
+++ b/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx
@@ -1,7 +1,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import type { WP_REST_API_Search_Results } from 'wp-types';
 
 /**
@@ -29,4 +29,4 @@ const fetchLinkSuggestions = async (search: string, { perPage = 20 } = {}) => {
   }));
 };
 
-export default fetchLinkSuggestions;
+export { fetchLinkSuggestions };
diff --git a/mailpoet/assets/js/src/forms/forms.jsx b/mailpoet/assets/js/src/forms/forms.jsx
index c2c21c6863..5bf13e2bda 100644
--- a/mailpoet/assets/js/src/forms/forms.jsx
+++ b/mailpoet/assets/js/src/forms/forms.jsx
@@ -1,8 +1,8 @@
 import ReactDOM from 'react-dom';
 import { Route, HashRouter } from 'react-router-dom';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import FormList from './list.jsx';
+import { Notices } from 'notices/notices.jsx';
+import { FormList } from './list.jsx';
 
 function App() {
   return (
diff --git a/mailpoet/assets/js/src/forms/heading.jsx b/mailpoet/assets/js/src/forms/heading.jsx
index 1cc97c879f..dffe69f1af 100644
--- a/mailpoet/assets/js/src/forms/heading.jsx
+++ b/mailpoet/assets/js/src/forms/heading.jsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
-import Button from 'common/button/button';
-import plusIcon from 'common/button/icon/plus';
+import { Button } from 'common/button/button';
+import { plusIcon } from 'common/button/icon/plus';
 
 export const onAddNewForm = () => {
   MailPoet.trackEvent('Forms > Add New');
diff --git a/mailpoet/assets/js/src/forms/list.jsx b/mailpoet/assets/js/src/forms/list.jsx
index 1bc83bce24..e211e2f22d 100644
--- a/mailpoet/assets/js/src/forms/list.jsx
+++ b/mailpoet/assets/js/src/forms/list.jsx
@@ -1,14 +1,15 @@
+import classnames from 'classnames';
 import { Component } from 'react';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
 import jQuery from 'jquery';
 import PropTypes from 'prop-types';
-import Listing from 'listing/listing.jsx';
-import withNpsPoll from 'nps_poll.jsx';
-import Tags from 'common/tag/tags';
-import Toggle from 'common/form/toggle/toggle';
+
 import { Button } from 'common';
-import plusIcon from 'common/button/icon/plus';
+import { Listing } from 'listing/listing.jsx';
+import { MailPoet } from 'mailpoet';
+import { plusIcon } from 'common/button/icon/plus';
+import { Tags } from 'common/tag/tags';
+import { Toggle } from 'common/form/toggle/toggle';
+import { withNpsPoll } from 'nps_poll.jsx';
 import { FormsHeading, onAddNewForm } from './heading';
 
 const columns = [
@@ -174,7 +175,7 @@ const itemActions = [
   },
 ];
 
-class FormList extends Component {
+class FormListComponent extends Component {
   updateStatus = (checked, e) => {
     // make the event persist so that we can still override the selected value
     // in the ajax callback
@@ -223,7 +224,7 @@ class FormList extends Component {
   }
 
   renderItem = (form, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -297,11 +298,11 @@ class FormList extends Component {
   }
 }
 
-FormList.propTypes = {
+FormListComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withNpsPoll(FormList);
+export const FormList = withNpsPoll(FormListComponent);
diff --git a/mailpoet/assets/js/src/global.d.ts b/mailpoet/assets/js/src/global.d.ts
index f3f2608ebe..199fb3180e 100644
--- a/mailpoet/assets/js/src/global.d.ts
+++ b/mailpoet/assets/js/src/global.d.ts
@@ -1,12 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 declare module 'wp-js-hooks' {
-  function addFilter(
-    name: string,
-    namespace: string,
-    callback: (...args: any[]) => any,
-  ): void;
-  function applyFilters(name: string, ...args: any[]): any;
+  type Hooks = {
+    addFilter: (
+      name: string,
+      namespace: string,
+      callback: (...args: any[]) => any,
+    ) => void;
+    applyFilters: (name: string, ...args: any[]) => any;
+  };
+  export const Hooks: Hooks;
 }
 
 type ErrorResponse = {
@@ -14,6 +17,7 @@ type ErrorResponse = {
     message: string;
   }[];
 };
+
 interface JQuery {
   parsley: () => any;
 }
@@ -39,6 +43,7 @@ declare module '@woocommerce/settings' {
     defaultText: string;
     defaultStatus: boolean;
   }
+
   function getSetting(name: 'mailpoet_data'): MailPoetSettings;
   function getSetting(name: 'adminUrl'): string;
 }
diff --git a/mailpoet/assets/js/src/help-tooltip.js b/mailpoet/assets/js/src/help-tooltip.js
index 7f2bb1659d..213518efc6 100644
--- a/mailpoet/assets/js/src/help-tooltip.js
+++ b/mailpoet/assets/js/src/help-tooltip.js
@@ -1,11 +1,11 @@
-import TooltipComponent from 'help-tooltip.jsx';
+import { Tooltip } from 'help-tooltip.jsx';
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 
 export const MailPoetHelpTooltip = {
   show: function show(domContainerNode, opts) {
     ReactDOM.render(
-      createElement(TooltipComponent, {
+      createElement(Tooltip, {
         tooltip: opts.tooltip,
         tooltipId: opts.tooltipId,
         place: opts.place,
@@ -15,4 +15,4 @@ export const MailPoetHelpTooltip = {
   },
 };
 
-export default TooltipComponent;
+export { Tooltip };
diff --git a/mailpoet/assets/js/src/help-tooltip.jsx b/mailpoet/assets/js/src/help-tooltip.jsx
index 1a5c828789..2a623fabc7 100644
--- a/mailpoet/assets/js/src/help-tooltip.jsx
+++ b/mailpoet/assets/js/src/help-tooltip.jsx
@@ -62,4 +62,4 @@ Tooltip.defaultProps = {
   className: undefined,
 };
 
-export default Tooltip;
+export { Tooltip };
diff --git a/mailpoet/assets/js/src/help/cron_status.jsx b/mailpoet/assets/js/src/help/cron_status.jsx
index 1b3adc9876..80283bcae6 100644
--- a/mailpoet/assets/js/src/help/cron_status.jsx
+++ b/mailpoet/assets/js/src/help/cron_status.jsx
@@ -1,7 +1,8 @@
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import KeyValueTable from 'common/key_value_table.jsx';
-import PrintBoolean from 'common/print_boolean.jsx';
+
+import { MailPoet } from 'mailpoet';
+import { KeyValueTable } from 'common/key_value_table.jsx';
+import { PrintBoolean } from 'common/print_boolean.jsx';
 
 function CronStatus(props) {
   const status = props.status_data;
@@ -83,4 +84,4 @@ CronStatus.propTypes = {
   }).isRequired,
 };
 
-export default CronStatus;
+export { CronStatus };
diff --git a/mailpoet/assets/js/src/help/help.jsx b/mailpoet/assets/js/src/help/help.jsx
index 3915e368a8..1e29683f61 100644
--- a/mailpoet/assets/js/src/help/help.jsx
+++ b/mailpoet/assets/js/src/help/help.jsx
@@ -1,13 +1,13 @@
 import ReactDOM from 'react-dom';
-import MailPoet from 'mailpoet';
-import KnowledgeBase from 'help/knowledge_base.jsx';
-import SystemInfo from 'help/system_info.jsx';
-import SystemStatus from 'help/system_status.jsx';
-import YourPrivacy from 'help/your_privacy.jsx';
+import { MailPoet } from 'mailpoet';
+import { KnowledgeBase } from 'help/knowledge_base.jsx';
+import { SystemInfo } from 'help/system_info.jsx';
+import { SystemStatus } from 'help/system_status.jsx';
+import { YourPrivacy } from 'help/your_privacy.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import RoutedTabs from '../common/tabs/routed_tabs';
-import Tab from '../common/tabs/tab';
+import { Notices } from 'notices/notices.jsx';
+import { RoutedTabs } from '../common/tabs/routed_tabs';
+import { Tab } from '../common';
 import { TopBar } from '../common/top_bar/top_bar';
 
 function App() {
diff --git a/mailpoet/assets/js/src/help/knowledge_base.jsx b/mailpoet/assets/js/src/help/knowledge_base.jsx
index 2df827a191..f994c82b8e 100644
--- a/mailpoet/assets/js/src/help/knowledge_base.jsx
+++ b/mailpoet/assets/js/src/help/knowledge_base.jsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 
-function KnowledgeBase() {
+export function KnowledgeBase() {
   return (
     <>
       <p>{MailPoet.I18n.t('knowledgeBaseIntro')}</p>
@@ -89,5 +89,3 @@ function KnowledgeBase() {
     </>
   );
 }
-
-export default KnowledgeBase;
diff --git a/mailpoet/assets/js/src/help/queue_status.jsx b/mailpoet/assets/js/src/help/queue_status.jsx
index f87e9bb115..96807a4abf 100644
--- a/mailpoet/assets/js/src/help/queue_status.jsx
+++ b/mailpoet/assets/js/src/help/queue_status.jsx
@@ -1,8 +1,8 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
-import KeyValueTable from 'common/key_value_table.jsx';
-import TasksList from './tasks_list/tasks_list.jsx';
-import TasksListDataRow from './tasks_list/tasks_list_data_row.jsx';
+import { KeyValueTable } from 'common/key_value_table.jsx';
+import { TasksList } from './tasks_list/tasks_list.jsx';
+import { TasksListDataRow } from './tasks_list/tasks_list_data_row.jsx';
 
 function QueueStatus(props) {
   const status = props.status_data;
@@ -103,4 +103,4 @@ QueueStatus.propTypes = {
   }).isRequired,
 };
 
-export default QueueStatus;
+export { QueueStatus };
diff --git a/mailpoet/assets/js/src/help/system_info.jsx b/mailpoet/assets/js/src/help/system_info.jsx
index 975cd81b37..b4eab8114d 100644
--- a/mailpoet/assets/js/src/help/system_info.jsx
+++ b/mailpoet/assets/js/src/help/system_info.jsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import _ from 'underscore';
 
 function handleFocus(event) {
@@ -26,7 +26,7 @@ function printData(data) {
   return <p>{MailPoet.I18n.t('systemInfoDataError')}</p>;
 }
 
-function SystemInfo() {
+export function SystemInfo() {
   const systemInfoData = window.systemInfoData;
   return (
     <>
@@ -38,5 +38,3 @@ function SystemInfo() {
     </>
   );
 }
-
-export default SystemInfo;
diff --git a/mailpoet/assets/js/src/help/system_status.jsx b/mailpoet/assets/js/src/help/system_status.jsx
index c4a6a6b589..3d2ced690f 100644
--- a/mailpoet/assets/js/src/help/system_status.jsx
+++ b/mailpoet/assets/js/src/help/system_status.jsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
-import CronStatus from './cron_status.jsx';
-import QueueStatus from './queue_status.jsx';
+import { CronStatus } from './cron_status.jsx';
+import { QueueStatus } from './queue_status.jsx';
 
 function renderStatusMessage(
   status,
@@ -101,7 +101,7 @@ function renderMSSSection(data) {
   );
 }
 
-function SystemStatus() {
+export function SystemStatus() {
   const systemStatusData = window.systemStatusData;
 
   return (
@@ -120,4 +120,3 @@ function SystemStatus() {
     </>
   );
 }
-export default SystemStatus;
diff --git a/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx b/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx
index c04e88198a..2112406d03 100644
--- a/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx
+++ b/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import TaskListDataRow from './tasks_list_data_row.jsx';
-import TaskListLabelsRow from './tasks_list_labels_row.jsx';
+import { MailPoet } from 'mailpoet';
+import { TasksListDataRow } from './tasks_list_data_row.jsx';
+import { TasksListLabelsRow } from './tasks_list_labels_row.jsx';
 
 function TasksList(props) {
   const colsCount = props.show_scheduled_at ? 6 : 5;
@@ -9,12 +9,12 @@ function TasksList(props) {
   return (
     <table className="widefat fixed striped">
       <thead>
-        <TaskListLabelsRow show_scheduled_at={props.show_scheduled_at} />
+        <TasksListLabelsRow show_scheduled_at={props.show_scheduled_at} />
       </thead>
       <tbody>
         {props.tasks.length ? (
           props.tasks.map((task) => (
-            <TaskListDataRow
+            <TasksListDataRow
               key={task.id}
               task={task}
               show_scheduled_at={props.show_scheduled_at}
@@ -27,7 +27,7 @@ function TasksList(props) {
         )}
       </tbody>
       <tfoot>
-        <TaskListLabelsRow show_scheduled_at={props.show_scheduled_at} />
+        <TasksListLabelsRow show_scheduled_at={props.show_scheduled_at} />
       </tfoot>
     </table>
   );
@@ -35,11 +35,11 @@ function TasksList(props) {
 
 TasksList.propTypes = {
   show_scheduled_at: PropTypes.bool,
-  tasks: PropTypes.arrayOf(TaskListDataRow.propTypes.task).isRequired,
+  tasks: PropTypes.arrayOf(TasksListDataRow.propTypes.task).isRequired,
 };
 
 TasksList.defaultProps = {
   show_scheduled_at: false,
 };
 
-export default TasksList;
+export { TasksList };
diff --git a/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx b/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx
index 8288c11dd9..9ccce2f50d 100644
--- a/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx
+++ b/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import parseDate from 'date-fns/parse';
 
 function TasksListDataRow(props) {
@@ -72,4 +72,4 @@ TasksListDataRow.defaultProps = {
   show_scheduled_at: false,
 };
 
-export default TasksListDataRow;
+export { TasksListDataRow };
diff --git a/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx b/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx
index abf7bc3a96..05d7cdeb3f 100644
--- a/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx
+++ b/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 function TasksListLabelsRow(props) {
   return (
@@ -24,4 +24,4 @@ TasksListLabelsRow.defaultProps = {
   show_scheduled_at: false,
 };
 
-export default TasksListLabelsRow;
+export { TasksListLabelsRow };
diff --git a/mailpoet/assets/js/src/help/your_privacy.jsx b/mailpoet/assets/js/src/help/your_privacy.jsx
index f18020d4bf..d2b4677cc6 100644
--- a/mailpoet/assets/js/src/help/your_privacy.jsx
+++ b/mailpoet/assets/js/src/help/your_privacy.jsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 
-function YourPrivacy() {
+export function YourPrivacy() {
   return (
     <>
       <p>{MailPoet.I18n.t('yourPrivacyContent1')}</p>
@@ -18,5 +18,3 @@ function YourPrivacy() {
     </>
   );
 }
-
-export default YourPrivacy;
diff --git a/mailpoet/assets/js/src/hooks.js b/mailpoet/assets/js/src/hooks.js
index e75d7a2bc8..e13455fad8 100644
--- a/mailpoet/assets/js/src/hooks.js
+++ b/mailpoet/assets/js/src/hooks.js
@@ -5,4 +5,4 @@ import { createHooks } from '@wordpress/hooks';
 window.wp = window.wp || {};
 window.wp.hooks = window.wp.hooks || createHooks();
 
-export default window.wp.hooks;
+export const Hooks = window.wp.hooks;
diff --git a/mailpoet/assets/js/src/index.ts b/mailpoet/assets/js/src/index.ts
index ffd965da97..fc2988e409 100644
--- a/mailpoet/assets/js/src/index.ts
+++ b/mailpoet/assets/js/src/index.ts
@@ -1,4 +1,3 @@
 import './global.d.ts';
-import { MailPoet } from './mailpoet';
 
-export default MailPoet;
+export { MailPoet } from './mailpoet';
diff --git a/mailpoet/assets/js/src/jquery.serialize_object.js b/mailpoet/assets/js/src/jquery.serialize_object.js
index 7400c9e7fe..7a73176314 100644
--- a/mailpoet/assets/js/src/jquery.serialize_object.js
+++ b/mailpoet/assets/js/src/jquery.serialize_object.js
@@ -101,4 +101,4 @@ $.fn.mailpoetSerializeObject = function (coerce) {
   return obj;
 };
 
-export default $;
+export { $ };
diff --git a/mailpoet/assets/js/src/listing/assets/search_icon.tsx b/mailpoet/assets/js/src/listing/assets/search_icon.tsx
index f3e8ef4d09..088377b261 100644
--- a/mailpoet/assets/js/src/listing/assets/search_icon.tsx
+++ b/mailpoet/assets/js/src/listing/assets/search_icon.tsx
@@ -1,4 +1,4 @@
-export default (
+export const Icon = (
   <svg viewBox="3 3 18 18">
     <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
   </svg>
diff --git a/mailpoet/assets/js/src/listing/bulk_actions.jsx b/mailpoet/assets/js/src/listing/bulk_actions.jsx
index eae8635730..c2f409e266 100644
--- a/mailpoet/assets/js/src/listing/bulk_actions.jsx
+++ b/mailpoet/assets/js/src/listing/bulk_actions.jsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
+
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 
 class ListingBulkActions extends Component {
@@ -109,4 +110,4 @@ ListingBulkActions.propTypes = {
   onBulkAction: PropTypes.func.isRequired,
 };
 
-export default ListingBulkActions;
+export { ListingBulkActions };
diff --git a/mailpoet/assets/js/src/listing/filters.jsx b/mailpoet/assets/js/src/listing/filters.jsx
index b0b52d44fc..03efef88f5 100644
--- a/mailpoet/assets/js/src/listing/filters.jsx
+++ b/mailpoet/assets/js/src/listing/filters.jsx
@@ -1,9 +1,10 @@
 import { Component } from 'react';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import Button from 'common/button/button.tsx';
-import Select from 'common/form/select/select.tsx';
+
+import { Button } from 'common/button/button.tsx';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select.tsx';
 
 class ListingFilters extends Component {
   componentDidUpdate() {
@@ -100,4 +101,4 @@ ListingFilters.defaultProps = {
   onBeforeSelectFilter: undefined,
 };
 
-export default ListingFilters;
+export { ListingFilters };
diff --git a/mailpoet/assets/js/src/listing/header.jsx b/mailpoet/assets/js/src/listing/header.jsx
index 66f15e9c79..565304baf3 100644
--- a/mailpoet/assets/js/src/listing/header.jsx
+++ b/mailpoet/assets/js/src/listing/header.jsx
@@ -1,8 +1,9 @@
-import MailPoet from 'mailpoet';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import Checkbox from 'common/form/checkbox/checkbox.tsx';
-import ListingColumn from './listing_column.jsx';
+
+import { Checkbox } from 'common/form/checkbox/checkbox.tsx';
+import { MailPoet } from 'mailpoet';
+import { ListingColumn } from './listing_column.jsx';
 
 class ListingHeader extends Component {
   constructor(props) {
@@ -75,4 +76,4 @@ ListingHeader.defaultProps = {
   sort_order: 'desc',
 };
 
-export default ListingHeader;
+export { ListingHeader };
diff --git a/mailpoet/assets/js/src/listing/index.ts b/mailpoet/assets/js/src/listing/index.ts
index e770174234..617af410fe 100644
--- a/mailpoet/assets/js/src/listing/index.ts
+++ b/mailpoet/assets/js/src/listing/index.ts
@@ -1 +1 @@
-export { default as Listing } from './listing';
+export * from './listing';
diff --git a/mailpoet/assets/js/src/listing/listing.jsx b/mailpoet/assets/js/src/listing/listing.jsx
index db4749c2e7..c0286dbb7c 100644
--- a/mailpoet/assets/js/src/listing/listing.jsx
+++ b/mailpoet/assets/js/src/listing/listing.jsx
@@ -1,20 +1,20 @@
 import jQuery from 'jquery';
 import { Component } from 'react';
 import _ from 'underscore';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Categories from 'common/categories/categories';
-import ListingHeader from 'listing/header.jsx';
-import ListingPages from 'listing/pages.jsx';
-import ListingSearch from 'listing/search.jsx';
-import ListingFilters from 'listing/filters.jsx';
-import ListingItems from 'listing/listing_items.jsx';
-import MailerError from 'listing/notices.jsx';
+import { MailPoet } from 'mailpoet';
+import { Categories } from 'common/categories/categories';
+import { ListingHeader } from 'listing/header.jsx';
+import { ListingPages } from 'listing/pages.jsx';
+import { ListingSearch } from 'listing/search.jsx';
+import { ListingFilters } from 'listing/filters.jsx';
+import { ListingItems } from 'listing/listing_items.jsx';
+import { MailerError } from 'listing/notices.jsx';
 import { withRouter } from 'react-router-dom';
 import { GlobalContext } from 'context/index.jsx';
 
-class Listing extends Component {
+class ListingComponent extends Component {
   constructor(props) {
     super(props);
     this.state = this.getEmptyState();
@@ -592,7 +592,7 @@ class Listing extends Component {
     // item actions
     const itemActions = this.props.item_actions || [];
 
-    const tableClasses = classNames('mailpoet-listing-table', {
+    const tableClasses = classnames('mailpoet-listing-table', {
       'mailpoet-listing-loading': this.state.loading,
     });
 
@@ -638,7 +638,7 @@ class Listing extends Component {
       extraActions = this.props.renderExtraActions(this.state);
     }
 
-    const listingClassName = classNames(
+    const listingClassName = classnames(
       'mailpoet-listing',
       this.props.className,
     );
@@ -726,10 +726,10 @@ class Listing extends Component {
   }
 }
 
-Listing.contextType = GlobalContext;
+ListingComponent.contextType = GlobalContext;
 
 /* eslint-disable react/require-default-props */
-Listing.propTypes = {
+ListingComponent.propTypes = {
   limit: PropTypes.number,
   sort_by: PropTypes.string,
   sort_order: PropTypes.string,
@@ -766,7 +766,7 @@ Listing.propTypes = {
 };
 /* eslint-enable react/require-default-props */
 
-Listing.defaultProps = {
+ListingComponent.defaultProps = {
   limit: 10,
   sort_by: null,
   sort_order: undefined,
@@ -790,4 +790,4 @@ Listing.defaultProps = {
   className: undefined,
 };
 
-export default withRouter(Listing);
+export const Listing = withRouter(ListingComponent);
diff --git a/mailpoet/assets/js/src/listing/listing_column.jsx b/mailpoet/assets/js/src/listing/listing_column.jsx
index 3fa7d742e1..8ea04e2eb3 100644
--- a/mailpoet/assets/js/src/listing/listing_column.jsx
+++ b/mailpoet/assets/js/src/listing/listing_column.jsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
 class ListingColumn extends Component {
@@ -10,7 +10,7 @@ class ListingColumn extends Component {
   };
 
   render() {
-    const classes = classNames(
+    const classes = classnames(
       'manage-column',
       { 'column-primary': this.props.column.is_primary },
       { sortable: this.props.column.sortable },
@@ -76,4 +76,4 @@ ListingColumn.defaultProps = {
   sort_by: undefined,
 };
 
-export default ListingColumn;
+export { ListingColumn };
diff --git a/mailpoet/assets/js/src/listing/listing_item.jsx b/mailpoet/assets/js/src/listing/listing_item.jsx
index 8194c8868c..4f28af1768 100644
--- a/mailpoet/assets/js/src/listing/listing_item.jsx
+++ b/mailpoet/assets/js/src/listing/listing_item.jsx
@@ -1,9 +1,9 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import Checkbox from 'common/form/checkbox/checkbox.tsx';
+import classnames from 'classnames';
+import { Checkbox } from 'common/form/checkbox/checkbox.tsx';
 
 class ListingItem extends Component {
   handleSelectItem = (e) => {
@@ -68,7 +68,7 @@ class ListingItem extends Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={classNames(action.name, action.className)}
+                className={classnames(action.name, action.className)}
               >
                 <a
                   type="button"
@@ -89,7 +89,7 @@ class ListingItem extends Component {
               <span
                 onClick={this.props.onRefreshItems}
                 key={`action-${action.name}`}
-                className={classNames(action.name, action.className)}
+                className={classnames(action.name, action.className)}
                 role="button"
                 tabIndex={index}
                 onKeyDown={(event) => {
@@ -109,7 +109,7 @@ class ListingItem extends Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={classNames(action.name, action.className)}
+                className={classnames(action.name, action.className)}
               >
                 {action.link(this.props.item, this.props.location)}
               </span>
@@ -118,7 +118,7 @@ class ListingItem extends Component {
             customAction = (
               <span
                 key={`action-${action.name}`}
-                className={classNames(action.name, action.className)}
+                className={classnames(action.name, action.className)}
               >
                 <a
                   href="#"
@@ -200,7 +200,7 @@ class ListingItem extends Component {
       );
     }
 
-    const rowClasses = classNames({
+    const rowClasses = classnames({
       'mailpoet-listing-row-selected':
         this.props.item.selected || this.props.selection === 'all',
       'mailpoet-listing-row-inactive': this.props.isItemInactive(
@@ -251,4 +251,4 @@ ListingItem.defaultProps = {
   isItemToggleable: () => false,
 };
 
-export default ListingItem;
+export { ListingItem };
diff --git a/mailpoet/assets/js/src/listing/listing_items.jsx b/mailpoet/assets/js/src/listing/listing_items.jsx
index 959e9d86d1..e98cfea780 100644
--- a/mailpoet/assets/js/src/listing/listing_items.jsx
+++ b/mailpoet/assets/js/src/listing/listing_items.jsx
@@ -1,10 +1,11 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
-import ListingBulkActions from 'listing/bulk_actions.jsx';
-import ListingItem from 'listing/listing_item.jsx';
+import classnames from 'classnames';
+
 import { Grid } from 'common/grid';
+import { ListingBulkActions } from 'listing/bulk_actions.jsx';
+import { ListingItem } from 'listing/listing_item.jsx';
+import { MailPoet } from 'mailpoet';
 
 // eslint-disable-next-line react/prefer-stateless-function, max-len
 class ListingItems extends Component {
@@ -48,13 +49,13 @@ class ListingItems extends Component {
       this.props.selected_ids.length > 0 || this.props.selection
     );
 
-    const actionAndSelectAllRowClasses = classNames(
+    const actionAndSelectAllRowClasses = classnames(
       'mailpoet-listing-actions-and-select-all-row',
       {
         mailpoet_hidden: areBulkActionsHidden && isSelectAllHidden,
       },
     );
-    const selectAllClasses = classNames('mailpoet-listing-select-all', {
+    const selectAllClasses = classnames('mailpoet-listing-select-all', {
       mailpoet_hidden: isSelectAllHidden,
     });
 
@@ -186,4 +187,4 @@ ListingItems.defaultProps = {
   isItemToggleable: () => false,
 };
 
-export default ListingItems;
+export { ListingItems };
diff --git a/mailpoet/assets/js/src/listing/notices.jsx b/mailpoet/assets/js/src/listing/notices.jsx
index 73c615106f..aaffc339a1 100644
--- a/mailpoet/assets/js/src/listing/notices.jsx
+++ b/mailpoet/assets/js/src/listing/notices.jsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 import ReactStringReplace from 'react-string-replace';
 
@@ -22,7 +22,7 @@ const resumeMailerSending = () => {
     });
 };
 
-function MailerError(props) {
+export function MailerError(props) {
   if (
     !props.mta_log.error ||
     props.mta_log.status !== 'paused' ||
@@ -202,5 +202,3 @@ function MailerCheckSettingsNotice() {
     </p>
   );
 }
-
-export default MailerError;
diff --git a/mailpoet/assets/js/src/listing/pages.jsx b/mailpoet/assets/js/src/listing/pages.jsx
index a0a2cc73df..56a7d8f4a9 100644
--- a/mailpoet/assets/js/src/listing/pages.jsx
+++ b/mailpoet/assets/js/src/listing/pages.jsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
+import classnames from 'classnames';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 
 class ListingPages extends Component {
@@ -214,7 +214,7 @@ class ListingPages extends Component {
       );
     }
 
-    const classes = classNames('mailpoet-listing-pages', {
+    const classes = classnames('mailpoet-listing-pages', {
       'one-page': this.props.count <= this.props.limit,
     });
 
@@ -284,4 +284,4 @@ Arrow.defaultProps = {
   disabled: false,
 };
 
-export default ListingPages;
+export { ListingPages };
diff --git a/mailpoet/assets/js/src/listing/search.jsx b/mailpoet/assets/js/src/listing/search.jsx
index 3d0600ae84..7730dd73e2 100644
--- a/mailpoet/assets/js/src/listing/search.jsx
+++ b/mailpoet/assets/js/src/listing/search.jsx
@@ -1,9 +1,9 @@
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
-import Input from 'common/form/input/input.tsx';
-import icon from './assets/search_icon.tsx';
+import { Input } from 'common/form/input/input.tsx';
+import { Icon } from './assets/search_icon.tsx';
 
 /**
  * this components has to be setup with router
@@ -69,7 +69,7 @@ class ListingSearch extends Component {
           </label>
           <Input
             dimension="small"
-            iconStart={icon}
+            iconStart={Icon}
             type="search"
             id="search_input"
             name="s"
@@ -88,4 +88,4 @@ ListingSearch.propTypes = {
   onSearch: PropTypes.func.isRequired,
 };
 
-export default ListingSearch;
+export { ListingSearch };
diff --git a/mailpoet/assets/js/src/loading.jsx b/mailpoet/assets/js/src/loading.jsx
index f0b801f087..f7f9ee3157 100644
--- a/mailpoet/assets/js/src/loading.jsx
+++ b/mailpoet/assets/js/src/loading.jsx
@@ -1,4 +1,4 @@
-function Loading() {
+export function Loading() {
   return (
     <div className="mailpoet_loading">
       <div className="mailpoet_modal_loading mailpoet_modal_loading_1" />
@@ -7,5 +7,3 @@ function Loading() {
     </div>
   );
 }
-
-export default Loading;
diff --git a/mailpoet/assets/js/src/logs/list.tsx b/mailpoet/assets/js/src/logs/list.tsx
index ad6af35971..1da93392cd 100644
--- a/mailpoet/assets/js/src/logs/list.tsx
+++ b/mailpoet/assets/js/src/logs/list.tsx
@@ -1,12 +1,11 @@
 import { useCallback, useState } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { curry } from 'lodash';
 import { parseISO } from 'date-fns';
 
-import Datepicker from '../common/datepicker/datepicker';
-import { Button } from '../common';
-import Input from '../common/form/input/input';
-import icon from '../listing/assets/search_icon';
+import { Datepicker } from '../common/datepicker/datepicker';
+import { Button, Input } from '../common';
+import { Icon } from '../listing/assets/search_icon';
 
 type LogData = {
   id: number;
@@ -143,7 +142,7 @@ export function List({
           </label>
           <Input
             dimension="small"
-            iconStart={icon}
+            iconStart={Icon}
             type="search"
             id="search_input"
             name="s"
diff --git a/mailpoet/assets/js/src/mailpoet.ts b/mailpoet/assets/js/src/mailpoet.ts
index 56b539ea1f..ec2170d078 100644
--- a/mailpoet/assets/js/src/mailpoet.ts
+++ b/mailpoet/assets/js/src/mailpoet.ts
@@ -1,5 +1,5 @@
-import FeaturesController from './features_controller';
-import MailPoetComUrlFactory from './mailpoet_com_url_factory';
+import { FeaturesController } from './features_controller';
+import { MailPoetComUrlFactory } from './mailpoet_com_url_factory';
 import { MailPoetI18n } from './i18n';
 import { MailPoetDate } from './date';
 import { MailPoetAjax } from './ajax';
@@ -67,5 +67,3 @@ declare global {
 
 // Expose MailPoet globally
 window.MailPoet = MailPoet;
-
-export default MailPoet;
diff --git a/mailpoet/assets/js/src/mailpoet_com_url_factory.js b/mailpoet/assets/js/src/mailpoet_com_url_factory.js
index 3e6e0af64c..4d9d328f99 100644
--- a/mailpoet/assets/js/src/mailpoet_com_url_factory.js
+++ b/mailpoet/assets/js/src/mailpoet_com_url_factory.js
@@ -1,4 +1,4 @@
-const MailPoetComUrlFactory = (referralId) => {
+export const MailPoetComUrlFactory = (referralId) => {
   const baseUrl = 'https://www.mailpoet.com/';
   const baseShopUrl = 'https://account.mailpoet.com/';
 
@@ -47,5 +47,3 @@ const MailPoetComUrlFactory = (referralId) => {
     },
   };
 };
-
-export default MailPoetComUrlFactory;
diff --git a/mailpoet/assets/js/src/mailpoet_public.ts b/mailpoet/assets/js/src/mailpoet_public.ts
index 40f2051fa0..f397198e0b 100644
--- a/mailpoet/assets/js/src/mailpoet_public.ts
+++ b/mailpoet/assets/js/src/mailpoet_public.ts
@@ -3,7 +3,7 @@ import { MailPoetAjax } from './ajax';
 import { MailPoetI18n } from './i18n';
 import { MailPoetIframe } from './iframe';
 
-const MailPoet = {
+export const MailPoet = {
   Ajax: MailPoetAjax,
   I18n: MailPoetI18n,
   Iframe: MailPoetIframe,
@@ -11,5 +11,3 @@ const MailPoet = {
 
 // Expose MailPoet globally
 window.MailPoet = MailPoet;
-
-export default MailPoet;
diff --git a/mailpoet/assets/js/src/mailpoet_tests.js b/mailpoet/assets/js/src/mailpoet_tests.js
index 7aa9bab371..e8c6fad6a3 100644
--- a/mailpoet/assets/js/src/mailpoet_tests.js
+++ b/mailpoet/assets/js/src/mailpoet_tests.js
@@ -4,7 +4,7 @@ var MailPoet = {};
 // Expose MailPoet globally
 window.MailPoet = MailPoet;
 
-export default MailPoet;
+export { MailPoet };
 
 require('i18n'); // side effect - extends MailPoet object
 require('notice'); // side effect - extends MailPoet object
diff --git a/mailpoet/assets/js/src/marketing_optin_block/attributes.ts b/mailpoet/assets/js/src/marketing_optin_block/attributes.ts
index e4a39f5a0c..44fc42af3a 100644
--- a/mailpoet/assets/js/src/marketing_optin_block/attributes.ts
+++ b/mailpoet/assets/js/src/marketing_optin_block/attributes.ts
@@ -4,7 +4,7 @@
 import { getSetting } from '@woocommerce/settings';
 
 const { defaultText } = getSetting('mailpoet_data');
-export default {
+export const marketingOptinAttributes = {
   text: {
     type: 'string',
     default: defaultText,
diff --git a/mailpoet/assets/js/src/marketing_optin_block/block.tsx b/mailpoet/assets/js/src/marketing_optin_block/block.tsx
index d178a7005a..b6ac9899e4 100644
--- a/mailpoet/assets/js/src/marketing_optin_block/block.tsx
+++ b/mailpoet/assets/js/src/marketing_optin_block/block.tsx
@@ -3,13 +3,13 @@
  * External dependencies
  */
 import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { useState, useEffect, RawHTML } from '@wordpress/element';
+import { RawHTML, useEffect, useState } from '@wordpress/element';
 import { getSetting } from '@woocommerce/settings';
 
 const { optinEnabled, defaultText, defaultStatus } =
   getSetting('mailpoet_data');
 
-function Block({
+export function FrontendBlock({
   text,
   checkoutExtensionData,
 }: {
@@ -36,5 +36,3 @@ function Block({
     </CheckboxControl>
   );
 }
-
-export default Block;
diff --git a/mailpoet/assets/js/src/marketing_optin_block/frontend.ts b/mailpoet/assets/js/src/marketing_optin_block/frontend.ts
index a7fbaf6c4b..c44dd773fa 100644
--- a/mailpoet/assets/js/src/marketing_optin_block/frontend.ts
+++ b/mailpoet/assets/js/src/marketing_optin_block/frontend.ts
@@ -7,7 +7,7 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './block.json';
-import FrontendBlock from './block';
+import { FrontendBlock } from './block';
 
 registerCheckoutBlock({
   metadata,
diff --git a/mailpoet/assets/js/src/marketing_optin_block/index.tsx b/mailpoet/assets/js/src/marketing_optin_block/index.tsx
index 7ced56608e..58bd5ae481 100644
--- a/mailpoet/assets/js/src/marketing_optin_block/index.tsx
+++ b/mailpoet/assets/js/src/marketing_optin_block/index.tsx
@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
-import attributes from './attributes';
+import { marketingOptinAttributes } from './attributes';
 import metadata from './block.json';
 
 const categories = getCategories();
@@ -26,7 +26,7 @@ registerBlockType(metadata, {
   },
   attributes: {
     ...metadata.attributes,
-    ...attributes,
+    ...marketingOptinAttributes,
   },
   edit: Edit,
   save: Save,
diff --git a/mailpoet/assets/js/src/newsletter_editor/App.js b/mailpoet/assets/js/src/newsletter_editor/App.js
index 527865575c..5c5964d227 100644
--- a/mailpoet/assets/js/src/newsletter_editor/App.js
+++ b/mailpoet/assets/js/src/newsletter_editor/App.js
@@ -6,7 +6,6 @@ import _ from 'underscore'; // eslint-disable-line func-names
 var Radio;
 var AppView;
 var EditorApplication;
-var app;
 
 // newsletter editor requires underscore on window.
 // For other code to be able to use lodash we need to make sure underscore is present on window.
@@ -69,7 +68,7 @@ EditorApplication = Marionette.Application.extend({
   },
 });
 
-app = new EditorApplication();
-window.EditorApplication = app;
+const App = new EditorApplication();
+window.EditorApplication = App;
 
-export default app;
+export { App };
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/BehaviorsLookup.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/BehaviorsLookup.js
index 445d730596..fcb4621e70 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/BehaviorsLookup.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/BehaviorsLookup.js
@@ -16,4 +16,4 @@ Marionette.Behaviors.behaviorsLookup = function () {
 
 window.BehaviorsLookup = BehaviorsLookup;
 
-export default BehaviorsLookup;
+export { BehaviorsLookup };
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
index 54c3225bee..f42b845a19 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
@@ -4,9 +4,9 @@
  * Adds a color picker integration with the view
  */
 import Marionette from 'backbone.marionette';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
-import MailPoet from 'mailpoet';
 import 'spectrum'; // eslint-disable-line func-names
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { MailPoet } from 'mailpoet';
 
 var BL = BehaviorsLookup;
 
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
index 645f362a14..4e0fde7e9e 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
@@ -9,11 +9,9 @@
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import BL from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
 import interact from 'interact';
 
-var BehaviorsLookup = BL;
-
 BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
   defaults: {
     columnLimit: 3,
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
index 46e49d8209..bbec66a9b8 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
@@ -7,9 +7,9 @@
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
 import interact from 'interact';
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 
 var BL = BehaviorsLookup;
 
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js
index eb383dbf1a..934762777d 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js
@@ -4,11 +4,11 @@
  * Highlights a block,column that is being hovered by mouse or edited
  */
 import Marionette from 'backbone.marionette';
-import BL from 'newsletter_editor/behaviors/BehaviorsLookup';
-import App from 'newsletter_editor/App';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { App } from 'newsletter_editor/App';
 import { isEventInsideElement } from 'newsletter_editor/utils';
 
-BL.HighlightEditingBehavior = Marionette.Behavior.extend({
+BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
   modelEvents: {
     startEditing: 'onStartEditing',
     stopEditing: 'onStopEditing',
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
index 2b35657ba3..7176923efc 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
@@ -6,8 +6,8 @@
  */
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
 import jQuery from 'jquery';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
 
 var BL = BehaviorsLookup;
 var DELAY_REFRESH_FOR_MS = 500;
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
index b944872a02..0c8983131e 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
@@ -4,7 +4,7 @@
  * Allows resizing elements within a block
  */
 import Marionette from 'backbone.marionette';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
 import interact from 'interact';
 
 var BL = BehaviorsLookup;
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js
index 91120c7ada..bfaf70ba42 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js
@@ -5,7 +5,7 @@
  */
 import Marionette from 'backbone.marionette';
 import jQuery from 'jquery';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup'; // eslint-disable-line func-names
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup'; // eslint-disable-line func-names
 
 var BL = BehaviorsLookup;
 
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
index 91777eeeff..6f0e389f91 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
@@ -5,7 +5,7 @@
  */
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup'; // eslint-disable-line func-names
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup'; // eslint-disable-line func-names
 
 var BL = BehaviorsLookup;
 
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js
index 363e0edf86..271fabc447 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js
@@ -4,10 +4,10 @@
  * Adds TinyMCE text editing capabilities to a view
  */
 import Marionette from 'backbone.marionette';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
-import App from 'newsletter_editor/App';
 import tinymce from 'tinymce/tinymce';
-import tinymceMailpoetShortcodes from 'newsletter_editor/tinymce/mailpoet_shortcodes.js';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { App } from 'newsletter_editor/App';
+import { tinyMceAdd } from 'newsletter_editor/tinymce/mailpoet_shortcodes.js';
 
 // TinyMCE theme and plugins
 import 'tinymce/themes/silver';
@@ -48,7 +48,7 @@ BL.TextEditorBehavior = Marionette.Behavior.extend({
       return;
     }
 
-    tinymce.PluginManager.add('mailpoet_shortcodes', tinymceMailpoetShortcodes);
+    tinymce.PluginManager.add('mailpoet_shortcodes', tinyMceAdd);
 
     tinymce.init(
       this.options.configurationFilter({
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js
index ac58010460..75df56f90a 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js
@@ -4,7 +4,7 @@
  * Handles relations between different WC style settings (e.g. one color depends on another)
  */
 import Marionette from 'backbone.marionette';
-import BehaviorsLookup from 'newsletter_editor/behaviors/BehaviorsLookup';
+import { BehaviorsLookup } from 'newsletter_editor/behaviors/BehaviorsLookup';
 
 var BL = BehaviorsLookup;
 
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js b/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js
index 79f2716fa1..f4b839851e 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js
@@ -5,14 +5,14 @@
  * block settings view.
  */
 import Backbone from 'backbone';
-import Radio from 'backbone.radio';
+import { Radio } from 'backbone.radio';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
-import App from 'newsletter_editor/App';
-import CommunicationComponent from 'newsletter_editor/components/communication';
-import BaseBlock from 'newsletter_editor/blocks/base';
-import DividerBlock from 'newsletter_editor/blocks/divider';
+import { MailPoet } from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
+import { DividerBlock } from 'newsletter_editor/blocks/divider';
 import 'select2';
 
 var Module = {};
@@ -318,4 +318,4 @@ App.on('before:start', function beforeStartApp(BeforeStartApp, options) {
   });
 });
 
-export default Module;
+export { Module as AbandonedCartBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
index 0775408fcd..4cfbdd16e9 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
@@ -7,12 +7,12 @@
  * This block depends on blocks.button and blocks.divider for block model and
  * block settings view.
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
-import ButtonBlock from 'newsletter_editor/blocks/button';
-import DividerBlock from 'newsletter_editor/blocks/divider';
-import CommunicationComponent from 'newsletter_editor/components/communication';
-import MailPoet from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
+import { ButtonBlock } from 'newsletter_editor/blocks/button';
+import { DividerBlock } from 'newsletter_editor/blocks/divider';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { MailPoet } from 'mailpoet';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore';
 import jQuery from 'jquery';
@@ -507,4 +507,4 @@ App.on('start', function (StartApp) {
   Application._ALCSupervisor.refresh();
 });
 
-export default Module;
+export { Module as AutomatedLatestContentBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js
index e3fb8d09c3..95af71084c 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js
@@ -2,12 +2,12 @@
 /**
  * Automated latest content block with image alignment.
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
-import ButtonBlock from 'newsletter_editor/blocks/button';
-import DividerBlock from 'newsletter_editor/blocks/divider';
-import CommunicationComponent from 'newsletter_editor/components/communication';
-import MailPoet from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
+import { ButtonBlock } from 'newsletter_editor/blocks/button';
+import { DividerBlock } from 'newsletter_editor/blocks/divider';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { MailPoet } from 'mailpoet';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore';
 import jQuery from 'jquery';
@@ -531,4 +531,4 @@ App.on('start', function (StartApp) {
   Application._ALCLayoutSupervisor.refresh();
 });
 
-export default Module;
+export { Module as AutomatedLatestContentBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/base.js b/mailpoet/assets/js/src/newsletter_editor/blocks/base.js
index ba503bdae8..9f5c3894fc 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/base.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/base.js
@@ -4,12 +4,12 @@
  * a BlockModel and a BlockView.
  * BlockToolsView, BlockSettingsView and BlockWidgetView are optional.
  */
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import Marionette from 'backbone.marionette';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import 'modal';
 
 var Module = {};
@@ -346,4 +346,4 @@ Module.WidgetView = Marionette.View.extend({
   },
 });
 
-export default Module;
+export { Module as BaseBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/button.js b/mailpoet/assets/js/src/newsletter_editor/blocks/button.js
index bb849cda64..31e534c3dd 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/button.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/button.js
@@ -2,8 +2,8 @@
 /**
  * Button content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
 import jQuery from 'jquery';
 
@@ -239,4 +239,4 @@ App.on('before:start', function (BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as ButtonBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/container.js b/mailpoet/assets/js/src/newsletter_editor/blocks/container.js
index e8969c20c6..f7dc8d17a1 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/container.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/container.js
@@ -8,8 +8,8 @@ import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 
 var Module = {};
 var base = BaseBlock;
@@ -530,4 +530,4 @@ App.on('before:start', function (BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as ContainerBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js b/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js
index a897e071ad..199d41b7c8 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js
@@ -1,8 +1,8 @@
 /**
  * Divider content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
 import jQuery from 'jquery';
 
@@ -226,4 +226,4 @@ App.on('before:start', function onBeforeStart(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as DividerBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js b/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js
index c7f68079f0..2772ba547a 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js
@@ -1,10 +1,10 @@
 /**
  * Footer content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 var Module = {};
 var base = BaseBlock;
@@ -169,4 +169,4 @@ App.on('before:start', function beforeAppStart(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as FooterBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/header.js b/mailpoet/assets/js/src/newsletter_editor/blocks/header.js
index 02399c4f5f..ca6e92a224 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/header.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/header.js
@@ -1,10 +1,10 @@
 /**
  * Header content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 var Module = {};
 var base = BaseBlock;
@@ -169,4 +169,4 @@ App.on('before:start', function beforeAppStart(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as HeaderBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/image.js b/mailpoet/assets/js/src/newsletter_editor/blocks/image.js
index 3b8ccac0c7..3e6238c21f 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/image.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/image.js
@@ -2,10 +2,10 @@
 /**
  * Image content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import jQuery from 'jquery';
 
 var Module = {};
@@ -221,4 +221,4 @@ App.on('before:start', function (BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as ImageBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js b/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js
index 18d9ed82e4..c9ef581c6b 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js
@@ -16,12 +16,12 @@ import Marionette from 'backbone.marionette';
 import Radio from 'backbone.radio';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
-import App from 'newsletter_editor/App';
-import CommunicationComponent from 'newsletter_editor/components/communication';
-import BaseBlock from 'newsletter_editor/blocks/base';
-import ButtonBlock from 'newsletter_editor/blocks/button';
-import DividerBlock from 'newsletter_editor/blocks/divider';
+import { MailPoet } from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
+import { ButtonBlock } from 'newsletter_editor/blocks/button';
+import { DividerBlock } from 'newsletter_editor/blocks/divider';
 import 'select2';
 
 var Module = {};
@@ -768,4 +768,4 @@ App.on('before:start', function (BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as PostsBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/products.js b/mailpoet/assets/js/src/newsletter_editor/blocks/products.js
index b5aaaed457..db6c6fec3a 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/products.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/products.js
@@ -15,12 +15,12 @@ import Marionette from 'backbone.marionette';
 import Radio from 'backbone.radio';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
-import App from 'newsletter_editor/App';
-import CommunicationComponent from 'newsletter_editor/components/communication';
-import BaseBlock from 'newsletter_editor/blocks/base';
-import ButtonBlock from 'newsletter_editor/blocks/button';
-import DividerBlock from 'newsletter_editor/blocks/divider';
+import { MailPoet } from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
+import { ButtonBlock } from 'newsletter_editor/blocks/button';
+import { DividerBlock } from 'newsletter_editor/blocks/divider';
 import 'select2';
 
 var Module = {};
@@ -686,4 +686,4 @@ App.on('before:start', function beforeStartApp(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as ProductsBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/social.js b/mailpoet/assets/js/src/newsletter_editor/blocks/social.js
index 208831eb46..a2a12a5338 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/social.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/social.js
@@ -2,8 +2,8 @@
 /**
  * Social icons content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import SuperModel from 'backbone.supermodel';
@@ -354,4 +354,4 @@ App.on('before:start', function (BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as SocialBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js b/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js
index 38407e585c..c44cb001bc 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js
@@ -1,8 +1,8 @@
 /**
  * Spacer content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
 
 var Module = {};
@@ -125,4 +125,4 @@ App.on('before:start', function beforeAppStart(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as SpacerBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/text.js b/mailpoet/assets/js/src/newsletter_editor/blocks/text.js
index a1415e9c43..759ffe127f 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/text.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/text.js
@@ -1,10 +1,10 @@
 /**
  * Text content block
  */
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 var Module = {};
 var base = BaseBlock;
@@ -122,4 +122,4 @@ App.on('before:start', function beforeAppStart(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module as TextBlock };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js b/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js
index c8af17fc05..d13a1bb3d2 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 
 const Module = {};
 const base = BaseBlock;
@@ -54,4 +54,4 @@ App.on('before:start', function beforeAppStart(BeforeStartApp) {
   });
 });
 
-export default Module;
+export { Module };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
index fb0586bf42..b32b48df63 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
   stale: ['selected'],
@@ -85,9 +85,4 @@ App.on('before:start', (BeforeStartApp) => {
   });
 });
 
-export default {
-  BlockModel,
-  BlockView,
-  BlockToolsView,
-  WidgetView,
-};
+export { BlockModel, BlockView, BlockToolsView, WidgetView };
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js
index 87d73c4ebc..ec828b8766 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
-import App from 'newsletter_editor/App';
-import BaseBlock from 'newsletter_editor/blocks/base';
+import { App } from 'newsletter_editor/App';
+import { BaseBlock } from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
   stale: ['contents', 'selected'],
@@ -78,9 +78,4 @@ App.on('before:start', (BeforeStartApp) => {
   });
 });
 
-export default {
-  BlockModel,
-  BlockView,
-  BlockToolsView,
-  WidgetView,
-};
+export { BlockModel, BlockView, BlockToolsView, WidgetView };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/communication.js b/mailpoet/assets/js/src/newsletter_editor/components/communication.js
index 35c12e05b8..63d9b86796 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/communication.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/communication.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names */
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import 'ajax';
 
 var Module = {};
@@ -102,4 +102,4 @@ App.on('start', function () {
   Module.getPostTypes();
 });
 
-export default Module;
+export { Module as CommunicationComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/config.jsx b/mailpoet/assets/js/src/newsletter_editor/components/config.jsx
index 0f29e08a2b..ce7b2a2093 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/config.jsx
+++ b/mailpoet/assets/js/src/newsletter_editor/components/config.jsx
@@ -1,10 +1,10 @@
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore'; // eslint-disable-line func-names
 
-const Module = {};
+const ConfigComponent = {};
 
-Module.ConfigModel = SuperModel.extend({
+ConfigComponent.ConfigModel = SuperModel.extend({
   defaults: {
     availableStyles: {},
     socialIcons: {},
@@ -16,21 +16,23 @@ Module.ConfigModel = SuperModel.extend({
 });
 
 // Global and available styles for access in blocks and their settings
-Module.config = {};
-Module.getConfig = function getConfig() {
-  return Module.config;
+ConfigComponent.config = {};
+ConfigComponent.getConfig = function getConfig() {
+  return ConfigComponent.config;
 };
-Module.setConfig = function setConfig(options) {
-  Module.config = new Module.ConfigModel(options, { parse: true });
-  return Module.config;
+ConfigComponent.setConfig = function setConfig(options) {
+  ConfigComponent.config = new ConfigComponent.ConfigModel(options, {
+    parse: true,
+  });
+  return ConfigComponent.config;
 };
 
 App.on('before:start', (BeforeStartApp, options) => {
   const Application = BeforeStartApp;
   const config = _.clone(options.config);
   // Expose config methods globally
-  Application.getConfig = Module.getConfig;
-  Application.setConfig = Module.setConfig;
+  Application.getConfig = ConfigComponent.getConfig;
+  Application.setConfig = ConfigComponent.setConfig;
 
   config.blockDefaults = _.extend(
     config.blockDefaults,
@@ -40,4 +42,4 @@ App.on('before:start', (BeforeStartApp, options) => {
   Application.setConfig(config);
 });
 
-export default Module;
+export { ConfigComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/content.js b/mailpoet/assets/js/src/newsletter_editor/components/content.js
index 2136daa99b..fe11415f32 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/content.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/content.js
@@ -1,7 +1,7 @@
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 var Module = {};
 
@@ -130,4 +130,4 @@ App.on('start', function appOnStart(Application, options) {
   );
 });
 
-export default Module;
+export { Module as ContentComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/heading.js b/mailpoet/assets/js/src/newsletter_editor/components/heading.js
index f65d61129d..2235b9e1f5 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/heading.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/heading.js
@@ -1,8 +1,8 @@
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import Marionette from 'backbone.marionette';
 import _ from 'underscore';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet'; // eslint-disable-line func-names
+import { MailPoet } from 'mailpoet'; // eslint-disable-line func-names
 
 var Module = {};
 
@@ -66,4 +66,4 @@ App.on('start', function (StartApp) {
   }
 });
 
-export default Module;
+export { Module as HeadingComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/history.js b/mailpoet/assets/js/src/newsletter_editor/components/history.js
index 4cea64b413..4d26cf4e0b 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/history.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/history.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import MailPoet from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { MailPoet } from 'mailpoet';
 import Marionette from 'backbone.marionette';
 import Mousetrap from 'mousetrap';
 
@@ -131,4 +131,4 @@ App.on('start', function appStart(StartApp) {
   StartApp._appView.showChildView('historyRegion', new Module.HistoryView());
 });
 
-export default Module;
+export { Module as HistoryComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/save.js b/mailpoet/assets/js/src/newsletter_editor/components/save.js
index 37a1624680..889d222af7 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/save.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/save.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names */
-import App from 'newsletter_editor/App';
-import CommunicationComponent from 'newsletter_editor/components/communication';
-import MailPoet from 'mailpoet';
+import { App } from 'newsletter_editor/App';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { MailPoet } from 'mailpoet';
 import Marionette from 'backbone.marionette';
 import $ from 'jquery';
 import Blob from 'blob';
@@ -662,4 +662,4 @@ App.on('start', function (BeforeStartApp) {
   BeforeStartApp._appView.showChildView('bottomRegion', bottomSaveView);
 });
 
-export default Module;
+export { Module as SaveComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js b/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js
index afe0a28f17..600cad5e73 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js
@@ -1,11 +1,12 @@
 /* eslint-disable func-names */
-import App from 'newsletter_editor/App';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore';
 import jQuery from 'jquery';
 
+import { App } from 'newsletter_editor/App';
+
 var Module = {};
 var SidebarView;
 // Widget handlers for use to create new content blocks via drag&drop
@@ -315,4 +316,4 @@ App.on('start', function (StartApp) {
   StartApp._appView.showChildView('sidebarRegion', sidebarView);
 });
 
-export default Module;
+export { Module as SidebarComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/styles.js b/mailpoet/assets/js/src/newsletter_editor/components/styles.js
index d029fc40e9..bbfdf5492d 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/styles.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/styles.js
@@ -1,4 +1,4 @@
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import Marionette from 'backbone.marionette';
 import SuperModel from 'backbone.supermodel';
 import _ from 'underscore'; // eslint-disable-line func-names
@@ -132,4 +132,4 @@ App.on('start', function (StartApp) {
   StartApp._appView.showChildView('stylesRegion', stylesView);
 });
 
-export default Module;
+export { Module as StylesComponent };
diff --git a/mailpoet/assets/js/src/newsletter_editor/initializer.jsx b/mailpoet/assets/js/src/newsletter_editor/initializer.jsx
index 5bf801d28b..59953c3c42 100644
--- a/mailpoet/assets/js/src/newsletter_editor/initializer.jsx
+++ b/mailpoet/assets/js/src/newsletter_editor/initializer.jsx
@@ -1,10 +1,10 @@
-import Hooks from 'wp-js-hooks';
-import MailPoet from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
 import ReactDOM from 'react-dom';
-import ListingHeadingSteps from 'newsletters/listings/heading_steps';
+import { ListingHeadingSteps } from 'newsletters/listings/heading_steps';
 import { newsletterTypesWithActivation } from 'newsletters/listings/utils';
-import fetchAutomaticEmailShortcodes from 'newsletters/automatic_emails/fetch_editor_shortcodes.jsx';
-import displayTutorial from './tutorial.jsx';
+import { fetchAutomaticEmailShortcodes } from 'newsletters/automatic_emails/fetch_editor_shortcodes.jsx';
+import { displayTutorial } from './tutorial.jsx';
 
 const renderHeading = (newsletterType) => {
   if (newsletterType !== 'wc_transactional') {
diff --git a/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js b/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
index 57a080a02d..b97749514d 100644
--- a/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
+++ b/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
@@ -8,9 +8,9 @@
  * its placeholder into editor text.
  */
 
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-function tinyMceAdd(editor) {
+export function tinyMceAdd(editor) {
   editor.ui.registry.addIcon(
     'mailpoet',
     '<svg viewBox="0 0 152.02 156.4" width="20" height="20"><path d="M37.71,89.1c3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V35.7l17,45.1a12.68,12.68,0,0,0,3.7,5.4c1.6,1.3,4,2,7.2,2a12.54,12.54,0,0,0,5.9-1.4,8.41,8.41,0,0,0,3.9-5l18.1-50V81a8.53,8.53,0,0,0,2.1,6.1c1.4,1.4,3.7,2.2,6.9,2.2,3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V8.7a7.48,7.48,0,0,0-3.3-6.6c-2.1-1.4-5-2.1-8.6-2.1a19.3,19.3,0,0,0-9.4,2,11.63,11.63,0,0,0-5.1,6.8L74.91,67.1,54.41,8.4a12.4,12.4,0,0,0-4.5-6.2c-2.1-1.5-5-2.2-8.8-2.2a16.51,16.51,0,0,0-8.9,2.1c-2.3,1.5-3.5,3.9-3.5,7.2V80.8c0,2.8.7,4.8,2,6.2C32.21,88.4,34.41,89.1,37.71,89.1Z"/><path d="M149,116.6l-2.4-1.9a7.4,7.4,0,0,0-9.4.3,19.65,19.65,0,0,1-12.5,4.6h-21.4A37.08,37.08,0,0,0,77,130.5l-1.1,1.2-1.1-1.1a37.25,37.25,0,0,0-26.3-10.9H27a19.59,19.59,0,0,1-12.4-4.6,7.28,7.28,0,0,0-9.4-.3l-2.4,1.9A7.43,7.43,0,0,0,0,122.2a7.14,7.14,0,0,0,2.4,5.7A37.28,37.28,0,0,0,27,137.4h21.6a19.59,19.59,0,0,1,18.9,14.4v.2c.1.7,1.2,4.4,8.5,4.4s8.4-3.7,8.5-4.4v-.2a19.59,19.59,0,0,1,18.9-14.4H125a37.28,37.28,0,0,0,24.6-9.5,7.42,7.42,0,0,0,2.4-5.7A7.86,7.86,0,0,0,149,116.6Z"/></svg>',
@@ -67,5 +67,3 @@ function tinyMceAdd(editor) {
     },
   });
 }
-
-export default tinyMceAdd;
diff --git a/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx b/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx
index 8e5ce97d76..a002be1f92 100644
--- a/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx
+++ b/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import moment from 'moment';
 
-const displayTutorial = () => {
+export const displayTutorial = () => {
   if (window.config.dragDemoUrlSettings) {
     return;
   }
@@ -23,5 +23,3 @@ const displayTutorial = () => {
     },
   });
 };
-
-export default displayTutorial;
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx
index 1d19f6eeba..283bf14fcf 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx
@@ -1,4 +1,4 @@
-import Selection from 'form/fields/selection.jsx';
+import { Selection } from 'form/fields/selection.jsx';
 import _ from 'underscore';
 
 type EventOptionData = {
@@ -96,5 +96,3 @@ export function EventOptions({
     </div>
   );
 }
-
-export default EventOptions;
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
index 1755e95418..15dfe9997b 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
@@ -1,10 +1,11 @@
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
-import Selection from 'form/fields/selection.jsx';
-import Text from 'form/fields/text.jsx';
-import { timeDelayValues } from 'newsletters/scheduling/common.jsx';
-import _ from 'underscore';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
+
+import { MailPoet } from 'mailpoet';
+import { Selection } from 'form/fields/selection.jsx';
+import { FormFieldText } from 'form/fields/text.jsx';
+import { timeDelayValues } from 'newsletters/scheduling/common.jsx';
 
 const defaultAfterTimeType = 'immediate';
 const defaultAfterTimeNumber = 1;
@@ -122,7 +123,7 @@ class EventScheduling extends Component {
     };
 
     return (
-      <Text
+      <FormFieldText
         field={props.field}
         item={props.item}
         onValueChange={props.onValueChange}
@@ -192,4 +193,4 @@ EventScheduling.defaultProps = {
   onValueChange: null,
 };
 
-export default EventScheduling;
+export { EventScheduling };
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
index f1d8de9eef..4d86a7841a 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
@@ -1,17 +1,18 @@
-import { Component } from 'react';
-import Background from 'common/background/background';
-import Button from 'common/button/button';
-import Heading from 'common/typography/heading/heading';
-import { Grid } from 'common/grid';
-import Selection from 'form/fields/selection.jsx';
-import ListingHeadingStepsRoute from 'newsletters/listings/heading_steps_route';
-import EventScheduling from 'newsletters/automatic_emails/events/event_scheduling.jsx';
-import EventOptions from 'newsletters/automatic_emails/events/event_options';
-import MailPoet from 'mailpoet';
 import _ from 'underscore';
-import PropTypes from 'prop-types';
-import { GlobalContext } from 'context/index.jsx';
+import { Component } from 'react';
 import jQuery from 'jquery';
+import PropTypes from 'prop-types';
+
+import { Background } from 'common/background/background';
+import { Button } from 'common/button/button';
+import { Heading } from 'common/typography/heading/heading';
+import { GlobalContext } from 'context/index.jsx';
+import { Grid } from 'common/grid';
+import { ListingHeadingStepsRoute } from 'newsletters/listings/heading_steps_route';
+import { EventScheduling } from 'newsletters/automatic_emails/events/event_scheduling.jsx';
+import { EventOptions } from 'newsletters/automatic_emails/events/event_options';
+import { MailPoet } from 'mailpoet';
+import { Selection } from 'form/fields/selection.jsx';
 
 const defaultAfterTimeType = 'immediate';
 const defaultAfterTimeNumber = 1;
@@ -298,4 +299,4 @@ EventsConditions.propTypes = {
   }).isRequired,
 };
 
-export default EventsConditions;
+export { EventsConditions };
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx
index 9c7bf52a6a..2edb679831 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx
@@ -1,7 +1,7 @@
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-const fetchAutomaticEmailShortcodes = (defaultConfig, newsletter) => {
+export const fetchAutomaticEmailShortcodes = (defaultConfig, newsletter) => {
   if (newsletter.type !== 'automatic') return defaultConfig;
 
   const config = defaultConfig;
@@ -29,5 +29,3 @@ const fetchAutomaticEmailShortcodes = (defaultConfig, newsletter) => {
       }
     });
 };
-
-export default fetchAutomaticEmailShortcodes;
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx
index cb592bdb2e..c1dd783a9a 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx
@@ -1,23 +1,21 @@
+import _ from 'underscore';
+import classnames from 'classnames';
 import { Component } from 'react';
 import ReactStringReplace from 'react-string-replace';
-
-import Listing from 'listing/listing.jsx';
-import Tags from 'common/tag/tags';
-import Toggle from 'common/form/toggle/toggle';
-import { ScheduledIcon } from 'common/listings/newsletter_status';
-import {
-  checkMailerStatus,
-  addStatsCTAAction,
-  confirmEdit,
-} from 'newsletters/listings/utils.jsx';
-import Statistics from 'newsletters/listings/statistics.jsx';
-import NewsletterTypes from 'newsletters/types';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
-import _ from 'underscore';
 import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 
+import {
+  addStatsCTAAction,
+  checkMailerStatus,
+  confirmEdit,
+} from 'newsletters/listings/utils.jsx';
+import { Listing } from 'listing/listing.jsx';
+import { MailPoet } from 'mailpoet';
+import { NewsletterTypes } from 'newsletters/types';
+import { ScheduledIcon, Tags, Toggle } from 'common';
+import { Statistics } from 'newsletters/listings/statistics.jsx';
+
 const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
 const automaticEmails = window.mailpoet_woocommerce_automatic_emails || {};
 
@@ -161,7 +159,7 @@ let newsletterActions = [
 
 newsletterActions = addStatsCTAAction(newsletterActions);
 
-class Listings extends Component {
+class ListingsComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -335,7 +333,7 @@ class Listings extends Component {
   };
 
   renderItem = (newsletter, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -482,7 +480,7 @@ class Listings extends Component {
   }
 }
 
-Listings.propTypes = {
+ListingsComponent.propTypes = {
   match: PropTypes.shape({
     params: PropTypes.shape({
       tab: PropTypes.string,
@@ -491,4 +489,4 @@ Listings.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-export default withRouter(Listings);
+export const Listings = withRouter(ListingsComponent);
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx
index a72cfc6b79..03b485d4bb 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx
@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import Heading from 'common/typography/heading/heading';
-import Selection from 'form/fields/selection.jsx';
-import EventScheduling from 'newsletters/automatic_emails/events/event_scheduling.jsx';
-import EventOptions from 'newsletters/automatic_emails/events/event_options';
+import { Heading } from 'common/typography/heading/heading';
+import { Selection } from 'form/fields/selection.jsx';
+import { EventScheduling } from 'newsletters/automatic_emails/events/event_scheduling.jsx';
+import { EventOptions } from 'newsletters/automatic_emails/events/event_options';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 
@@ -197,4 +197,4 @@ SendEventConditions.defaultProps = {
   onValueChange: null,
 };
 
-export default SendEventConditions;
+export { SendEventConditions };
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx b/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
index a09b012015..89090be69b 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
@@ -1,12 +1,12 @@
 import ReactStringReplace from 'react-string-replace';
-import MailPoet from 'mailpoet';
-import Hooks from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
 import { Grid } from 'common/grid';
 import {
   StatsBadge,
   getBadgeType,
 } from 'common/listings/newsletter_stats/stats';
-import Tooltip from 'help-tooltip';
+import { Tooltip } from 'help-tooltip';
 
 import { NewsletterType } from './newsletter_type';
 
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_stats_info.tsx b/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_stats_info.tsx
index 9eb73b5d65..4529008c11 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_stats_info.tsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_stats_info.tsx
@@ -1,8 +1,7 @@
-import MailPoet from 'mailpoet';
-import Heading from 'common/typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { Heading } from 'common/typography/heading/heading';
 import { Grid } from 'common/grid';
-import { Button } from 'common';
-import Tags from 'common/tag/tags';
+import { Button, Tags } from 'common';
 import { NewsletterType } from './newsletter_type';
 
 type Props = {
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx b/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx
index be92b1f321..31f3050a42 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx
@@ -1,19 +1,19 @@
 import { useState, useEffect, useCallback } from 'react';
-import Hooks from 'wp-js-hooks';
-import MailPoet from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
 import { withRouter } from 'react-router-dom';
-import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
+import { InvalidMssKeyNotice } from 'notices/invalid_mss_key_notice';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
-import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
-import RemoveWrapMargin from 'common/remove_wrap_margin/remove_wrap_margin';
-import Tabs from 'common/tabs/tabs';
-import Tab from 'common/tabs/tab';
-import Heading from 'common/typography/heading/heading';
+import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options';
+import { RemoveWrapMargin } from 'common/remove_wrap_margin/remove_wrap_margin';
+import { Tabs } from 'common/tabs/tabs';
+import { Tab } from 'common/tabs/tab';
+import { Heading } from 'common/typography/heading/heading';
 
 import { NewsletterGeneralStats } from './newsletter_general_stats';
 import { NewsletterType } from './newsletter_type';
 import { NewsletterStatsInfo } from './newsletter_stats_info';
-import PremiumBanner from './premium_banner.jsx';
+import { PremiumBanner } from './premium_banner.jsx';
 
 type Props = {
   match: {
@@ -33,7 +33,7 @@ type State = {
   loading: boolean;
 };
 
-function CampaignStatsPage({ match, history, location }: Props) {
+function CampaignStatsPageComponent({ match, history, location }: Props) {
   const [state, setState] = useState<State>({
     item: undefined,
     loading: true,
@@ -161,4 +161,4 @@ function CampaignStatsPage({ match, history, location }: Props) {
   );
 }
 
-export default withRouter(CampaignStatsPage);
+export const CampaignStatsPage = withRouter(CampaignStatsPageComponent);
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx b/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx
index 6d6edc38cf..3d69d5eb0f 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
-import PremiumRequired from 'common/premium_required/premium_required';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
+import { PremiumRequired } from 'common/premium_required/premium_required';
 
 function SkipDisplayingDetailedStats() {
   const ctaButton = (
@@ -39,7 +39,7 @@ function SkipDisplayingDetailedStats() {
   );
 }
 
-function PremiumBanner() {
+export function PremiumBanner() {
   if (!window.mailpoet_display_detailed_stats) {
     return <SkipDisplayingDetailedStats />;
   }
@@ -77,5 +77,3 @@ function PremiumBanner() {
   }
   return null;
 }
-
-export default PremiumBanner;
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading.jsx b/mailpoet/assets/js/src/newsletters/listings/heading.jsx
index d136e4e80d..24eb67fe35 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading.jsx
@@ -1,9 +1,9 @@
 import { Link } from 'react-router-dom';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
-import plusIcon from 'common/button/icon/plus';
+import { plusIcon } from 'common/button/icon/plus';
 
-function ListingHeading() {
+export function ListingHeading() {
   return (
     <TopBarWithBeamer>
       <Link
@@ -19,5 +19,3 @@ function ListingHeading() {
     </TopBarWithBeamer>
   );
 }
-
-export default ListingHeading;
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx b/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx
index 4c103d9b7a..e6349fdf4b 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx
@@ -4,7 +4,7 @@ import { mapPathToSteps } from './heading_steps.tsx';
 const isHeaderHidden = (location) =>
   location.hash.match(/^#\/new/) || location.pathname.match(/^\/new/);
 
-function ListingHeadingDisplay({ children, location }) {
+function ListingHeadingDisplayComponent({ children, location }) {
   const stepNumber = mapPathToSteps(location);
   if (stepNumber === null && !isHeaderHidden(location)) {
     return children;
@@ -12,4 +12,4 @@ function ListingHeadingDisplay({ children, location }) {
   return null;
 }
 
-export default withRouter(ListingHeadingDisplay);
+export const ListingHeadingDisplay = withRouter(ListingHeadingDisplayComponent);
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx b/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx
index 3a1e71b415..c42169944b 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx
@@ -1,7 +1,7 @@
 import { Location } from 'history';
-import MailPoet from 'mailpoet';
-import HideScreenOptions from '../../common/hide_screen_options/hide_screen_options';
-import Steps from '../../common/steps/steps';
+import { MailPoet } from 'mailpoet';
+import { HideScreenOptions } from '../../common/hide_screen_options/hide_screen_options';
+import { Steps } from '../../common/steps/steps';
 
 export const mapPathToSteps = (location: Location): number | null => {
   const stepsMap = [
@@ -101,4 +101,4 @@ function ListingHeadingSteps({
   return null;
 }
 
-export default ListingHeadingSteps;
+export { ListingHeadingSteps };
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx b/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx
index 5b5fcaa5ee..f956c35acf 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx
@@ -1,10 +1,8 @@
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import ListingHeadingSteps, { Props } from './heading_steps';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { ListingHeadingSteps, Props } from './heading_steps';
 
 interface PropsWithRouter extends RouteComponentProps, Props {}
 
-const ListingHeadingStepsRoute = withRouter((props: PropsWithRouter) => (
+export const ListingHeadingStepsRoute = withRouter((props: PropsWithRouter) => (
   <ListingHeadingSteps {...props} />
 ));
-
-export default ListingHeadingStepsRoute;
diff --git a/mailpoet/assets/js/src/newsletters/listings/notification.jsx b/mailpoet/assets/js/src/newsletters/listings/notification.jsx
index 1901cf491e..b43ec8402a 100644
--- a/mailpoet/assets/js/src/newsletters/listings/notification.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/notification.jsx
@@ -1,30 +1,28 @@
+import classnames from 'classnames';
 import { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import ReactStringReplace from 'react-string-replace';
 
-import Button from 'common/button/button';
-import Toggle from 'common/form/toggle/toggle';
-import Tags from 'common/tag/tags';
+import { Button } from 'common/button/button';
 import { ScheduledIcon } from 'common/listings/newsletter_status';
-import Listing from 'listing/listing.jsx';
-
-import {
-  checkCronStatus,
-  checkMailerStatus,
-  confirmEdit,
-} from 'newsletters/listings/utils.jsx';
-import NewsletterTypes from 'newsletters/types';
-
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
-
+import { Listing } from 'listing/listing.jsx';
+import { MailPoet } from 'mailpoet';
+import { NewsletterTypes } from 'newsletters/types';
 import {
   timeOfDayValues,
   weekDayValues,
   monthDayValues,
   nthWeekDayValues,
 } from 'newsletters/scheduling/common.jsx';
+import { Tags } from 'common/tag/tags';
+import { Toggle } from 'common/form/toggle/toggle';
+
+import {
+  checkCronStatus,
+  checkMailerStatus,
+  confirmEdit,
+} from 'newsletters/listings/utils.jsx';
 
 const messages = {
   onNoItemsFound: (group, search) =>
@@ -167,7 +165,7 @@ const newsletterActions = [
   },
 ];
 
-class NewsletterListNotification extends Component {
+class NewsletterListNotificationComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -312,7 +310,7 @@ class NewsletterListNotification extends Component {
   };
 
   renderItem = (newsletter, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -400,11 +398,13 @@ class NewsletterListNotification extends Component {
   }
 }
 
-NewsletterListNotification.propTypes = {
+NewsletterListNotificationComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withRouter(NewsletterListNotification);
+export const NewsletterListNotification = withRouter(
+  NewsletterListNotificationComponent,
+);
diff --git a/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx b/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx
index 5f2d62b69d..824eda88c3 100644
--- a/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx
@@ -1,17 +1,17 @@
+import classnames from 'classnames';
 import { Link, withRouter } from 'react-router-dom';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
 
-import Tags from 'common/tag/tags';
-import Listing from 'listing/listing.jsx';
-import QueueStatus from 'newsletters/listings/queue_status.jsx';
-import Statistics from 'newsletters/listings/statistics.jsx';
+import { Listing } from 'listing/listing.jsx';
+import { MailPoet } from 'mailpoet';
+import { QueueStatus } from 'newsletters/listings/queue_status.jsx';
+import { Statistics } from 'newsletters/listings/statistics.jsx';
 import {
   addStatsCTAAction,
   checkCronStatus,
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
+import { Tags } from 'common/tag/tags';
 
 const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
 
@@ -117,7 +117,7 @@ const newsletterActions = addStatsCTAAction([
 ]);
 
 const renderItem = (newsletter, actions, meta) => {
-  const rowClasses = classNames(
+  const rowClasses = classnames(
     'manage-column',
     'column-primary',
     'has-row-actions',
@@ -173,7 +173,7 @@ const renderItem = (newsletter, actions, meta) => {
   );
 };
 
-function NewsletterListNotificationHistory(props) {
+function NewsletterListNotificationHistoryComponent(props) {
   return (
     <>
       <Link
@@ -210,7 +210,7 @@ function NewsletterListNotificationHistory(props) {
   );
 }
 
-NewsletterListNotificationHistory.propTypes = {
+NewsletterListNotificationHistoryComponent.propTypes = {
   parentId: PropTypes.string.isRequired,
   location: PropTypes.shape({
     pathname: PropTypes.string,
@@ -222,4 +222,6 @@ NewsletterListNotificationHistory.propTypes = {
   }).isRequired,
 };
 
-export default withRouter(NewsletterListNotificationHistory);
+export const NewsletterListNotificationHistory = withRouter(
+  NewsletterListNotificationHistoryComponent,
+);
diff --git a/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx b/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx
index 36dd5e7373..932218ac56 100644
--- a/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx
@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import parseDate from 'date-fns/parse';
-import APIErrorsNotice from 'notices/api_errors_notice.tsx';
-import Button from 'common/button/button';
-import NewsletterStatus from 'common/listings/newsletter_status';
+import { APIErrorsNotice } from 'notices/api_errors_notice.tsx';
+import { Button } from 'common/button/button';
+import { NewsletterStatus } from 'common/listings/newsletter_status';
 
 const QueuePropType = PropTypes.shape({
   status: PropTypes.string,
@@ -128,4 +128,4 @@ QueueStatus.propTypes = {
   }).isRequired,
 };
 
-export default QueueStatus;
+export { QueueStatus };
diff --git a/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx b/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx
index 923c5ac6b5..d27924c5ab 100644
--- a/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx
@@ -1,22 +1,22 @@
+import classnames from 'classnames';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import classNames from 'classnames';
 import { Link, withRouter } from 'react-router-dom';
 import ReactStringReplace from 'react-string-replace';
 
-import Toggle from 'common/form/toggle/toggle';
-import Tags from 'common/tag/tags';
+import { Toggle } from 'common/form/toggle/toggle';
+import { Tags } from 'common/tag/tags';
 import { ScheduledIcon } from 'common/listings/newsletter_status';
-import Listing from 'listing/listing.jsx';
-import Statistics from 'newsletters/listings/statistics.jsx';
+import { Listing } from 'listing/listing.jsx';
+import { MailPoet } from 'mailpoet';
+import { Statistics } from 'newsletters/listings/statistics.jsx';
 import {
   addStatsCTAAction,
   checkCronStatus,
   checkMailerStatus,
   confirmEdit,
 } from 'newsletters/listings/utils.jsx';
-import NewsletterTypes from 'newsletters/types';
+import { NewsletterTypes } from 'newsletters/types';
 
 const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
 
@@ -161,7 +161,7 @@ let newsletterActions = [
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);
 
-class NewsletterListReEngagement extends Component {
+class NewsletterListReEngagementComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -277,7 +277,7 @@ class NewsletterListReEngagement extends Component {
   };
 
   renderItem = (newsletter, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -373,11 +373,13 @@ class NewsletterListReEngagement extends Component {
   }
 }
 
-NewsletterListReEngagement.propTypes = {
+NewsletterListReEngagementComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withRouter(NewsletterListReEngagement);
+export const NewsletterListReEngagement = withRouter(
+  NewsletterListReEngagementComponent,
+);
diff --git a/mailpoet/assets/js/src/newsletters/listings/standard.jsx b/mailpoet/assets/js/src/newsletters/listings/standard.jsx
index 0e3809dc67..0427ce8c93 100644
--- a/mailpoet/assets/js/src/newsletters/listings/standard.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/standard.jsx
@@ -1,20 +1,20 @@
+import classnames from 'classnames';
 import { Component } from 'react';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
-import confirmAlert from 'common/confirm_alert.jsx';
-import Tags from 'common/tag/tags';
-import Listing from 'listing/listing.jsx';
-import QueueStatus from 'newsletters/listings/queue_status.jsx';
-import Statistics from 'newsletters/listings/statistics.jsx';
+import { confirmAlert } from 'common/confirm_alert.jsx';
+import { Tags } from 'common/tag/tags';
+import { Listing } from 'listing/listing.jsx';
+import { QueueStatus } from 'newsletters/listings/queue_status.jsx';
+import { Statistics } from 'newsletters/listings/statistics.jsx';
 import {
   addStatsCTAAction,
   checkCronStatus,
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
-import NewsletterTypes from 'newsletters/types';
+import { NewsletterTypes } from 'newsletters/types';
 import { GlobalContext } from 'context/index.jsx';
 
 const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
@@ -178,7 +178,7 @@ let newsletterActions = [
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);
 
-class NewsletterListStandard extends Component {
+class NewsletterListStandardComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -187,7 +187,7 @@ class NewsletterListStandard extends Component {
   }
 
   renderItem = (newsletter, actions, meta) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -294,13 +294,15 @@ class NewsletterListStandard extends Component {
   }
 }
 
-NewsletterListStandard.contextType = GlobalContext;
+NewsletterListStandardComponent.contextType = GlobalContext;
 
-NewsletterListStandard.propTypes = {
+NewsletterListStandardComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withRouter(NewsletterListStandard);
+export const NewsletterListStandard = withRouter(
+  NewsletterListStandardComponent,
+);
diff --git a/mailpoet/assets/js/src/newsletters/listings/statistics.jsx b/mailpoet/assets/js/src/newsletters/listings/statistics.jsx
index 9cae4a5050..cff72008e8 100644
--- a/mailpoet/assets/js/src/newsletters/listings/statistics.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/statistics.jsx
@@ -1,11 +1,11 @@
 import moment from 'moment';
-import MailPoet from 'mailpoet';
-import Hooks from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import Tag from 'common/tag/tag';
-import NewsletterStats from 'common/listings/newsletter_stats';
+import { Tag } from 'common';
 import { trackStatsCTAClicked } from 'newsletters/listings/utils.jsx';
+import { NewsletterStats } from 'common/listings/newsletter_stats';
 
 const wrapInLink = (content, params, id, totalSent) => {
   if (totalSent <= 0 || !params.link) {
@@ -205,4 +205,4 @@ Statistics.defaultProps = {
   currentTime: undefined,
 };
 
-export default Statistics;
+export { Statistics };
diff --git a/mailpoet/assets/js/src/newsletters/listings/utils.jsx b/mailpoet/assets/js/src/newsletters/listings/utils.jsx
index a155583d5a..14a0787912 100644
--- a/mailpoet/assets/js/src/newsletters/listings/utils.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/utils.jsx
@@ -1,10 +1,10 @@
 import ReactDOM from 'react-dom';
 import { Link } from 'react-router-dom';
 import ReactStringReplace from 'react-string-replace';
-import Hooks from 'wp-js-hooks';
-import MailPoet from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
 import jQuery from 'jquery';
-import confirmAlert from 'common/confirm_alert.jsx';
+import { confirmAlert } from 'common/confirm_alert.jsx';
 
 export const trackStatsCTAClicked = () => {
   MailPoet.trackEvent('User has clicked a CTA to view detailed stats');
diff --git a/mailpoet/assets/js/src/newsletters/listings/welcome.jsx b/mailpoet/assets/js/src/newsletters/listings/welcome.jsx
index 87d2c954bb..0d514fb3b5 100644
--- a/mailpoet/assets/js/src/newsletters/listings/welcome.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/welcome.jsx
@@ -1,24 +1,24 @@
+import _ from 'underscore';
+import classnames from 'classnames';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
-import ReactStringReplace from 'react-string-replace';
 
-import Toggle from 'common/form/toggle/toggle';
-import Tag from 'common/tag/tag';
+import ReactStringReplace from 'react-string-replace';
+import { Toggle } from 'common/form/toggle/toggle';
+import { Tag } from 'common/tag/tag';
 import { ScheduledIcon } from 'common/listings/newsletter_status';
-import Listing from 'listing/listing.jsx';
-import Statistics from 'newsletters/listings/statistics.jsx';
+import { Listing } from 'listing/listing.jsx';
+import { Statistics } from 'newsletters/listings/statistics.jsx';
 import {
   addStatsCTAAction,
   checkCronStatus,
   checkMailerStatus,
   confirmEdit,
 } from 'newsletters/listings/utils.jsx';
-import NewsletterTypes from 'newsletters/types';
 
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
-import _ from 'underscore';
+import { NewsletterTypes } from 'newsletters/types';
+import { MailPoet } from 'mailpoet';
 
 const mailpoetRoles = window.mailpoet_roles || {};
 const mailpoetSegments = window.mailpoet_segments || {};
@@ -165,7 +165,7 @@ let newsletterActions = [
 ];
 newsletterActions = addStatsCTAAction(newsletterActions);
 
-class NewsletterListWelcome extends Component {
+class NewsletterListWelcomeComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -344,7 +344,7 @@ class NewsletterListWelcome extends Component {
   };
 
   renderItem = (newsletter, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -440,11 +440,11 @@ class NewsletterListWelcome extends Component {
   }
 }
 
-NewsletterListWelcome.propTypes = {
+NewsletterListWelcomeComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withRouter(NewsletterListWelcome);
+export const NewsletterListWelcome = withRouter(NewsletterListWelcomeComponent);
diff --git a/mailpoet/assets/js/src/newsletters/newsletters.jsx b/mailpoet/assets/js/src/newsletters/newsletters.jsx
index 8358565e66..26bb1efa2f 100644
--- a/mailpoet/assets/js/src/newsletters/newsletters.jsx
+++ b/mailpoet/assets/js/src/newsletters/newsletters.jsx
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import ReactDOM from 'react-dom';
 import {
   HashRouter,
@@ -6,39 +7,38 @@ import {
   Redirect,
   useParams,
 } from 'react-router-dom';
-import MailPoet from 'mailpoet';
-import _ from 'underscore';
-
-import NewsletterTypes from 'newsletters/types';
-import NewsletterTemplates from 'newsletters/templates.jsx';
-import NewsletterSend from 'newsletters/send.jsx';
-import NewsletterCongratulate from 'newsletters/send/congratulate/congratulate.jsx';
-import NewsletterTypeStandard from 'newsletters/types/standard.jsx';
-import NewsletterTypeNotification from 'newsletters/types/notification/notification.jsx';
-import NewsletterTypeWelcome from 'newsletters/types/welcome/welcome.jsx';
-import { NewsletterTypeReEngagement } from 'newsletters/types/re_engagement/re_engagement';
-import AutomaticEmailEventsList from 'newsletters/types/automatic_emails/events_list.jsx';
-import EventsConditions from 'newsletters/automatic_emails/events_conditions.jsx';
-import NewsletterListStandard from 'newsletters/listings/standard.jsx';
-import NewsletterListWelcome from 'newsletters/listings/welcome.jsx';
-import NewsletterListNotification from 'newsletters/listings/notification.jsx';
-import NewsletterListReEngagement from 'newsletters/listings/re_engagement.jsx';
-import NewsletterListNotificationHistory from 'newsletters/listings/notification_history.jsx';
-import NewsletterSendingStatus from 'newsletters/sending_status.jsx';
-import Listings from 'newsletters/automatic_emails/listings.jsx';
-import CampaignStatsPage from 'newsletters/campaign_stats/page';
-import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import RoutedTabs from 'common/tabs/routed_tabs';
-import Tab from 'common/tabs/tab';
-import withNpsPoll from 'nps_poll.jsx';
-import ListingHeading from 'newsletters/listings/heading.jsx';
-import ListingHeadingDisplay from 'newsletters/listings/heading_display.jsx';
-import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
-import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
-import TransactionalEmailsProposeOptInNotice from 'notices/transactional_emails_propose_opt_in_notice';
 import PropTypes from 'prop-types';
-import EmailVolumeLimitNotice from 'notices/email_volume_limit_notice';
+
+import { Listings } from 'newsletters/automatic_emails/listings.jsx';
+import { MailPoet } from 'mailpoet';
+import { NewsletterTypes } from 'newsletters/types';
+import { NewsletterTemplates } from 'newsletters/templates.jsx';
+import { NewsletterSend } from 'newsletters/send.jsx';
+import { Congratulate } from 'newsletters/send/congratulate/congratulate.jsx';
+import { NewsletterTypeStandard } from 'newsletters/types/standard.jsx';
+import { NewsletterNotification } from 'newsletters/types/notification/notification.jsx';
+import { NewsletterWelcome } from 'newsletters/types/welcome/welcome.jsx';
+import { NewsletterTypeReEngagement } from 'newsletters/types/re_engagement/re_engagement';
+import { AutomaticEmailEventsList } from 'newsletters/types/automatic_emails/events_list.jsx';
+import { EventsConditions } from 'newsletters/automatic_emails/events_conditions.jsx';
+import { NewsletterListStandard } from 'newsletters/listings/standard.jsx';
+import { NewsletterListWelcome } from 'newsletters/listings/welcome.jsx';
+import { NewsletterListNotification } from 'newsletters/listings/notification.jsx';
+import { NewsletterListReEngagement } from 'newsletters/listings/re_engagement.jsx';
+import { NewsletterListNotificationHistory } from 'newsletters/listings/notification_history.jsx';
+import { SendingStatus } from 'newsletters/sending_status.jsx';
+import { CampaignStatsPage } from 'newsletters/campaign_stats/page';
+import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import { Notices } from 'notices/notices.jsx';
+import { RoutedTabs } from 'common/tabs/routed_tabs';
+import { Tab } from 'common/tabs/tab';
+import { withNpsPoll } from 'nps_poll.jsx';
+import { ListingHeading } from 'newsletters/listings/heading.jsx';
+import { ListingHeadingDisplay } from 'newsletters/listings/heading_display.jsx';
+import { SubscribersLimitNotice } from 'notices/subscribers_limit_notice.jsx';
+import { InvalidMssKeyNotice } from 'notices/invalid_mss_key_notice';
+import { TransactionalEmailsProposeOptInNotice } from 'notices/transactional_emails_propose_opt_in_notice';
+import { EmailVolumeLimitNotice } from 'notices/email_volume_limit_notice';
 
 const automaticEmails = window.mailpoet_woocommerce_automatic_emails || [];
 
@@ -184,11 +184,11 @@ const routes = [
   },
   {
     path: '/new/notification',
-    component: NewsletterTypeNotification,
+    component: NewsletterNotification,
   },
   {
     path: '/new/welcome',
-    component: NewsletterTypeWelcome,
+    component: NewsletterWelcome,
   },
   {
     path: '/new/re-engagement',
@@ -208,7 +208,7 @@ const routes = [
   /* congratulate */
   {
     path: '/send/congratulate/:id',
-    component: NewsletterCongratulate,
+    component: Congratulate,
   },
   /* Sending options */
   {
@@ -217,7 +217,7 @@ const routes = [
   },
   {
     path: '/sending-status/:id/(.*)?',
-    component: NewsletterSendingStatus,
+    component: SendingStatus,
   },
   {
     path: '/stats/:id/(.*)?',
diff --git a/mailpoet/assets/js/src/newsletters/scheduling/common.jsx b/mailpoet/assets/js/src/newsletters/scheduling/common.jsx
index 79e0cc0f9d..67a2d26803 100644
--- a/mailpoet/assets/js/src/newsletters/scheduling/common.jsx
+++ b/mailpoet/assets/js/src/newsletters/scheduling/common.jsx
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 const timeFormat = window.mailpoet_time_format || 'H:i';
 
diff --git a/mailpoet/assets/js/src/newsletters/send.jsx b/mailpoet/assets/js/src/newsletters/send.jsx
index 8bc4fed2b1..6736ced6a3 100644
--- a/mailpoet/assets/js/src/newsletters/send.jsx
+++ b/mailpoet/assets/js/src/newsletters/send.jsx
@@ -1,23 +1,25 @@
-import { Component } from 'react';
-import MailPoet from 'mailpoet';
 import _ from 'underscore';
-import ListingHeadingStepsRoute from 'newsletters/listings/heading_steps_route';
-import { Button } from 'common';
-import Form from 'form/form.jsx';
-import StandardNewsletterFields from 'newsletters/send/standard';
-import NotificationNewsletterFields from 'newsletters/send/notification.jsx';
-import WelcomeNewsletterFields from 'newsletters/send/welcome.jsx';
-import AutomaticEmailFields from 'newsletters/send/automatic.jsx';
-import { ReEngagementNewsletterFields } from 'newsletters/send/re_engagement';
-import HelpTooltip from 'help-tooltip.jsx';
+import { Component } from 'react';
 import jQuery from 'jquery';
-import Background from 'common/background/background';
-import { Grid } from 'common/grid';
-import { fromUrl } from 'common/thumbnail.ts';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 import ReactStringReplace from 'react-string-replace';
 import slugify from 'slugify';
+import { withRouter } from 'react-router-dom';
+
+import { Background } from 'common/background/background';
+import { Button } from 'common';
+import { Form } from 'form/form.jsx';
+import { Grid } from 'common/grid';
+import { ListingHeadingStepsRoute } from 'newsletters/listings/heading_steps_route';
+import { MailPoet } from 'mailpoet';
+import { StandardNewsletterFields } from 'newsletters/send/standard';
+import { NotificationNewsletterFields } from 'newsletters/send/notification.jsx';
+import { WelcomeNewsletterFields } from 'newsletters/send/welcome.jsx';
+import { AutomaticEmailFields } from 'newsletters/send/automatic.jsx';
+import { ReEngagementNewsletterFields } from 'newsletters/send/re_engagement';
+import { Tooltip } from 'help-tooltip.jsx';
+import { fromUrl } from 'common/thumbnail.ts';
+
 import { GlobalContext } from 'context/index.jsx';
 
 const automaticEmails = window.mailpoet_woocommerce_automatic_emails || [];
@@ -97,7 +99,7 @@ function validateNewsletter(newsletter) {
   return undefined;
 }
 
-class NewsletterSend extends Component {
+class NewsletterSendComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -640,7 +642,7 @@ class NewsletterSend extends Component {
               </Button>
             )}
             {this.state.validationError !== undefined && (
-              <HelpTooltip
+              <Tooltip
                 tooltip={<div>{this.state.validationError}</div>}
                 tooltipId="helpTooltipSendEmail"
               />
@@ -682,9 +684,9 @@ class NewsletterSend extends Component {
   }
 }
 
-NewsletterSend.contextType = GlobalContext;
+NewsletterSendComponent.contextType = GlobalContext;
 
-NewsletterSend.propTypes = {
+NewsletterSendComponent.propTypes = {
   match: PropTypes.shape({
     params: PropTypes.shape({
       id: PropTypes.string,
@@ -695,4 +697,4 @@ NewsletterSend.propTypes = {
   }).isRequired,
 };
 
-export default withRouter(NewsletterSend);
+export const NewsletterSend = withRouter(NewsletterSendComponent);
diff --git a/mailpoet/assets/js/src/newsletters/send/automatic.jsx b/mailpoet/assets/js/src/newsletters/send/automatic.jsx
index b8a42f9c37..bd1b8fb008 100644
--- a/mailpoet/assets/js/src/newsletters/send/automatic.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/automatic.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
-import SendEventConditions from 'newsletters/automatic_emails/send_event_conditions.jsx';
-import GATrackingField from 'newsletters/send/ga_tracking';
+import { MailPoet } from 'mailpoet';
+import { SendEventConditions } from 'newsletters/automatic_emails/send_event_conditions.jsx';
+import { GATrackingField } from 'newsletters/send/ga_tracking';
 
 const emails = window.mailpoet_woocommerce_automatic_emails || [];
 
@@ -112,7 +112,7 @@ const getAutomaticEmailFields = (newsletter) => {
   return fields;
 };
 
-export default {
+export const AutomaticEmailFields = {
   getFields: function getFields(newsletter) {
     return getAutomaticEmailFields(newsletter);
   },
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx
index 82b0bf506d..f763e484ae 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx
@@ -1,11 +1,11 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import moment from 'moment';
 
-import Success from './success.jsx';
-import Fail from './fail.jsx';
-import Loading from './loading.jsx';
+import { Success } from './success.jsx';
+import { Fail } from './fail.jsx';
+import { Loading } from './loading.jsx';
 
 const SECONDS_WAITING_FOR_SUCCESS = 20;
 const SECONDS_MINIMUIM_LOADING_SCREEN_DISPLAYED = 6;
@@ -187,4 +187,4 @@ Congratulate.propTypes = {
   }).isRequired,
 };
 
-export default Congratulate;
+export { Congratulate };
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx
index 58b69c178e..d6ed8c94d9 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import ReactStringReplace from 'react-string-replace';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 import { Button } from 'common';
-import Heading from 'common/typography/heading/heading';
+import { Heading } from 'common/typography/heading/heading';
 
 function Fail(props) {
   const [isClosing, setIsClosing] = useState(false);
@@ -57,4 +57,4 @@ Fail.propTypes = {
   failClicked: PropTypes.func.isRequired,
 };
 
-export default Fail;
+export { Fail };
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx
index 4fc03cc94c..d2824147a2 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Loader from 'common/loader/loader';
-import Heading from 'common/typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { Loader } from 'common/loader/loader';
+import { Heading } from 'common/typography/heading/heading';
 
 function Loading(props) {
   return (
@@ -27,4 +27,4 @@ Loading.propTypes = {
   showRichLoadingScreen: PropTypes.bool.isRequired,
 };
 
-export default Loading;
+export { Loading };
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/success.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/success.jsx
index 640c995520..d00fe4e124 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/success.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/success.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
-import MSSUserSuccess from './success_for_mss_users.jsx';
-import PitchMss from './success_pitch_mss.tsx';
+import { MSSUserSuccess } from './success_for_mss_users.jsx';
+import { PitchMss } from './success_pitch_mss.tsx';
 
 function Success(props) {
   if (!window.has_mss_key_specified) {
@@ -36,4 +36,4 @@ Success.propTypes = {
   purchaseUrl: PropTypes.string.isRequired,
 };
 
-export default Success;
+export { Success };
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx
index 27616c6054..769795546d 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Heading from 'common/typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { Heading } from 'common/typography/heading/heading';
 import { Button } from 'common';
 
 function getSuccessMessage(newsletter) {
@@ -56,4 +56,4 @@ MSSUserSuccess.propTypes = {
   }).isRequired,
 };
 
-export default MSSUserSuccess;
+export { MSSUserSuccess };
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx b/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx
index 1248da45bc..a3f6213281 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-import Heading from 'common/typography/heading/heading';
-import WelcomeWizardStepLayoutBody from '../../../wizard/layout/step_layout_body.jsx';
+import { Heading } from 'common/typography/heading/heading';
+import { WelcomeWizardStepLayoutBody } from '../../../wizard/layout/step_layout_body.jsx';
 import {
-  FreeBenefitsList,
   Controls,
+  FreeBenefitsList,
 } from '../../../wizard/steps/pitch_mss_step.jsx';
 
 type Props = {
@@ -33,7 +33,7 @@ function getHeader(newsletterType: string): string {
   );
 }
 
-function PitchMss(props: Props): JSX.Element {
+export function PitchMss(props: Props): JSX.Element {
   const [isClosing, setIsClosing] = useState(false);
   return (
     <>
@@ -70,5 +70,3 @@ function PitchMss(props: Props): JSX.Element {
     </>
   );
 }
-
-export default PitchMss;
diff --git a/mailpoet/assets/js/src/newsletters/send/date_text.jsx b/mailpoet/assets/js/src/newsletters/send/date_text.jsx
index 00988e7182..d650851f3a 100644
--- a/mailpoet/assets/js/src/newsletters/send/date_text.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/date_text.jsx
@@ -1,12 +1,12 @@
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import Datepicker from 'common/datepicker/datepicker.tsx';
-
 import { registerLocale } from 'react-datepicker';
 import locale from 'date-fns/locale/en-US';
 import buildLocalizeFn from 'date-fns/locale/_lib/buildLocalizeFn';
 
+import { Datepicker } from 'common/datepicker/datepicker.tsx';
+import { MailPoet } from 'mailpoet';
+
 const monthValues = {
   abbreviated: [
     MailPoet.I18n.t('januaryShort'),
@@ -157,4 +157,4 @@ DateText.defaultProps = {
   maxDate: null,
 };
 
-export default DateText;
+export { DateText };
diff --git a/mailpoet/assets/js/src/newsletters/send/date_time.jsx b/mailpoet/assets/js/src/newsletters/send/date_time.jsx
index d7d21fa057..b17f4fc38b 100644
--- a/mailpoet/assets/js/src/newsletters/send/date_time.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/date_time.jsx
@@ -2,8 +2,8 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { Grid } from 'common/grid';
-import DateText from 'newsletters/send/date_text.jsx';
-import TimeSelect from 'newsletters/send/time_select.jsx';
+import { DateText } from 'newsletters/send/date_text.jsx';
+import { TimeSelect } from 'newsletters/send/time_select.jsx';
 
 class DateTime extends Component {
   DATE_TIME_SEPARATOR = ' ';
@@ -104,4 +104,4 @@ DateTime.defaultProps = {
   maxDate: null,
 };
 
-export default DateTime;
+export { DateTime };
diff --git a/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx b/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx
index 24d1636b3c..1b18f1e49e 100644
--- a/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 import { Field } from '../../form/types';
 
@@ -28,11 +28,10 @@ const tip = ReactStringReplace(
   ),
 );
 
-const field: Field = {
+export const GATrackingField: Field = {
   name: 'ga_campaign',
   label: MailPoet.I18n.t('gaCampaignLine'),
   tip,
   type: 'text',
   onBeforeChange: trackCampaignNameTyped,
 };
-export default field;
diff --git a/mailpoet/assets/js/src/newsletters/send/notification.jsx b/mailpoet/assets/js/src/newsletters/send/notification.jsx
index c4f36dd142..1ca557a83a 100644
--- a/mailpoet/assets/js/src/newsletters/send/notification.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/notification.jsx
@@ -1,9 +1,9 @@
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
-import Hooks from 'wp-js-hooks';
-import Scheduling from 'newsletters/types/notification/scheduling.jsx';
-import SenderField from 'newsletters/send/sender_address_field.jsx';
-import GATrackingField from 'newsletters/send/ga_tracking';
+import { MailPoet } from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
+import { NotificationScheduling } from 'newsletters/types/notification/scheduling.jsx';
+import { SenderField } from 'newsletters/send/sender_address_field.jsx';
+import { GATrackingField } from 'newsletters/send/ga_tracking';
 
 let fields = [
   {
@@ -45,7 +45,7 @@ let fields = [
     name: 'options',
     label: MailPoet.I18n.t('selectFrequency'),
     type: 'reactComponent',
-    component: Scheduling,
+    component: NotificationScheduling,
   },
   {
     name: 'segments',
@@ -130,7 +130,7 @@ let fields = [
 
 fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
 
-export default {
+export const NotificationNewsletterFields = {
   getFields: function getFields() {
     return fields;
   },
diff --git a/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx b/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx
index b6afc145d3..7bd3ce6690 100644
--- a/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx
@@ -1,9 +1,9 @@
 import { assoc, find, map } from 'lodash/fp';
 
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { Scheduling } from '../types/re_engagement/scheduling';
-import GATrackingField from './ga_tracking';
-import SenderField from './sender_address_field';
+import { GATrackingField } from './ga_tracking';
+import { SenderField } from './sender_address_field';
 
 interface OnValueChangeParam {
   target: {
diff --git a/mailpoet/assets/js/src/newsletters/send/sender_address_field.jsx b/mailpoet/assets/js/src/newsletters/send/sender_address_field.jsx
index ff2d9cc6ea..d205933601 100644
--- a/mailpoet/assets/js/src/newsletters/send/sender_address_field.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/sender_address_field.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import FormFieldText from 'form/fields/text.jsx';
 import PropTypes from 'prop-types';
-import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
+import { FormFieldText } from 'form/fields/text.jsx';
+import { SenderEmailAddressWarning } from 'common/sender_email_address_warning.jsx';
 
 class SenderField extends Component {
   constructor(props) {
@@ -60,4 +60,4 @@ SenderField.defaultProps = {
   },
 };
 
-export default SenderField;
+export { SenderField };
diff --git a/mailpoet/assets/js/src/newsletters/send/standard.tsx b/mailpoet/assets/js/src/newsletters/send/standard.tsx
index 427273dd29..e06016fcc5 100644
--- a/mailpoet/assets/js/src/newsletters/send/standard.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/standard.tsx
@@ -1,12 +1,12 @@
 import { ChangeEvent, Component } from 'react';
-import MailPoet from 'mailpoet';
-import Hooks from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
 import Moment from 'moment';
 
-import DateTime from 'newsletters/send/date_time.jsx';
-import SenderField from 'newsletters/send/sender_address_field.jsx';
-import GATrackingField from 'newsletters/send/ga_tracking';
-import Toggle from 'common/form/toggle/toggle';
+import { DateTime } from 'newsletters/send/date_time.jsx';
+import { SenderField } from 'newsletters/send/sender_address_field.jsx';
+import { GATrackingField } from 'newsletters/send/ga_tracking';
+import { Toggle } from 'common/form/toggle/toggle';
 import { NewsLetter, NewsletterStatus } from '../models';
 import { Field } from '../../form/types';
 
@@ -245,7 +245,7 @@ type SendButtonOptions = {
   disabled?: 'disabled';
 };
 
-export default {
+export const StandardNewsletterFields = {
   getFields: (): typeof fields => fields,
   getSendButtonOptions: (
     newsletter: Partial<NewsLetter> = {},
diff --git a/mailpoet/assets/js/src/newsletters/send/time_select.jsx b/mailpoet/assets/js/src/newsletters/send/time_select.jsx
index b6574e67fd..cf85bb25c0 100644
--- a/mailpoet/assets/js/src/newsletters/send/time_select.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/time_select.jsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import Select from 'common/form/select/select.tsx';
+import { Select } from 'common/form/select/select.tsx';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class TimeSelect extends Component {
@@ -41,4 +41,4 @@ TimeSelect.defaultProps = {
   validation: {},
 };
 
-export default TimeSelect;
+export { TimeSelect };
diff --git a/mailpoet/assets/js/src/newsletters/send/welcome.jsx b/mailpoet/assets/js/src/newsletters/send/welcome.jsx
index e0fab6da86..33e580eea3 100644
--- a/mailpoet/assets/js/src/newsletters/send/welcome.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/welcome.jsx
@@ -1,8 +1,8 @@
-import MailPoet from 'mailpoet';
-import Hooks from 'wp-js-hooks';
-import Scheduling from 'newsletters/types/welcome/scheduling.jsx';
-import SenderField from 'newsletters/send/sender_address_field.jsx';
-import GATrackingField from 'newsletters/send/ga_tracking';
+import { MailPoet } from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
+import { WelcomeScheduling } from 'newsletters/types/welcome/scheduling.jsx';
+import { SenderField } from 'newsletters/send/sender_address_field.jsx';
+import { GATrackingField } from 'newsletters/send/ga_tracking';
 
 let fields = [
   {
@@ -44,7 +44,7 @@ let fields = [
     name: 'options',
     label: MailPoet.I18n.t('selectEventToSendWelcomeEmail'),
     type: 'reactComponent',
-    component: Scheduling,
+    component: WelcomeScheduling,
   },
   GATrackingField,
   {
@@ -101,7 +101,7 @@ let fields = [
 
 fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
 
-export default {
+export const WelcomeNewsletterFields = {
   getFields: function getFields() {
     return fields;
   },
diff --git a/mailpoet/assets/js/src/newsletters/sending_status.jsx b/mailpoet/assets/js/src/newsletters/sending_status.jsx
index e852d04dec..c1878077e5 100644
--- a/mailpoet/assets/js/src/newsletters/sending_status.jsx
+++ b/mailpoet/assets/js/src/newsletters/sending_status.jsx
@@ -1,13 +1,14 @@
+import classnames from 'classnames';
 import { useState, useEffect, memo } from 'react';
-import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+
 import { Link } from 'react-router-dom';
-import Listing from 'listing/listing.jsx';
+import { Listing } from 'listing/listing.jsx';
 import {
   checkCronStatus,
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
+import { MailPoet } from 'mailpoet';
 
 const columns = [
   {
@@ -66,6 +67,7 @@ function SendingStatus(props) {
     </>
   );
 }
+
 SendingStatus.propTypes = {
   location: PropTypes.shape({
     pathname: PropTypes.string,
@@ -127,6 +129,7 @@ function StatsLink({ newsletter }) {
     </p>
   );
 }
+
 StatsLink.propTypes = {
   newsletter: PropTypes.shape({
     id: PropTypes.string,
@@ -163,7 +166,7 @@ function ListingItem({
       .fail((res) => MailPoet.Notice.showApiErrorNotice(res));
   };
 
-  const rowClasses = classNames(
+  const rowClasses = classnames(
     'manage-column',
     'column-primary',
     'has-row-actions',
@@ -224,6 +227,7 @@ function ListingItem({
     </>
   );
 }
+
 ListingItem.propTypes = {
   error: PropTypes.string,
   email: PropTypes.string.isRequired,
@@ -238,4 +242,4 @@ ListingItem.defaultProps = {
   error: '',
 };
 
-export default SendingStatus;
+export { SendingStatus };
diff --git a/mailpoet/assets/js/src/newsletters/templates.jsx b/mailpoet/assets/js/src/newsletters/templates.jsx
index fb1fabd66e..6d43f24b3a 100644
--- a/mailpoet/assets/js/src/newsletters/templates.jsx
+++ b/mailpoet/assets/js/src/newsletters/templates.jsx
@@ -1,14 +1,15 @@
-import { Component } from 'react';
-import MailPoet from 'mailpoet';
-import ListingHeadingStepsRoute from 'newsletters/listings/heading_steps_route';
-import Loading from 'common/loading.jsx';
-import Background from 'common/background/background';
-import Categories from 'common/categories/categories';
-import TemplateBox from 'newsletters/templates/template_box.jsx';
-import ImportTemplate from 'newsletters/templates/import_template.jsx';
 import _ from 'underscore';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
+
+import { Background } from 'common/background/background';
+import { Categories } from 'common/categories/categories';
 import { GlobalContext } from 'context/index.jsx';
+import { ListingHeadingStepsRoute } from 'newsletters/listings/heading_steps_route';
+import { Loading } from 'common/loading.jsx';
+import { MailPoet } from 'mailpoet';
+import { TemplateBox } from 'newsletters/templates/template_box.jsx';
+import { ImportTemplate } from 'newsletters/templates/import_template.jsx';
 
 const getEditorUrl = (id) =>
   `admin.php?page=mailpoet-newsletter-editor&id=${id}`;
@@ -342,4 +343,4 @@ NewsletterTemplates.propTypes = {
   }).isRequired,
 };
 
-export default NewsletterTemplates;
+export { NewsletterTemplates };
diff --git a/mailpoet/assets/js/src/newsletters/templates/import_template.jsx b/mailpoet/assets/js/src/newsletters/templates/import_template.jsx
index 778466c7e8..ef0e095d7d 100644
--- a/mailpoet/assets/js/src/newsletters/templates/import_template.jsx
+++ b/mailpoet/assets/js/src/newsletters/templates/import_template.jsx
@@ -1,6 +1,6 @@
 import { createRef, Component } from 'react';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import HelpTooltip from 'help-tooltip.jsx';
 import PropTypes from 'prop-types';
 import { GlobalContext } from 'context/index.jsx';
@@ -126,4 +126,4 @@ ImportTemplate.propTypes = {
   afterImport: PropTypes.func.isRequired,
 };
 
-export default ImportTemplate;
+export { ImportTemplate };
diff --git a/mailpoet/assets/js/src/newsletters/templates/template_box.jsx b/mailpoet/assets/js/src/newsletters/templates/template_box.jsx
index 06bd0cc4ee..46c0719f32 100644
--- a/mailpoet/assets/js/src/newsletters/templates/template_box.jsx
+++ b/mailpoet/assets/js/src/newsletters/templates/template_box.jsx
@@ -1,10 +1,10 @@
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 
-import Button from 'common/button/button';
-import TemplateBoxWrap from 'common/template_box/template_box';
-import confirmAlert from 'common/confirm_alert.jsx';
+import { Button } from 'common/button/button';
+import { TemplateBox as TemplateBoxWrap } from 'common/template_box/template_box';
+import { confirmAlert } from 'common/confirm_alert.jsx';
 import { GlobalContext } from 'context/index.jsx';
 
 /**
@@ -161,4 +161,4 @@ TemplateBox.defaultProps = {
   thumbnail: null,
 };
 
-export default TemplateBox;
+export { TemplateBox };
diff --git a/mailpoet/assets/js/src/newsletters/types.tsx b/mailpoet/assets/js/src/newsletters/types.tsx
index df52e86d14..b635435719 100644
--- a/mailpoet/assets/js/src/newsletters/types.tsx
+++ b/mailpoet/assets/js/src/newsletters/types.tsx
@@ -1,16 +1,16 @@
-import { Fragment, ComponentType, useState } from 'react';
-import MailPoet from 'mailpoet';
-import Hooks from 'wp-js-hooks';
+import { ComponentType, Fragment, useState } from 'react';
+import { MailPoet } from 'mailpoet';
+import { Hooks } from 'wp-js-hooks';
 import _ from 'underscore';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import AutomaticEmailEventsList from 'newsletters/types/automatic_emails/events_list.jsx';
-import AutomaticEmailEventGroupLogos from 'newsletters/types/automatic_emails/event_group_logos.jsx';
-import Button from 'common/button/button';
-import Heading from 'common/typography/heading/heading';
-import ModalCloseIcon from 'common/modal/close_icon';
-import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
-import APIErrorsNotice from '../notices/api_errors_notice';
+import { AutomaticEmailEventsList } from 'newsletters/types/automatic_emails/events_list.jsx';
+import { AutomaticEmailEventGroupLogos } from 'newsletters/types/automatic_emails/event_group_logos.jsx';
+import { Button } from 'common/button/button';
+import { Heading } from 'common/typography/heading/heading';
+import { modalCloseIcon } from 'common/modal/close_icon';
+import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options';
+import { APIErrorsNotice } from '../notices/api_errors_notice';
 import { isErrorResponse } from '../ajax';
 
 interface Props {
@@ -29,7 +29,7 @@ interface NewsletterTypesWindow extends Window {
 
 declare let window: NewsletterTypesWindow;
 
-function NewsletterTypes({
+function NewsletterTypesComponent({
   filter,
   history,
   hideClosingButton = false,
@@ -347,7 +347,7 @@ function NewsletterTypes({
               onClick={(): void => history.push('/')}
               className="mailpoet-modal-close"
             >
-              {ModalCloseIcon}
+              {modalCloseIcon}
             </button>
           </div>
         )}
@@ -362,12 +362,12 @@ function NewsletterTypes({
   );
 }
 
-NewsletterTypes.defaultProps = {
+NewsletterTypesComponent.defaultProps = {
   filter: null,
   hideScreenOptions: true,
   hideClosingButton: false,
 };
 
-export default withRouter(
-  NewsletterTypes as ComponentType<RouteComponentProps>,
+export const NewsletterTypes = withRouter(
+  NewsletterTypesComponent as ComponentType<RouteComponentProps>,
 );
diff --git a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx
index 6b7d321e3a..659066ee69 100644
--- a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx
@@ -1,10 +1,10 @@
 import { PureComponent } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
-import Badge from 'common/badge/badge';
-import Button from 'common/button/button';
-import Heading from 'common/typography/heading/heading';
+import { Badge } from 'common/badge/badge';
+import { Button } from 'common/button/button';
+import { Heading } from 'common/typography/heading/heading';
 
 class AutomaticEmailEvent extends PureComponent {
   render() {
@@ -92,4 +92,4 @@ AutomaticEmailEvent.propTypes = {
   }).isRequired,
 };
 
-export default AutomaticEmailEvent;
+export { AutomaticEmailEvent };
diff --git a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx
index ea318287ff..881f7c43df 100644
--- a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx
@@ -1,4 +1,4 @@
-const AutomaticEmailEventGroupLogos = {
+export const AutomaticEmailEventGroupLogos = {
   woocommerce: (
     <svg
       version="1.1"
@@ -32,5 +32,3 @@ const AutomaticEmailEventGroupLogos = {
     </svg>
   ),
 };
-
-export default AutomaticEmailEventGroupLogos;
diff --git a/mailpoet/assets/js/src/newsletters/types/automatic_emails/events_list.jsx b/mailpoet/assets/js/src/newsletters/types/automatic_emails/events_list.jsx
index 10e1920190..43addbc883 100644
--- a/mailpoet/assets/js/src/newsletters/types/automatic_emails/events_list.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/automatic_emails/events_list.jsx
@@ -1,11 +1,12 @@
-import { Component } from 'react';
-import AutomaticEmailEvent from 'newsletters/types/automatic_emails/event.jsx';
-import MailPoet from 'mailpoet';
 import _ from 'underscore';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
-class AutomaticEmailEventsList extends Component {
+import { AutomaticEmailEvent } from 'newsletters/types/automatic_emails/event.jsx';
+import { MailPoet } from 'mailpoet';
+
+class AutomaticEmailEventsListComponent extends Component {
   constructor(props) {
     super(props);
     this.email = this.props.email;
@@ -34,7 +35,7 @@ class AutomaticEmailEventsList extends Component {
   }
 }
 
-AutomaticEmailEventsList.propTypes = {
+AutomaticEmailEventsListComponent.propTypes = {
   email: PropTypes.shape({
     title: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
@@ -45,4 +46,6 @@ AutomaticEmailEventsList.propTypes = {
   }).isRequired,
 };
 
-export default withRouter(AutomaticEmailEventsList);
+export const AutomaticEmailEventsList = withRouter(
+  AutomaticEmailEventsListComponent,
+);
diff --git a/mailpoet/assets/js/src/newsletters/types/notification/notification.jsx b/mailpoet/assets/js/src/newsletters/types/notification/notification.jsx
index c65f3a733b..3a65952e2e 100644
--- a/mailpoet/assets/js/src/newsletters/types/notification/notification.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/notification/notification.jsx
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
-import ListingHeadingStepsRoute from 'newsletters/listings/heading_steps_route';
+import { MailPoet } from 'mailpoet';
+import { ListingHeadingStepsRoute } from 'newsletters/listings/heading_steps_route';
 import _ from 'underscore';
-import Scheduling from 'newsletters/types/notification/scheduling.jsx';
-import Background from 'common/background/background';
-import Button from 'common/button/button';
-import Heading from 'common/typography/heading/heading';
+import { NotificationScheduling } from 'newsletters/types/notification/scheduling.jsx';
+import { Background } from 'common/background/background';
+import { Button } from 'common/button/button';
+import { Heading } from 'common/typography/heading/heading';
 import { Grid } from 'common/grid';
 import { withRouter } from 'react-router-dom';
 import { GlobalContext } from 'context/index.jsx';
@@ -14,10 +14,10 @@ import { GlobalContext } from 'context/index.jsx';
 const field = {
   name: 'options',
   type: 'reactComponent',
-  component: Scheduling,
+  component: NotificationScheduling,
 };
 
-class NewsletterNotification extends Component {
+class NewsletterNotificationComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -79,7 +79,7 @@ class NewsletterNotification extends Component {
         <Grid.Column align="center" className="mailpoet-schedule-email">
           <Heading level={4}>{MailPoet.I18n.t('selectFrequency')}</Heading>
 
-          <Scheduling
+          <NotificationScheduling
             item={this.state}
             field={field}
             onValueChange={this.handleValueChange}
@@ -94,12 +94,14 @@ class NewsletterNotification extends Component {
   }
 }
 
-NewsletterNotification.contextType = GlobalContext;
+NewsletterNotificationComponent.contextType = GlobalContext;
 
-NewsletterNotification.propTypes = {
+NewsletterNotificationComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }).isRequired,
 };
 
-export default withRouter(NewsletterNotification);
+export const NewsletterNotification = withRouter(
+  NewsletterNotificationComponent,
+);
diff --git a/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx b/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx
index 8a9278c8eb..129c35ac53 100644
--- a/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import Select from 'form/fields/select.jsx';
+import { FormFieldSelect as Select } from 'form/fields/select.jsx';
 import {
   intervalValues,
   timeOfDayValues,
@@ -154,4 +154,4 @@ NotificationScheduling.propTypes = {
   onValueChange: PropTypes.func.isRequired,
 };
 
-export default NotificationScheduling;
+export { NotificationScheduling };
diff --git a/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx b/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx
index 8f70956a56..5a27f84ae7 100644
--- a/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx
+++ b/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx
@@ -2,14 +2,14 @@ import { useState } from 'react';
 import { __, assoc, compose } from 'lodash/fp';
 import { useHistory } from 'react-router-dom';
 
-import MailPoet from 'mailpoet';
-import Background from 'common/background/background';
+import { MailPoet } from 'mailpoet';
+import { Background } from 'common/background/background';
 import { Grid } from 'common/grid';
-import Button from 'common/button/button';
-import APIErrorsNotice from 'notices/api_errors_notice';
+import { Button } from 'common/button/button';
+import { APIErrorsNotice } from 'notices/api_errors_notice';
 
 import { Scheduling } from './scheduling';
-import ListingHeadingStepsRoute from '../../listings/heading_steps_route';
+import { ListingHeadingStepsRoute } from '../../listings/heading_steps_route';
 
 export function NewsletterTypeReEngagement(): JSX.Element {
   let defaultAfterTime = '';
diff --git a/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx b/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx
index cf7bc6ace3..789a5cb961 100644
--- a/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx
+++ b/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx
@@ -1,9 +1,9 @@
 import ReactStringReplace from 'react-string-replace';
 
-import MailPoet from 'mailpoet';
-import Heading from 'common/typography/heading/heading';
-import Input from 'common/form/input/input';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Heading } from 'common/typography/heading/heading';
+import { Input } from 'common/form/input/input';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
 import { onChange } from 'common/functions';
 
diff --git a/mailpoet/assets/js/src/newsletters/types/standard.jsx b/mailpoet/assets/js/src/newsletters/types/standard.jsx
index a8057e9e52..1afb74f253 100644
--- a/mailpoet/assets/js/src/newsletters/types/standard.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/standard.jsx
@@ -1,11 +1,12 @@
-import PropTypes from 'prop-types';
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
-import ListingHeadingStepsRoute from 'newsletters/listings/heading_steps_route';
+import PropTypes from 'prop-types';
+
+import { ListingHeadingStepsRoute } from 'newsletters/listings/heading_steps_route';
+import { MailPoet } from 'mailpoet';
 import { withRouter } from 'react-router-dom';
 import { GlobalContext } from 'context/index.jsx';
 
-class NewsletterStandard extends Component {
+class NewsletterStandardComponent extends Component {
   componentDidMount() {
     // No options for this type, create a newsletter upon mounting
     MailPoet.Ajax.post({
@@ -47,12 +48,12 @@ class NewsletterStandard extends Component {
   }
 }
 
-NewsletterStandard.contextType = GlobalContext;
+NewsletterStandardComponent.contextType = GlobalContext;
 
-NewsletterStandard.propTypes = {
+NewsletterStandardComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }).isRequired,
 };
 
-export default withRouter(NewsletterStandard);
+export const NewsletterTypeStandard = withRouter(NewsletterStandardComponent);
diff --git a/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx b/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx
index eb69ee588d..b0d9a2063f 100644
--- a/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx
@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import { Component } from 'react';
-import MailPoet from 'mailpoet';
-import Select from 'form/fields/select.jsx';
-import Selection from 'form/fields/selection.jsx';
-import Text from 'form/fields/text.jsx';
+import { MailPoet } from 'mailpoet';
+import { FormFieldSelect as Select } from 'form/fields/select.jsx';
+import { Selection } from 'form/fields/selection.jsx';
+import { FormFieldText } from 'form/fields/text.jsx';
 import { timeDelayValues } from 'newsletters/scheduling/common.jsx';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
@@ -54,7 +54,7 @@ const afterTimeTypeField = {
   values: timeDelayValues,
 };
 
-class WelcomeScheduling extends Component {
+class WelcomeSchedulingComponent extends Component {
   getCurrentValue = () => this.props.item[this.props.field.name] || {};
 
   handleValueChange = (name, value) => {
@@ -115,7 +115,7 @@ class WelcomeScheduling extends Component {
     }
     if (value.afterTimeType !== 'immediate') {
       timeNumber = (
-        <Text
+        <FormFieldText
           field={afterTimeNumberField}
           item={this.getCurrentValue()}
           onValueChange={this.handleAfterTimeNumberChange}
@@ -150,7 +150,7 @@ class WelcomeScheduling extends Component {
   }
 }
 
-WelcomeScheduling.propTypes = {
+WelcomeSchedulingComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }).isRequired,
@@ -161,4 +161,4 @@ WelcomeScheduling.propTypes = {
   onValueChange: PropTypes.func.isRequired,
 };
 
-export default withRouter(WelcomeScheduling);
+export const WelcomeScheduling = withRouter(WelcomeSchedulingComponent);
diff --git a/mailpoet/assets/js/src/newsletters/types/welcome/welcome.jsx b/mailpoet/assets/js/src/newsletters/types/welcome/welcome.jsx
index c285f37cb8..99906ae709 100644
--- a/mailpoet/assets/js/src/newsletters/types/welcome/welcome.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/welcome/welcome.jsx
@@ -1,14 +1,14 @@
 import { Component } from 'react';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
-import PropTypes from 'prop-types';
-import Background from 'common/background/background';
-import Button from 'common/button/button';
-import Heading from 'common/typography/heading/heading';
-import { Grid } from 'common/grid';
-import ListingHeadingStepsRoute from 'newsletters/listings/heading_steps_route';
 import jQuery from 'jquery';
-import WelcomeScheduling from './scheduling.jsx';
+import PropTypes from 'prop-types';
+import { Background } from 'common/background/background';
+import { Button } from 'common/button/button';
+import { Heading } from 'common/typography/heading/heading';
+import { Grid } from 'common/grid';
+import { ListingHeadingStepsRoute } from 'newsletters/listings/heading_steps_route';
+import { MailPoet } from 'mailpoet';
+import { WelcomeScheduling } from './scheduling.jsx';
 
 const field = {
   name: 'options',
@@ -123,4 +123,4 @@ NewsletterWelcome.propTypes = {
   }).isRequired,
 };
 
-export default NewsletterWelcome;
+export { NewsletterWelcome };
diff --git a/mailpoet/assets/js/src/notices/api_errors_notice.tsx b/mailpoet/assets/js/src/notices/api_errors_notice.tsx
index 82fd515781..45a994456b 100644
--- a/mailpoet/assets/js/src/notices/api_errors_notice.tsx
+++ b/mailpoet/assets/js/src/notices/api_errors_notice.tsx
@@ -1,10 +1,10 @@
-import Notice from 'notices/notice';
+import { Notice } from 'notices/notice';
 
 type Props = {
   errors: Array<{ message: string }>;
 };
 
-function APIErrorsNotice({ errors }: Props) {
+export function APIErrorsNotice({ errors }: Props) {
   if (errors.length < 1) return null;
   return (
     <Notice type="error" closable={false}>
@@ -14,5 +14,3 @@ function APIErrorsNotice({ errors }: Props) {
     </Notice>
   );
 }
-
-export default APIErrorsNotice;
diff --git a/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx b/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx
index 9998be3a0d..79fb91e541 100644
--- a/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx
+++ b/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx
@@ -1,9 +1,9 @@
 import ReactStringReplace from 'react-string-replace';
 import ReactHtmlParser from 'react-html-parser';
-import MailPoet from 'mailpoet';
-import Notice from 'notices/notice';
+import { MailPoet } from 'mailpoet';
+import { Notice } from 'notices/notice';
 
-function EmailVolumeLimitNotice(): JSX.Element {
+export function EmailVolumeLimitNotice(): JSX.Element {
   if (!MailPoet.emailVolumeLimitReached) return null;
 
   const title = MailPoet.I18n.t('emailVolumeLimitNoticeTitle').replace(
@@ -72,5 +72,3 @@ function EmailVolumeLimitNotice(): JSX.Element {
     </Notice>
   );
 }
-
-export default EmailVolumeLimitNotice;
diff --git a/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx b/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx
index 8773585059..8ed0dfd8c4 100644
--- a/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx
+++ b/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx
@@ -1,5 +1,5 @@
-import Notice from 'notices/notice';
-import MailPoet from 'mailpoet';
+import { Notice } from 'notices/notice';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 
 type Props = {
@@ -7,7 +7,10 @@ type Props = {
   subscribersCount: number;
 };
 
-function InvalidMssKeyNotice({ mssKeyInvalid, subscribersCount }: Props) {
+export function InvalidMssKeyNotice({
+  mssKeyInvalid,
+  subscribersCount,
+}: Props) {
   if (!mssKeyInvalid) return null;
   return (
     <Notice type="error" timeout={false} closable={false} renderInPlace>
@@ -36,5 +39,3 @@ function InvalidMssKeyNotice({ mssKeyInvalid, subscribersCount }: Props) {
     </Notice>
   );
 }
-
-export default InvalidMssKeyNotice;
diff --git a/mailpoet/assets/js/src/notices/mailer_status_notice.jsx b/mailpoet/assets/js/src/notices/mailer_status_notice.jsx
index 8cbae017f4..ed8f1816f2 100644
--- a/mailpoet/assets/js/src/notices/mailer_status_notice.jsx
+++ b/mailpoet/assets/js/src/notices/mailer_status_notice.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import Notice from 'notices/notice.tsx';
+import { Notice } from 'notices/notice.tsx';
 
 function MailerStatusNotice({ error }) {
   if (!error || error.operation !== 'authorization') return null;
@@ -19,4 +19,4 @@ MailerStatusNotice.defaultProps = {
   error: null,
 };
 
-export default MailerStatusNotice;
+export { MailerStatusNotice };
diff --git a/mailpoet/assets/js/src/notices/notice.tsx b/mailpoet/assets/js/src/notices/notice.tsx
index 14e0018ba4..7e309f8ee9 100644
--- a/mailpoet/assets/js/src/notices/notice.tsx
+++ b/mailpoet/assets/js/src/notices/notice.tsx
@@ -7,7 +7,7 @@ import {
   ReactNode,
 } from 'react';
 import ReactDOM from 'react-dom';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 type Props = {
   type: 'success' | 'info' | 'warning' | 'error';
@@ -92,4 +92,4 @@ Notice.defaultProps = {
   onClose: undefined,
 };
 
-export default Notice;
+export { Notice };
diff --git a/mailpoet/assets/js/src/notices/notices.jsx b/mailpoet/assets/js/src/notices/notices.jsx
index f12a8267b9..3fc329fd8f 100644
--- a/mailpoet/assets/js/src/notices/notices.jsx
+++ b/mailpoet/assets/js/src/notices/notices.jsx
@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { GlobalContext } from 'context/index.jsx';
-import Notice from './notice.tsx';
+import { Notice } from './notice.tsx';
 
-export default () => {
+export const Notices = () => {
   const { notices } = useContext(GlobalContext);
   return notices.items.map(({ id, ...props }) => (
     <Notice key={id} {...props} />
diff --git a/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx b/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx
index 0e3b879cd9..730e7336b4 100644
--- a/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx
+++ b/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx
@@ -1,8 +1,8 @@
 import ReactStringReplace from 'react-string-replace';
-import MailPoet from 'mailpoet';
-import Notice from 'notices/notice.tsx';
+import { MailPoet } from 'mailpoet';
+import { Notice } from 'notices/notice.tsx';
 
-function SubscribersLimitNotice() {
+export function SubscribersLimitNotice() {
   if (!MailPoet.subscribersLimitReached) return null;
   const hasValidApiKey = MailPoet.hasValidApiKey;
   const title = MailPoet.I18n.t('subscribersLimitNoticeTitle').replace(
@@ -73,5 +73,3 @@ function SubscribersLimitNotice() {
     </Notice>
   );
 }
-
-export default SubscribersLimitNotice;
diff --git a/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx b/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx
index ecb55508b7..c7163968a4 100644
--- a/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx
+++ b/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import Notice from 'notices/notice';
-import MailPoet from 'mailpoet';
+import { Notice } from 'notices/notice';
+import { MailPoet } from 'mailpoet';
 
 type Props = {
   mailpoetInstalledDaysAgo: number;
@@ -10,7 +10,7 @@ type Props = {
   apiVersion: string;
 };
 
-function TransactionalEmailsProposeOptInNotice({
+export function TransactionalEmailsProposeOptInNotice({
   mailpoetInstalledDaysAgo,
   sendTransactionalEmails,
   mtaMethod,
@@ -68,5 +68,3 @@ function TransactionalEmailsProposeOptInNotice({
     </Notice>
   );
 }
-
-export default TransactionalEmailsProposeOptInNotice;
diff --git a/mailpoet/assets/js/src/nps_poll.jsx b/mailpoet/assets/js/src/nps_poll.jsx
index 34fe4b580c..6f1ef462a7 100644
--- a/mailpoet/assets/js/src/nps_poll.jsx
+++ b/mailpoet/assets/js/src/nps_poll.jsx
@@ -1,9 +1,9 @@
 import { useLayoutEffect } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactDOMServer from 'react-dom/server';
 import satismeter from 'satismeter-loader';
-import ReviewRequest from 'review_request.jsx';
-import getTrackingData from 'analytics.js';
+import { ReviewRequest } from 'review_request.jsx';
+import { getTrackingData } from 'analytics.js';
 
 const useNpsPoll = () => {
   useLayoutEffect(() => {
@@ -76,10 +76,8 @@ const useNpsPoll = () => {
   return null;
 };
 
-const withNpsPoll = (Component) =>
+export const withNpsPoll = (Component) =>
   function useNpsPollWithComponent(props) {
     useNpsPoll();
     return <Component {...props} />;
   };
-
-export default withNpsPoll;
diff --git a/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx b/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx
index 30fc9e4692..eafc51b0ab 100644
--- a/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx
+++ b/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope */
 import PropTypes from 'prop-types';
-import Icon from './icon.jsx';
+import { Icon } from './icon.jsx';
 
 const wp = window.wp;
 const { Placeholder, PanelBody } = wp.components;
@@ -92,4 +92,4 @@ Edit.propTypes = {
   setAttributes: PropTypes.func.isRequired,
 };
 
-export default Edit;
+export { Edit };
diff --git a/mailpoet/assets/js/src/post_editor_block/subscription_form/form_block.jsx b/mailpoet/assets/js/src/post_editor_block/subscription_form/form_block.jsx
index f0f33085fc..80c69f1464 100644
--- a/mailpoet/assets/js/src/post_editor_block/subscription_form/form_block.jsx
+++ b/mailpoet/assets/js/src/post_editor_block/subscription_form/form_block.jsx
@@ -1,5 +1,5 @@
-import Icon from './icon.jsx';
-import Edit from './edit.jsx';
+import { Icon } from './icon.jsx';
+import { Edit } from './edit.jsx';
 
 const wp = window.wp;
 const { registerBlockType } = wp.blocks;
diff --git a/mailpoet/assets/js/src/post_editor_block/subscription_form/icon.jsx b/mailpoet/assets/js/src/post_editor_block/subscription_form/icon.jsx
index 4676001a62..60c72ce106 100644
--- a/mailpoet/assets/js/src/post_editor_block/subscription_form/icon.jsx
+++ b/mailpoet/assets/js/src/post_editor_block/subscription_form/icon.jsx
@@ -2,7 +2,7 @@
 const wp = window.wp;
 const { G, Path, SVG } = wp.components;
 
-export default (
+export const Icon = (
   <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.02 156.4">
     <G>
       <Path d="M37.71,89.1c3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V35.7l17,45.1a12.68,12.68,0,0,0,3.7,5.4c1.6,1.3,4,2,7.2,2a12.54,12.54,0,0,0,5.9-1.4,8.41,8.41,0,0,0,3.9-5l18.1-50V81a8.53,8.53,0,0,0,2.1,6.1c1.4,1.4,3.7,2.2,6.9,2.2,3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V8.7a7.48,7.48,0,0,0-3.3-6.6c-2.1-1.4-5-2.1-8.6-2.1a19.3,19.3,0,0,0-9.4,2,11.63,11.63,0,0,0-5.1,6.8L74.91,67.1,54.41,8.4a12.4,12.4,0,0,0-4.5-6.2c-2.1-1.5-5-2.2-8.8-2.2a16.51,16.51,0,0,0-8.9,2.1c-2.3,1.5-3.5,3.9-3.5,7.2V80.8c0,2.8.7,4.8,2,6.2C32.21,88.4,34.41,89.1,37.71,89.1Z" />
diff --git a/mailpoet/assets/js/src/public.jsx b/mailpoet/assets/js/src/public.jsx
index 760bd628e6..bd70e2f54e 100644
--- a/mailpoet/assets/js/src/public.jsx
+++ b/mailpoet/assets/js/src/public.jsx
@@ -1,8 +1,8 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import jQuery from 'jquery';
 import Cookies from 'js-cookie';
 import Parsley from 'parsleyjs';
-import Hooks from 'wp-js-hooks';
+import { Hooks } from 'wp-js-hooks';
 
 const exitIntentEvent = 'mouseleave.mailpoet.form-exit-intent';
 
@@ -62,6 +62,7 @@ jQuery(($) => {
       form.removeClass('mailpoet_form_tight_container');
     }
   }
+
   /**
    * @param  {object} form jQuery object of MailPoet form
    * @return {string} The name of the cookie for the form
diff --git a/mailpoet/assets/js/src/review_request.jsx b/mailpoet/assets/js/src/review_request.jsx
index b45cdac0d0..19bcd0573e 100644
--- a/mailpoet/assets/js/src/review_request.jsx
+++ b/mailpoet/assets/js/src/review_request.jsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 
 function ReviewRequest(props) {
@@ -52,4 +52,4 @@ ReviewRequest.propTypes = {
   username: PropTypes.string.isRequired,
 };
 
-export default ReviewRequest;
+export { ReviewRequest };
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx
index 0662bbdf99..efc81a91a1 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
 
 import { WordpressRoleFormItem } from '../../types';
 
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx
index 77f8655ee0..20af359545 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx
@@ -3,10 +3,10 @@ import { assign, range } from 'lodash/fp';
 import { format, getYear, isValid, parseISO } from 'date-fns';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
-import Datepicker from 'common/datepicker/datepicker';
+import { Datepicker } from 'common/datepicker/datepicker';
 
 import { WordpressRoleFormItem, OnFilterChange } from '../../types';
 
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx
index 0f656fb2dc..11807a3a1e 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx
@@ -1,8 +1,8 @@
 import { find } from 'lodash/fp';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import ReactSelect from 'common/form/react_select/react_select';
+import { MailPoet } from 'mailpoet';
+import { ReactSelect } from 'common/form/react_select/react_select';
 
 import {
   WordpressRoleFormItem,
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx
index c71fb160e3..f016c2eb28 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
-import Input from 'common/form/input/input';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
+import { Input } from 'common/form/input/input';
 import { Grid } from 'common/grid';
 
 import { WordpressRoleFormItem } from '../../types';
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
index 91c75e0645..40b2aa1625 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect } from '@wordpress/data';
 
 import {
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
index 4c9daf889d..083dba6bd7 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { Grid } from 'common/grid';
-import Select from 'common/form/select/select';
-import Input from 'common/form/input/input';
-import MailPoet from 'mailpoet';
+import { Select } from 'common/form/select/select';
+import { Input } from 'common/form/input/input';
+import { MailPoet } from 'mailpoet';
 
 import { EmailFormItem } from '../types';
 
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx
index 2a361dde48..78671445ad 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx
@@ -1,12 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { find, filter } from 'lodash/fp';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import APIErrorsNotice from 'notices/api_errors_notice';
-import ReactSelect from 'common/form/react_select/react_select';
+import { APIErrorsNotice } from 'notices/api_errors_notice';
+import { ReactSelect } from 'common/form/react_select/react_select';
 import { Grid } from 'common/grid';
-import Select from 'common/form/select/select';
+import { Select } from 'common/form/select/select';
 import {
   AnyValueTypes,
   EmailFormItem,
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx
index 360a09c187..8418746139 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { filter, map } from 'lodash/fp';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import ReactSelect from 'common/form/react_select/react_select';
-import Select from 'common/form/select/select';
+import { ReactSelect } from 'common/form/react_select/react_select';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
 import {
   AnyValueTypes,
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
index 40950e9dd1..c323d8e71f 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect } from '@wordpress/data';
 
 import {
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx
index 9a84a39781..b96c9827e0 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx
@@ -1,8 +1,8 @@
 import { find } from 'lodash/fp';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import ReactSelect from 'common/form/react_select/react_select';
+import { MailPoet } from 'mailpoet';
+import { ReactSelect } from 'common/form/react_select/react_select';
 
 import { Text, validateText } from './custom_fields/text';
 import { RadioSelect, validateRadioSelect } from './custom_fields/select';
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx
index fcc95085fc..4b89fb8bc8 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 
 import { WordpressRoleFormItem } from '../types';
 
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx
index ab2bae9ddf..8f90722128 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx
@@ -2,11 +2,11 @@ import { useEffect } from 'react';
 import { isValid, parseISO } from 'date-fns';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
-import Datepicker from 'common/datepicker/datepicker';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
+import { Datepicker } from 'common/datepicker/datepicker';
 import { Grid } from 'common/grid';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 
 import { WordpressRoleFormItem } from '../types';
 
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
index 15ad9ca12e..76506033c1 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
@@ -2,10 +2,10 @@ import { useEffect } from 'react';
 import { map, filter } from 'lodash/fp';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
-import ReactSelect from 'common/form/react_select/react_select';
+import { ReactSelect } from 'common/form/react_select/react_select';
 
 import {
   AnyValueTypes,
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx
index 8fbabd921b..2f235b6aa3 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { filter, map } from 'lodash/fp';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import ReactSelect from 'common/form/react_select/react_select';
-import Select from 'common/form/select/select';
+import { ReactSelect } from 'common/form/react_select/react_select';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
 
 import {
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
index c03f303fcb..4307a98397 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
@@ -1,12 +1,12 @@
 import { FunctionComponent, useEffect } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { filter } from 'lodash/fp';
-import ReactSelect from 'common/form/react_select/react_select';
-import Select from 'common/form/select/select';
+import { ReactSelect } from 'common/form/react_select/react_select';
+import { Select } from 'common/form/select/select';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { Grid } from 'common/grid';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import {
   AnyValueTypes,
   SegmentTypes,
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx
index a9774c4146..312c4df50a 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { filter } from 'lodash/fp';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import ReactSelect from 'common/form/react_select/react_select';
-import Select from 'common/form/select/select';
+import { ReactSelect } from 'common/form/react_select/react_select';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
 
 import {
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx
index 7ee34e5342..9b71757dd9 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { filter } from 'lodash/fp';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import ReactSelect from 'common/form/react_select/react_select';
-import Select from 'common/form/select/select';
+import { ReactSelect } from 'common/form/react_select/react_select';
+import { Select } from 'common/form/select/select';
 import { Grid } from 'common/grid';
 
 import {
diff --git a/mailpoet/assets/js/src/segments/dynamic/editor.tsx b/mailpoet/assets/js/src/segments/dynamic/editor.tsx
index 76c85af6cd..0d6892f6c9 100644
--- a/mailpoet/assets/js/src/segments/dynamic/editor.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/editor.tsx
@@ -1,16 +1,16 @@
 import { useEffect } from 'react';
 import { useDispatch } from '@wordpress/data';
-import { useRouteMatch, Link } from 'react-router-dom';
+import { Link, useRouteMatch } from 'react-router-dom';
 
-import MailPoet from 'mailpoet';
-import Background from 'common/background/background';
-import Heading from 'common/typography/heading/heading';
-import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
+import { MailPoet } from 'mailpoet';
+import { Background } from 'common/background/background';
+import { Heading } from 'common/typography/heading/heading';
+import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options';
 import { Form } from './form';
 
 import { createStore } from './store/store';
 
-function Editor(): JSX.Element {
+export function Editor(): JSX.Element {
   const match = useRouteMatch<{ id: string }>();
 
   createStore();
@@ -40,5 +40,3 @@ function Editor(): JSX.Element {
     </>
   );
 }
-
-export default Editor;
diff --git a/mailpoet/assets/js/src/segments/dynamic/form.tsx b/mailpoet/assets/js/src/segments/dynamic/form.tsx
index a0de79b8f0..a255a7ef58 100644
--- a/mailpoet/assets/js/src/segments/dynamic/form.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/form.tsx
@@ -1,21 +1,21 @@
 import { Fragment, FunctionComponent, useState } from 'react';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-import Hooks from 'wp-js-hooks';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
-import Heading from 'common/typography/heading/heading';
-import Input from 'common/form/input/input';
-import Select from 'common/form/react_select/react_select';
-import Textarea from 'common/form/textarea/textarea';
+import { Hooks } from 'wp-js-hooks';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
+import { Heading } from 'common/typography/heading/heading';
+import { Input } from 'common/form/input/input';
+import { ReactSelect } from 'common/form/react_select/react_select';
+import { Textarea } from 'common/form/textarea/textarea';
 import { Grid } from 'common/grid';
 import { SubscribersCounter } from './subscribers_counter';
 import { FormFilterFields } from './form_filter_fields';
 import { isFormValid } from './validator';
-import plusIcon from '../../common/button/icon/plus';
-import APIErrorsNotice from '../../notices/api_errors_notice';
+import { plusIcon } from '../../common/button/icon/plus';
+import { APIErrorsNotice } from '../../notices/api_errors_notice';
 import { PrivacyProtectionNotice } from './privacy_protection_notice';
-import DynamicSegmentsPremiumBanner from './premium_banner';
+import { DynamicSegmentsPremiumBanner } from './premium_banner';
 
 import {
   FilterRow,
@@ -142,7 +142,7 @@ export function Form({ segmentId }: Props): JSX.Element {
                 >
                   <FilterBefore filterRows={filterRows} index={index} />
                   <Grid.CenteredRow>
-                    <Select
+                    <ReactSelect
                       dimension="small"
                       placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
                       options={segmentFilters}
diff --git a/mailpoet/assets/js/src/segments/dynamic/list.jsx b/mailpoet/assets/js/src/segments/dynamic/list.jsx
index 7e866b4b4c..b97c2bfd98 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list.jsx
+++ b/mailpoet/assets/js/src/segments/dynamic/list.jsx
@@ -1,8 +1,9 @@
 import { Link, withRouter } from 'react-router-dom';
-import MailPoet from 'mailpoet';
-import ReactStringReplace from 'react-string-replace';
-import Listing from 'listing/listing.jsx';
 import PropTypes from 'prop-types';
+import ReactStringReplace from 'react-string-replace';
+
+import { MailPoet } from 'mailpoet';
+import { Listing } from 'listing/listing.jsx';
 
 const columns = [
   {
@@ -183,7 +184,7 @@ function renderItem(item, actions) {
   );
 }
 
-function DynamicSegmentList(props) {
+function DynamicSegmentListComponent(props) {
   return (
     <>
       <Listing
@@ -217,11 +218,11 @@ function DynamicSegmentList(props) {
   );
 }
 
-DynamicSegmentList.propTypes = {
+DynamicSegmentListComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withRouter(DynamicSegmentList);
+export const DynamicSegmentList = withRouter(DynamicSegmentListComponent);
diff --git a/mailpoet/assets/js/src/segments/dynamic/premium_banner.tsx b/mailpoet/assets/js/src/segments/dynamic/premium_banner.tsx
index bd6727a611..282383220d 100644
--- a/mailpoet/assets/js/src/segments/dynamic/premium_banner.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/premium_banner.tsx
@@ -1,10 +1,10 @@
 import { FunctionComponent } from 'react';
-import MailPoet from 'mailpoet';
-import PremiumBannerWithUpgrade from 'common/premium_banner_with_upgrade/premium_banner_with_upgrade';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { PremiumBannerWithUpgrade } from 'common/premium_banner_with_upgrade/premium_banner_with_upgrade';
+import { Button } from 'common/button/button';
 import ReactStringReplace from 'react-string-replace';
 
-function DynamicSegmentsPremiumBanner(): JSX.Element {
+export function DynamicSegmentsPremiumBanner(): JSX.Element {
   const getBannerMessage: FunctionComponent = () => {
     const message = MailPoet.I18n.t('premiumFeatureMultipleConditions');
     return (
@@ -45,5 +45,3 @@ function DynamicSegmentsPremiumBanner(): JSX.Element {
     />
   );
 }
-
-export default DynamicSegmentsPremiumBanner;
diff --git a/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx b/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
index b7ab80e694..879d7707b8 100644
--- a/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect } from '@wordpress/data';
 
 import { EmailActionTypes, Segment } from './types';
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/actions.ts b/mailpoet/assets/js/src/segments/dynamic/store/actions.ts
index 35a5e9501a..8b5116d260 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/actions.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/actions.ts
@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { select } from '@wordpress/data';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 import {
   Actions,
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts b/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts
index 2b56a2bba3..6b3e3a312f 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 import { GroupFilterValue } from '../types';
 import { EmailSegmentOptions } from '../dynamic_segments_filters/email';
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/controls.ts b/mailpoet/assets/js/src/segments/dynamic/store/controls.ts
index 9e1a98e62b..485d6b26ea 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/controls.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/controls.ts
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { assign, has } from 'lodash/fp';
 
 import { AnyFormItem } from '../types';
diff --git a/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts b/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts
index 101fb423f0..7ac45138ab 100644
--- a/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import _ from 'lodash';
 
 import { AnyFormItem, Segment, SegmentConnectTypes } from './types';
diff --git a/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx b/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx
index 8cb1012f8a..f1f3536cf6 100644
--- a/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { debounce } from 'lodash';
 import { isFormValid } from './validator';
diff --git a/mailpoet/assets/js/src/segments/form.jsx b/mailpoet/assets/js/src/segments/form.jsx
index 07975f807e..7190152d9a 100644
--- a/mailpoet/assets/js/src/segments/form.jsx
+++ b/mailpoet/assets/js/src/segments/form.jsx
@@ -1,11 +1,11 @@
 import { Link } from 'react-router-dom';
-import MailPoet from 'mailpoet';
-import Form from 'form/form.jsx';
 import PropTypes from 'prop-types';
-import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
-import Background from 'common/background/background';
-import Heading from 'common/typography/heading/heading';
-import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
+import { Background } from 'common/background/background';
+import { Form } from 'form/form.jsx';
+import { Heading } from 'common/typography/heading/heading';
+import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options';
+import { SubscribersLimitNotice } from 'notices/subscribers_limit_notice.jsx';
+import { MailPoet } from 'mailpoet';
 
 const fields = [
   {
@@ -67,4 +67,4 @@ SegmentForm.propTypes = {
   }).isRequired,
 };
 
-export default SegmentForm;
+export { SegmentForm };
diff --git a/mailpoet/assets/js/src/segments/heading.jsx b/mailpoet/assets/js/src/segments/heading.jsx
index 4417d1fcb3..1f0be6379e 100644
--- a/mailpoet/assets/js/src/segments/heading.jsx
+++ b/mailpoet/assets/js/src/segments/heading.jsx
@@ -1,11 +1,11 @@
 import { Link } from 'react-router-dom';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
-import plusIcon from 'common/button/icon/plus';
-import SubscribersInPlan from 'common/subscribers_in_plan';
-import SubscribersLimitNotice from 'notices/subscribers_limit_notice';
-import EmailVolumeLimitNotice from 'notices/email_volume_limit_notice';
-import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
+import { plusIcon } from 'common/button/icon/plus';
+import { SubscribersInPlan } from 'common/subscribers_in_plan';
+import { SubscribersLimitNotice } from 'notices/subscribers_limit_notice';
+import { EmailVolumeLimitNotice } from 'notices/email_volume_limit_notice';
+import { InvalidMssKeyNotice } from 'notices/invalid_mss_key_notice';
 import { SubscribersCacheMessage } from 'common/subscribers_cache_message';
 
 function ListHeading() {
@@ -45,4 +45,4 @@ function ListHeading() {
   );
 }
 
-export default ListHeading;
+export { ListHeading };
diff --git a/mailpoet/assets/js/src/segments/list.jsx b/mailpoet/assets/js/src/segments/list.jsx
index 9f541787ad..e4d4bf1919 100644
--- a/mailpoet/assets/js/src/segments/list.jsx
+++ b/mailpoet/assets/js/src/segments/list.jsx
@@ -1,10 +1,10 @@
 import { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
-import MailPoet from 'mailpoet';
-import classNames from 'classnames';
+import { MailPoet } from 'mailpoet';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-import Listing from 'listing/listing.jsx';
+import { Listing } from 'listing/listing.jsx';
 import { ListingsEngagementScore } from '../subscribers/listings_engagement_score';
 
 const isWPUsersSegment = (segment) => segment.type === 'wp_users';
@@ -245,9 +245,9 @@ const itemActions = [
   },
 ];
 
-class SegmentList extends Component {
+class SegmentListComponent extends Component {
   renderItem = (segment, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -367,11 +367,11 @@ class SegmentList extends Component {
   }
 }
 
-SegmentList.propTypes = {
+SegmentListComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   match: PropTypes.shape({
     params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   }).isRequired,
 };
 
-export default withRouter(SegmentList);
+export const SegmentList = withRouter(SegmentListComponent);
diff --git a/mailpoet/assets/js/src/segments/segments.jsx b/mailpoet/assets/js/src/segments/segments.jsx
index 84b021105f..563cf8ce54 100644
--- a/mailpoet/assets/js/src/segments/segments.jsx
+++ b/mailpoet/assets/js/src/segments/segments.jsx
@@ -1,16 +1,16 @@
 import ReactDOM from 'react-dom';
-import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
+import { HashRouter, Redirect, Route, Switch } from 'react-router-dom';
 
-import MailPoet from 'mailpoet';
-import RoutedTabs from 'common/tabs/routed_tabs';
-import Tab from 'common/tabs/tab';
-import SegmentList from 'segments/list.jsx';
-import SegmentForm from 'segments/form.jsx';
+import { MailPoet } from 'mailpoet';
+import { RoutedTabs } from 'common/tabs/routed_tabs';
+import { Tab } from 'common/tabs/tab';
+import { SegmentList } from 'segments/list.jsx';
+import { SegmentForm } from 'segments/form.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import Editor from './dynamic/editor';
-import DynamicSegmentList from './dynamic/list.jsx';
-import ListHeading from './heading';
+import { Notices } from 'notices/notices.jsx';
+import { Editor } from './dynamic/editor';
+import { DynamicSegmentList } from './dynamic/list.jsx';
+import { ListHeading } from './heading';
 
 const container = document.getElementById('segments_container');
 
diff --git a/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx b/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx
index 0f3de4fe71..c8ac92f812 100644
--- a/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx
+++ b/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx
@@ -1,9 +1,9 @@
 import jQuery from 'jquery';
 import { useState } from 'react';
 import ReactDOM from 'react-dom';
-import SetFromAddressModal from 'common/set_from_address_modal';
+import { SetFromAddressModal } from 'common/set_from_address_modal';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
+import { Notices } from 'notices/notices.jsx';
 import { noop } from 'lodash';
 
 type Props = {
diff --git a/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts b/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts
index db071b76e9..1108436d85 100644
--- a/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts
+++ b/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts
@@ -1,5 +1,5 @@
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 const loadAuthorizedEmailAddresses = async () => {
   if (MailPoet.mtaMethod !== 'MailPoet') {
diff --git a/mailpoet/assets/js/src/settings/components/index.ts b/mailpoet/assets/js/src/settings/components/index.ts
index 3ce434b829..23d288c813 100644
--- a/mailpoet/assets/js/src/settings/components/index.ts
+++ b/mailpoet/assets/js/src/settings/components/index.ts
@@ -1,5 +1,5 @@
-export { default as Label } from './label';
-export { default as Inputs } from './inputs';
-export { default as SaveButton } from './save_button';
-export { default as SegmentsSelect } from './segments_select';
-export { default as PagesSelect } from './pages_select';
+export * from './label';
+export * from './inputs';
+export * from './save_button';
+export * from './segments_select';
+export * from './pages_select';
diff --git a/mailpoet/assets/js/src/settings/components/inputs.tsx b/mailpoet/assets/js/src/settings/components/inputs.tsx
index 56fbc6588e..2d44c701a8 100644
--- a/mailpoet/assets/js/src/settings/components/inputs.tsx
+++ b/mailpoet/assets/js/src/settings/components/inputs.tsx
@@ -4,6 +4,6 @@ type Props = {
   children: ReactNode;
 };
 
-export default function Inputs({ children }: Props) {
+export function Inputs({ children }: Props) {
   return <div className="mailpoet-settings-inputs">{children}</div>;
 }
diff --git a/mailpoet/assets/js/src/settings/components/label.tsx b/mailpoet/assets/js/src/settings/components/label.tsx
index 2243eb9854..bc3f186dbf 100644
--- a/mailpoet/assets/js/src/settings/components/label.tsx
+++ b/mailpoet/assets/js/src/settings/components/label.tsx
@@ -6,7 +6,7 @@ type Props = {
   htmlFor: string;
 };
 
-export default function Label({ title, description, htmlFor }: Props) {
+export function Label({ title, description, htmlFor }: Props) {
   return (
     <div className="mailpoet-settings-label">
       <label className="mailpoet-settings-label-title" htmlFor={htmlFor}>
diff --git a/mailpoet/assets/js/src/settings/components/pages_select.tsx b/mailpoet/assets/js/src/settings/components/pages_select.tsx
index d49ea75b60..8967b0ef4c 100644
--- a/mailpoet/assets/js/src/settings/components/pages_select.tsx
+++ b/mailpoet/assets/js/src/settings/components/pages_select.tsx
@@ -1,6 +1,6 @@
 import { useSelector } from 'settings/store/hooks';
 import { onChange, t } from 'common/functions';
-import Select from 'common/form/select/select';
+import { Select } from 'common/form/select/select';
 
 type Props = {
   id?: string;
@@ -16,7 +16,7 @@ type Props = {
     | 're_engagement';
 };
 
-export default function PageSelect(props: Props) {
+export function PageSelect(props: Props) {
   const pages = useSelector('getPages')();
   let selectedPage = pages.find((x) => x.id === parseInt(props.value, 10));
   if (!selectedPage) selectedPage = pages[0];
diff --git a/mailpoet/assets/js/src/settings/components/save_button.tsx b/mailpoet/assets/js/src/settings/components/save_button.tsx
index 6b0fb28b8f..d070c4e667 100644
--- a/mailpoet/assets/js/src/settings/components/save_button.tsx
+++ b/mailpoet/assets/js/src/settings/components/save_button.tsx
@@ -1,6 +1,6 @@
 import { useState, useContext, useEffect } from 'react';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 import { useAction, useSelector } from 'settings/store/hooks';
 import { GlobalContext } from 'context';
 import ReactStringReplace from 'react-string-replace';
@@ -30,7 +30,7 @@ const showReEngagementNotice = (action, showError, showSuccess) => {
   }
 };
 
-export default function SaveButton() {
+export function SaveButton() {
   const [clicked, setClicked] = useState(false);
   const isSaving = useSelector('isSaving')();
   const hasError = useSelector('hasErrorFlag')();
diff --git a/mailpoet/assets/js/src/settings/components/segments_select.tsx b/mailpoet/assets/js/src/settings/components/segments_select.tsx
index cbaec57281..30f161fb5a 100644
--- a/mailpoet/assets/js/src/settings/components/segments_select.tsx
+++ b/mailpoet/assets/js/src/settings/components/segments_select.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useSelector } from 'settings/store/hooks';
-import ReactSelect from 'common/form/react_select/react_select';
+import { ReactSelect } from 'common/form/react_select/react_select';
 
 type Props = {
   id: string;
@@ -10,7 +10,7 @@ type Props = {
   segmentsSelector?: 'getDefaultSegments' | 'getSegments';
 };
 
-export default function SegmentsSelect(props: Props) {
+export function SegmentsSelect(props: Props) {
   const selector = props.segmentsSelector
     ? props.segmentsSelector
     : 'getDefaultSegments';
diff --git a/mailpoet/assets/js/src/settings/index.tsx b/mailpoet/assets/js/src/settings/index.tsx
index be4fb5d7dd..677b60cfb9 100644
--- a/mailpoet/assets/js/src/settings/index.tsx
+++ b/mailpoet/assets/js/src/settings/index.tsx
@@ -2,7 +2,7 @@ import 'parsleyjs';
 import ReactDOM from 'react-dom';
 import { GlobalContext, useGlobalContextValue } from 'context';
 import { initStore } from './store';
-import Settings from './settings';
+import { Settings } from './settings';
 
 function Entry() {
   return (
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/advanced.tsx b/mailpoet/assets/js/src/settings/pages/advanced/advanced.tsx
index 4d35b62281..47daad6ccb 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/advanced.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/advanced.tsx
@@ -1,18 +1,18 @@
 import { SaveButton } from 'settings/components';
-import TaskScheduler from './task_scheduler';
-import Roles from './roles';
+import { TaskScheduler } from './task_scheduler';
+import { Roles } from './roles';
 import { EngagementTracking } from './engagement_tracking';
-import Transactional from './transactional';
-import InactiveSubscribers from './inactive_subscribers';
-import ShareData from './share_data';
+import { Transactional } from './transactional';
+import { InactiveSubscribers } from './inactive_subscribers';
+import { ShareData } from './share_data';
 import { Libs3rdParty } from './libs_3rd_party';
-import Captcha from './captcha';
-import Reinstall from './reinstall';
+import { Captcha } from './captcha';
+import { Reinstall } from './reinstall';
 import { RecalculateSubscriberScore } from './recalculate_subscriber_score';
-import Logging from './logging';
-import BounceAddress from './bounce_address';
+import { Logging } from './logging';
+import { BounceAddress } from './bounce_address';
 
-export default function Advanced() {
+export function Advanced() {
   return (
     <div className="mailpoet-settings-grid">
       <BounceAddress />
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx b/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx
index 6855b6475b..f88ae85803 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx
@@ -1,9 +1,9 @@
 import { t, onChange, setLowercaseValue } from 'common/functions';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function BounceAddress() {
+export function BounceAddress() {
   const [email, setEmail] = useSetting('bounce', 'address');
 
   return (
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx b/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx
index 2e5f609136..2b2390e4b2 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 
 import { t, onChange } from 'common/functions';
-import Input from 'common/form/input/input';
-import Radio from 'common/form/radio/radio';
+import { Input } from 'common/form/input/input';
+import { Radio } from 'common/form/radio/radio';
 import { useSetting, useSelector, useAction } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function Captcha() {
+export function Captcha() {
   const [type, setType] = useSetting('captcha', 'type');
   const [token, setToken] = useSetting('captcha', 'recaptcha_site_token');
   const [secret, setSecret] = useSetting('captcha', 'recaptcha_secret_token');
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx b/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx
index 1df77ede2b..5f2f893d0d 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { t } from 'common/functions';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx b/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx
index 4284dbc68c..cb95b6f3cc 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx
@@ -1,9 +1,9 @@
 import { t } from 'common/functions';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 import { useSetting } from 'settings/store/hooks';
-import { Label, Inputs } from 'settings/components';
+import { Inputs, Label } from 'settings/components';
 
-export default function InactiveSubscribers() {
+export function InactiveSubscribers() {
   const [duration, setDuration] = useSetting(
     'deactivate_subscriber_after_inactive_days',
   );
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx b/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx
index a6b2865422..129673c046 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx
@@ -1,5 +1,5 @@
 import { t } from 'common/functions';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx b/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx
index 73b7fb3129..daf947f6f3 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx
@@ -1,9 +1,9 @@
 import { t, onChange } from 'common/functions';
-import Select from 'common/form/select/select';
+import { Select } from 'common/form/select/select';
 import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function Logging() {
+export function Logging() {
   const [level, setLevel] = useSetting('logging');
   return (
     <>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx b/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx
index 0df0767707..c76132fab9 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import Button from 'common/button/button';
+import { Button } from 'common/button/button';
 import { t } from 'common/functions';
 import { GlobalContext } from 'context';
 import { useAction } from 'settings/store/hooks';
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx b/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx
index 2cc54e9ae9..8fa69754c8 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx
@@ -1,12 +1,12 @@
 import { useContext } from 'react';
 
-import Button from 'common/button/button';
+import { Button } from 'common/button/button';
 import { t } from 'common/functions';
 import { GlobalContext } from 'context';
 import { useAction } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function Reinstall() {
+export function Reinstall() {
   const reinstall = useAction('reinstall');
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { notices } = useContext<any>(GlobalContext);
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx b/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx
index 4490347363..b3937c2de7 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx
@@ -4,7 +4,7 @@ import { t } from 'common/functions';
 import { useSelector } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function Roles() {
+export function Roles() {
   const isMembersPluginActive = useSelector('hasMembersPlugin')();
   return (
     <>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx b/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx
index b948ab7772..3b2709385d 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx
@@ -1,9 +1,9 @@
 import { t } from 'common/functions';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function ShareData() {
+export function ShareData() {
   const [enabled, setEnabled] = useSetting('analytics', 'enabled');
   const [, set3rdPartyLibsEnabled] = useSetting('3rd_party_libs', 'enabled');
 
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx b/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx
index d3352a6720..bc407a36c9 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx
@@ -1,12 +1,12 @@
 import ReactStringReplace from 'react-string-replace';
 
 import { t } from 'common/functions';
-import Input from 'common/form/input/input';
-import Radio from 'common/form/radio/radio';
+import { Input } from 'common/form/input/input';
+import { Radio } from 'common/form/radio/radio';
 import { useSetting, useSelector } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
-export default function TaskScheduler() {
+export function TaskScheduler() {
   const [method, setMethod] = useSetting('cron_trigger', 'method');
   const paths = useSelector('getPaths')();
 
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx b/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx
index 1e4bedec33..c684fe5b2a 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx
@@ -1,11 +1,11 @@
 import ReactStringReplace from 'react-string-replace';
 
 import { t } from 'common/functions';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 import { Label, Inputs } from 'settings/components';
 import { useSetting, useSelector } from 'settings/store/hooks';
 
-export default function Transactional() {
+export function Transactional() {
   const [provider] = useSetting('smtp_provider');
   const isMssActive = useSelector('isMssActive')();
   const [enabled, setEnabled] = useSetting('send_transactional_emails');
diff --git a/mailpoet/assets/js/src/settings/pages/basics/basics.tsx b/mailpoet/assets/js/src/settings/pages/basics/basics.tsx
index 1cd846b966..d07f738b36 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/basics.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/basics.tsx
@@ -1,16 +1,16 @@
 import { SaveButton } from 'settings/components';
 import { t } from 'common/functions';
-import DefaultSender from './default_sender';
-import SubscribeOn from './subscribe_on';
-import ManageSubscription from './manage_subscription';
-import UnsubscribePage from './unsubscribe_page';
-import StatsNotifications from './stats_notifications';
-import NewSubscriberNotifications from './new_subscriber_notifications';
-import Shortcode from './shortcode';
-import GdprCompliant from './gdpr_compliant';
+import { DefaultSender } from './default_sender';
+import { SubscribeOn } from './subscribe_on';
+import { ManageSubscription } from './manage_subscription';
+import { UnsubscribePage } from './unsubscribe_page';
+import { StatsNotifications } from './stats_notifications';
+import { NewSubscriberNotifications } from './new_subscriber_notifications';
+import { Shortcode } from './shortcode';
+import { GdprCompliant } from './gdpr_compliant';
 import { ReEngagementPage } from './re_engagement_page';
 
-export default function Basics() {
+export function Basics() {
   return (
     <div className="mailpoet-settings-grid">
       <DefaultSender />
diff --git a/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx b/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx
index 2f965a7947..967de3ad9b 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { Label, Inputs } from 'settings/components';
 import { isEmail, t, onChange, setLowercaseValue } from 'common/functions';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import { useSetting, useSelector, useAction } from 'settings/store/hooks';
-import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
+import { SenderEmailAddressWarning } from 'common/sender_email_address_warning.jsx';
 
-export default function DefaultSender() {
+export function DefaultSender() {
   const isMssActive = useSelector('isMssActive')();
   const [senderName, setSenderName] = useSetting('sender', 'name');
   const [senderEmail, setSenderEmail] = useSetting('sender', 'address');
diff --git a/mailpoet/assets/js/src/settings/pages/basics/gdpr_compliant.tsx b/mailpoet/assets/js/src/settings/pages/basics/gdpr_compliant.tsx
index 38a15de960..7ef3426344 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/gdpr_compliant.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/gdpr_compliant.tsx
@@ -1,7 +1,7 @@
 import { t } from 'common/functions';
 import { Label, Inputs } from 'settings/components';
 
-export default function GdprCompliant() {
+export function GdprCompliant() {
   return (
     <>
       <Label
diff --git a/mailpoet/assets/js/src/settings/pages/basics/manage_subscription.tsx b/mailpoet/assets/js/src/settings/pages/basics/manage_subscription.tsx
index 69778e18be..eead8f1924 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/manage_subscription.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/manage_subscription.tsx
@@ -1,14 +1,9 @@
 import ReactStringReplace from 'react-string-replace';
 import { t } from 'common/functions';
 import { useSetting } from 'settings/store/hooks';
-import {
-  Label,
-  Inputs,
-  SegmentsSelect,
-  PagesSelect,
-} from 'settings/components';
+import { Inputs, Label, PageSelect, SegmentsSelect } from 'settings/components';
 
-export default function ManageSubscription() {
+export function ManageSubscription() {
   const [page, setPage] = useSetting('subscription', 'pages', 'manage');
   const [segments, setSegments] = useSetting('subscription', 'segments');
   return (
@@ -39,7 +34,7 @@ export default function ManageSubscription() {
         htmlFor="subscription-manage-page"
       />
       <Inputs>
-        <PagesSelect
+        <PageSelect
           value={page}
           preview="manage"
           setValue={setPage}
diff --git a/mailpoet/assets/js/src/settings/pages/basics/new_subscriber_notifications.tsx b/mailpoet/assets/js/src/settings/pages/basics/new_subscriber_notifications.tsx
index 1fddcf9fb9..7ffae55bc0 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/new_subscriber_notifications.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/new_subscriber_notifications.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { isEmail, t, onChange, setLowercaseValue } from 'common/functions';
-import Input from 'common/form/input/input';
-import Radio from 'common/form/radio/radio';
-import { useSetting, useAction } from 'settings/store/hooks';
-import { Label, Inputs } from 'settings/components';
+import { isEmail, onChange, setLowercaseValue, t } from 'common/functions';
+import { Input } from 'common/form/input/input';
+import { Radio } from 'common/form/radio/radio';
+import { useAction, useSetting } from 'settings/store/hooks';
+import { Inputs, Label } from 'settings/components';
 
-export default function NewSubscriberNotifications() {
+export function NewSubscriberNotifications() {
   const [enabled, setEnabled] = useSetting(
     'subscriber_email_notification',
     'enabled',
diff --git a/mailpoet/assets/js/src/settings/pages/basics/re_engagement_page.tsx b/mailpoet/assets/js/src/settings/pages/basics/re_engagement_page.tsx
index 02f7803394..2ef9f4a5fe 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/re_engagement_page.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/re_engagement_page.tsx
@@ -1,6 +1,6 @@
 import { t } from 'common/functions';
 import { useSetting } from 'settings/store/hooks';
-import { Label, Inputs, PagesSelect } from 'settings/components';
+import { Label, Inputs, PageSelect } from 'settings/components';
 
 export function ReEngagementPage(): JSX.Element {
   const [reEngagementPage, setReEngagementPage] = useSetting(
@@ -16,7 +16,7 @@ export function ReEngagementPage(): JSX.Element {
         htmlFor="re-engagement-page"
       />
       <Inputs>
-        <PagesSelect
+        <PageSelect
           value={reEngagementPage}
           preview="re_engagement"
           setValue={setReEngagementPage}
diff --git a/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx b/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx
index 40232f70e3..28adbb7667 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { t } from 'common/functions';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import { Label, Inputs, SegmentsSelect } from 'settings/components';
 
 type Props = {
@@ -9,7 +9,7 @@ type Props = {
   description: string;
 };
 
-export default function Shortcode({ name, title, description }: Props) {
+export function Shortcode({ name, title, description }: Props) {
   const [segments, setSegments] = useState([]);
   const shortcode = `[${name}${
     segments.length ? ` segments="${segments.join(',')}"` : ''
diff --git a/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx b/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx
index 482872760c..e3039df8eb 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { isEmail, t, onChange, setLowercaseValue } from 'common/functions';
-import Checkbox from 'common/form/checkbox/checkbox';
-import Input from 'common/form/input/input';
-import { useSetting, useAction } from 'settings/store/hooks';
-import { Label, Inputs } from 'settings/components';
+import { isEmail, onChange, setLowercaseValue, t } from 'common/functions';
+import { Checkbox } from 'common/form/checkbox/checkbox';
+import { Input } from 'common/form/input/input';
+import { useAction, useSetting } from 'settings/store/hooks';
+import { Inputs, Label } from 'settings/components';
 
-export default function StatsNotifications() {
+export function StatsNotifications() {
   const [enabled, setEnabled] = useSetting('stats_notifications', 'enabled');
   const [automated, setAutomated] = useSetting(
     'stats_notifications',
diff --git a/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx b/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx
index 418c7f0de5..32b0caaa54 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { t, onChange } from 'common/functions';
-import Checkbox from 'common/form/checkbox/checkbox';
-import Input from 'common/form/input/input';
+import { Checkbox } from 'common/form/checkbox/checkbox';
+import { Input } from 'common/form/input/input';
 import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs, SegmentsSelect } from 'settings/components';
 
@@ -11,7 +11,7 @@ type Props = {
   event: 'on_comment' | 'on_register';
 };
 
-export default function SubscribeOn({ title, description, event }: Props) {
+export function SubscribeOn({ title, description, event }: Props) {
   const [enabled, setEnabled] = useSetting('subscribe', event, 'enabled');
   const [label, setLabel] = useSetting('subscribe', event, 'label');
   const [segments, setSegments] = useSetting('subscribe', event, 'segments');
diff --git a/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx b/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
index 40a877d935..b878d1974a 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
@@ -1,9 +1,9 @@
 import ReactStringReplace from 'react-string-replace';
 import { t } from 'common/functions';
 import { useSetting } from 'settings/store/hooks';
-import { Label, Inputs, PagesSelect } from 'settings/components';
+import { Inputs, Label, PageSelect } from 'settings/components';
 
-export default function UnsubscribePage() {
+export function UnsubscribePage() {
   const [unsubscribePage, setUnsubscribePage] = useSetting(
     'subscription',
     'pages',
@@ -49,7 +49,7 @@ export default function UnsubscribePage() {
         <div className="mailpoet-settings-inputs-row">
           {t('confirmationPageTitle')}:
         </div>
-        <PagesSelect
+        <PageSelect
           value={unsubscribeConfirmationPage}
           preview="confirm_unsubscribe"
           setValue={setUnsubscribeConfirmationPage}
@@ -60,7 +60,7 @@ export default function UnsubscribePage() {
         <div className="mailpoet-settings-inputs-row">
           {t('successPageTitle')}:
         </div>
-        <PagesSelect
+        <PageSelect
           value={unsubscribePage}
           preview="unsubscribe"
           setValue={setUnsubscribePage}
diff --git a/mailpoet/assets/js/src/settings/pages/index.tsx b/mailpoet/assets/js/src/settings/pages/index.tsx
index 7962b07372..01ab7cf829 100644
--- a/mailpoet/assets/js/src/settings/pages/index.tsx
+++ b/mailpoet/assets/js/src/settings/pages/index.tsx
@@ -1,6 +1,6 @@
-export { default as Basics } from './basics/basics';
-export { default as Advanced } from './advanced/advanced';
-export { default as KeyActivation } from './key_activation/key_activation';
-export { default as SendWith } from './send_with/send_with';
-export { default as SignupConfirmation } from './signup_confirmation/signup_confirmation';
-export { default as WooCommerce } from './woo_commerce/woo_commerce';
+export * from './basics/basics';
+export * from './advanced/advanced';
+export * from './key_activation/key_activation';
+export * from './send_with/send_with';
+export * from './signup_confirmation/signup_confirmation';
+export * from './woo_commerce/woo_commerce';
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/key_activation.tsx b/mailpoet/assets/js/src/settings/pages/key_activation/key_activation.tsx
index dd58fba0e5..55ef03d2eb 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/key_activation.tsx
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/key_activation.tsx
@@ -1,13 +1,13 @@
 import { useContext } from 'react';
-import MailPoet from 'mailpoet';
-import { useSelector, useAction, useSetting } from 'settings/store/hooks';
+import { MailPoet } from 'mailpoet';
+import { useAction, useSelector, useSetting } from 'settings/store/hooks';
 import { GlobalContext } from 'context';
-import Button from 'common/button/button';
+import { Button } from 'common/button/button';
 import { t } from 'common/functions';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import { KeyActivationState, MssStatus } from 'settings/store/types';
-import { Label, Inputs } from 'settings/components';
-import SetFromAddressModal from 'common/set_from_address_modal';
+import { Inputs, Label } from 'settings/components';
+import { SetFromAddressModal } from 'common/set_from_address_modal';
 import {
   KeyMessages,
   MssMessages,
@@ -79,7 +79,7 @@ function Messages(
   );
 }
 
-export default function KeyActivation() {
+export function KeyActivation() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { notices } = useContext<any>(GlobalContext);
   const state = useSelector('getKeyActivationState')();
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/messages/index.ts b/mailpoet/assets/js/src/settings/pages/key_activation/messages/index.ts
index b85060f224..79b52f7195 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/messages/index.ts
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/messages/index.ts
@@ -1,4 +1,4 @@
-export { default as KeyMessages } from './key_messages';
-export { default as MssMessages } from './mss_messages';
-export { default as PremiumMessages } from './premium_messages';
-export { default as ServiceUnavailableMessage } from './service_unavailable_messages';
+export * from './key_messages';
+export * from './mss_messages';
+export * from './premium_messages';
+export * from './service_unavailable_messages';
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/messages/key_messages.tsx b/mailpoet/assets/js/src/settings/pages/key_activation/messages/key_messages.tsx
index 10d3c8bb55..1f6ce7a89b 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/messages/key_messages.tsx
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/messages/key_messages.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelector } from 'settings/store/hooks';
 
 function KeyValidMessage() {
@@ -17,7 +17,7 @@ function KeyNotValidMessage() {
   );
 }
 
-export default function KeyMessages() {
+export function KeyMessages() {
   const { isKeyValid } = useSelector('getKeyActivationState')();
   return isKeyValid ? <KeyValidMessage /> : <KeyNotValidMessage />;
 }
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/messages/mss_messages.tsx b/mailpoet/assets/js/src/settings/pages/key_activation/messages/mss_messages.tsx
index 0212518f15..a6b1b8ff3c 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/messages/mss_messages.tsx
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/messages/mss_messages.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelector } from 'settings/store/hooks';
 import { MssStatus } from 'settings/store/types';
 
@@ -42,7 +42,7 @@ type Props = {
   keyMessage?: string;
   activationCallback: () => void;
 };
-export default function MssMessages(props: Props) {
+export function MssMessages(props: Props) {
   const { mssStatus } = useSelector('getKeyActivationState')();
   switch (mssStatus) {
     case MssStatus.VALID_MSS_ACTIVE:
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx b/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx
index 3d02e0eabe..210db2e562 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { useSelector } from 'settings/store/hooks/index';
 import { PremiumStatus } from 'settings/store/types';
-import Button from 'common/button/button';
+import { Button } from 'common/button/button';
 
 function ActiveMessage() {
   return (
@@ -14,6 +14,7 @@ function ActiveMessage() {
 type PremiumNotActiveMessageProps = {
   url?: string;
 };
+
 function PremiumNotActiveMessage(props: PremiumNotActiveMessageProps) {
   return (
     <>
@@ -28,6 +29,7 @@ function PremiumNotActiveMessage(props: PremiumNotActiveMessageProps) {
     </>
   );
 }
+
 function PremiumNotInstalledMessage(props: PremiumNotActiveMessageProps) {
   return (
     <>
@@ -44,6 +46,7 @@ function PremiumNotInstalledMessage(props: PremiumNotActiveMessageProps) {
 }
 
 type NotValidMessageProps = { message?: string };
+
 function NotValidMessage({ message }: NotValidMessageProps) {
   return (
     <div className="mailpoet_error">
@@ -51,6 +54,7 @@ function NotValidMessage({ message }: NotValidMessageProps) {
     </div>
   );
 }
+
 NotValidMessage.defaultProps = {
   message: '',
 };
@@ -58,7 +62,8 @@ NotValidMessage.defaultProps = {
 type Props = {
   keyMessage?: string;
 };
-export default function PremiumMessages(props: Props) {
+
+export function PremiumMessages(props: Props) {
   const {
     premiumStatus: status,
     downloadUrl,
@@ -78,6 +83,7 @@ export default function PremiumMessages(props: Props) {
       return null;
   }
 }
+
 PremiumMessages.defaultProps = {
   keyMessage: '',
 };
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/messages/service_unavailable_messages.tsx b/mailpoet/assets/js/src/settings/pages/key_activation/messages/service_unavailable_messages.tsx
index 8d7b3cd6b9..f613fbd829 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/messages/service_unavailable_messages.tsx
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/messages/service_unavailable_messages.tsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default function ServiceUnavailableMessages() {
+export function ServiceUnavailableMessage() {
   return (
     <div className="mailpoet_error_item mailpoet_error">
       {MailPoet.I18n.t('premiumTabKeyCannotValidate')}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx
index 96fb960158..c77c6e940d 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx
@@ -1,11 +1,11 @@
 import { useHistory } from 'react-router-dom';
 
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 import { t } from 'common/functions';
 import { useAction } from 'settings/store/hooks';
 
-export default function ActivateOrCancel() {
+export function ActivateOrCancel() {
   const saveSettings = useAction('saveSettings');
   const loadSettings = useAction('loadSettings');
   const history = useHistory();
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx
index c2c3bb4dd3..1240db856a 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx
@@ -1,11 +1,11 @@
 import { Label, Inputs } from 'settings/components';
 import { t, onChange } from 'common/functions';
-import Input from 'common/form/input/input';
-import Select from 'common/form/select/select';
+import { Input } from 'common/form/input/input';
+import { Select } from 'common/form/select/select';
 import { useSetting, useSelector } from 'settings/store/hooks';
-import SendingFrequency from './sending_frequency';
+import { SendingFrequency } from './sending_frequency';
 
-export default function AmazonSesFields() {
+export function AmazonSesFields() {
   const [region, setRegion] = useSetting('mta', 'region');
   const [accessKey, setAccessKey] = useSetting('mta', 'access_key');
   const [secretKey, setSecretKey] = useSetting('mta', 'secret_key');
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/other_sending_methods.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/other_sending_methods.tsx
index 607e56da3d..a3f2b6b85f 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/other_sending_methods.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/other_sending_methods.tsx
@@ -1,14 +1,14 @@
 import { useSetting } from 'settings/store/hooks';
-import SendingMethod from './sending_method';
-import SPF from './spf';
-import TestSending from './test_sending';
-import ActivateOrCancel from './activate_or_cancel';
-import PHPMailFields from './php_mail_fields';
-import SmtpFields from './smtp_fields';
-import AmazonSesFields from './amazon_ses_fields';
-import SendGridFields from './sendgrid_fields';
+import { SendingMethod } from './sending_method';
+import { SPF } from './spf';
+import { TestSending } from './test_sending';
+import { ActivateOrCancel } from './activate_or_cancel';
+import { PHPMailFields } from './php_mail_fields';
+import { SmtpFields } from './smtp_fields';
+import { AmazonSesFields } from './amazon_ses_fields';
+import { SendGridFields } from './sendgrid_fields';
 
-export default function OtherSendingMethods() {
+export function OtherSendingMethods() {
   const [method] = useSetting('mta', 'method');
   return (
     <div className="mailpoet-settings-grid">
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx
index 8f28aff61f..3f2d3946cf 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx
@@ -1,10 +1,10 @@
 import { Label, Inputs } from 'settings/components';
 import { t, onChange } from 'common/functions';
-import Select from 'common/form/select/select';
+import { Select } from 'common/form/select/select';
 import { useSetting, useSelector } from 'settings/store/hooks';
-import SendingFrequency from './sending_frequency';
+import { SendingFrequency } from './sending_frequency';
 
-export default function PHPMailFields() {
+export function PHPMailFields() {
   const [hostName, setHostName] = useSetting('web_host');
   const hosts = useSelector('getWebHosts')();
   const host = hosts[hostName];
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx
index 3ea87b10a2..46789c2880 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx
@@ -1,10 +1,10 @@
 import { Label, Inputs } from 'settings/components';
 import { t, onChange } from 'common/functions';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import { useSetting, useSelector } from 'settings/store/hooks';
-import SendingFrequency from './sending_frequency';
+import { SendingFrequency } from './sending_frequency';
 
-export default function SendGridFields() {
+export function SendGridFields() {
   const [apiKey, setApiKey] = useSetting('mta', 'api_key');
   const options = useSelector('getSendGridOptions')();
   return (
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/sending_frequency.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/sending_frequency.tsx
index 47f7c8c3c5..9c29cd89d9 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/sending_frequency.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/sending_frequency.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import ReactStringReplace from 'react-string-replace';
 
-import { Label, Inputs } from 'settings/components';
-import { t, onChange } from 'common/functions';
-import Input from 'common/form/input/input';
-import Select from 'common/form/select/select';
+import { Inputs, Label } from 'settings/components';
+import { onChange, t } from 'common/functions';
+import { Input } from 'common/form/input/input';
+import { Select } from 'common/form/select/select';
 import { useSetting } from 'settings/store/hooks';
 
 const MINUTES_PER_DAY = 1440;
@@ -22,7 +22,8 @@ type Props = {
   recommendedEmails: number;
   recommendedInterval: number;
 };
-export default function SendingFrequency({
+
+export function SendingFrequency({
   recommendedEmails,
   recommendedInterval,
 }: Props) {
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx
index 4be9ea2c02..f2f6f45a98 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { Label, Inputs } from 'settings/components';
 import { t, onChange } from 'common/functions';
-import Select from 'common/form/select/select';
+import { Select } from 'common/form/select/select';
 import { useSetting } from 'settings/store/hooks';
 
-export default function SendingMethod() {
+export function SendingMethod() {
   const [provider, setProvider] = useSetting('smtp_provider');
   const [, setGroup] = useSetting('mta_group');
   const [, setMethod] = useSetting('mta', 'method');
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx
index 80d8143bd2..8d373b656e 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx
@@ -1,12 +1,12 @@
 import { Label, Inputs } from 'settings/components';
 import { t, onChange } from 'common/functions';
-import Input from 'common/form/input/input';
-import Radio from 'common/form/radio/radio';
-import Select from 'common/form/select/select';
+import { Input } from 'common/form/input/input';
+import { Radio } from 'common/form/radio/radio';
+import { Select } from 'common/form/select/select';
 import { useSetting } from 'settings/store/hooks';
-import SendingFrequency from './sending_frequency';
+import { SendingFrequency } from './sending_frequency';
 
-export default function SmtpFields() {
+export function SmtpFields() {
   const [host, setHost] = useSetting('mta', 'host');
   const [port, setPort] = useSetting('mta', 'port');
   const [login, setLogin] = useSetting('mta', 'login');
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx
index cd2da4bf13..9491682384 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx
@@ -1,7 +1,7 @@
 import { t } from 'common/functions';
 import { Label, Inputs } from 'settings/components';
 
-export default function SPF() {
+export function SPF() {
   return (
     <>
       <Label
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx
index 7ca3f91e83..7c65d88154 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import ReactStringReplace from 'react-string-replace';
 
-import HelpTooltip from 'help-tooltip';
-import { t, onChange } from 'common/functions';
-import Button from 'common/button/button';
-import Input from 'common/form/input/input';
-import { Label, Inputs } from 'settings/components';
-import { useSetting, useAction, useSelector } from 'settings/store/hooks';
-import Loading from 'common/loading';
-import Notice from 'notices/notice';
+import { Tooltip } from 'help-tooltip';
+import { onChange, t } from 'common/functions';
+import { Button } from 'common/button/button';
+import { Input } from 'common/form/input/input';
+import { Inputs, Label } from 'settings/components';
+import { useAction, useSelector, useSetting } from 'settings/store/hooks';
+import { Loading } from 'common/loading';
+import { Notice } from 'notices/notice';
 import { TestEmailState } from 'settings/store/types';
 
 interface TestSendingWindow extends Window {
@@ -17,7 +17,7 @@ interface TestSendingWindow extends Window {
 
 declare let window: TestSendingWindow;
 
-export default function TestSending() {
+export function TestSending() {
   const [email, setEmail] = useState<string>(
     window.mailpoet_current_user_email,
   );
@@ -59,7 +59,7 @@ export default function TestSending() {
         >
           {t('sendTestEmail')}
         </Button>
-        <HelpTooltip
+        <Tooltip
           tooltipId="tooltip-settings-test"
           className="mailpoet_tooltip_icon"
           tooltip={
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx b/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx
index a3eef01b71..f3d99128bb 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx
@@ -1,8 +1,8 @@
 import { useParams } from 'react-router-dom';
-import SendWithChoice from './send_with_choice';
-import OtherSendingMethods from './other/other_sending_methods';
+import { SendWithChoice } from './send_with_choice';
+import { OtherSendingMethods } from './other/other_sending_methods';
 
-export default function SendWith() {
+export function SendWith() {
   const { subPage } = useParams<{ subPage: string }>();
   return subPage === 'other' ? <OtherSendingMethods /> : <SendWithChoice />;
 }
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx b/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx
index ba0dff1ad3..8ee7958255 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx
@@ -11,7 +11,7 @@ interface SendWithChoiceWindow extends Window {
 
 declare let window: SendWithChoiceWindow;
 
-export default function SendWithChoice() {
+export function SendWithChoice() {
   const history = useHistory();
   const isMssActive = useSelector('isMssActive')();
   const [key] = useSetting('mta', 'mailpoet_api_key');
diff --git a/mailpoet/assets/js/src/settings/pages/signup_confirmation/confirmation_page.tsx b/mailpoet/assets/js/src/settings/pages/signup_confirmation/confirmation_page.tsx
index 8d0fd4252f..a0bec108ee 100644
--- a/mailpoet/assets/js/src/settings/pages/signup_confirmation/confirmation_page.tsx
+++ b/mailpoet/assets/js/src/settings/pages/signup_confirmation/confirmation_page.tsx
@@ -1,8 +1,8 @@
 import { t } from 'common/functions';
-import { Label, Inputs, PagesSelect } from 'settings/components';
+import { Label, Inputs, PageSelect } from 'settings/components';
 import { useSetting } from 'settings/store/hooks';
 
-export default function ConfirmationPage() {
+export function ConfirmationPage() {
   const [enabled] = useSetting('signup_confirmation', 'enabled');
   const [page, setPage] = useSetting('subscription', 'pages', 'confirmation');
 
@@ -15,7 +15,7 @@ export default function ConfirmationPage() {
         htmlFor="subscription-pages-confirmation"
       />
       <Inputs>
-        <PagesSelect
+        <PageSelect
           value={page}
           preview="confirm"
           setValue={setPage}
diff --git a/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx b/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
index 6d44a8cbaf..6d621e8546 100644
--- a/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
+++ b/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
@@ -1,9 +1,9 @@
 import { t, onChange } from 'common/functions';
-import Textarea from 'common/form/textarea/textarea';
+import { Textarea } from 'common/form/textarea/textarea';
 import { Label, Inputs } from 'settings/components';
 import { useSetting } from 'settings/store/hooks';
 
-export default function EmailContent() {
+export function EmailContent() {
   const [enabled] = useSetting('signup_confirmation', 'enabled');
   const [body, setBody] = useSetting('signup_confirmation', 'body');
 
diff --git a/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_subject.tsx b/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_subject.tsx
index 03431dc59f..f63ea183e7 100644
--- a/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_subject.tsx
+++ b/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_subject.tsx
@@ -1,9 +1,9 @@
 import { t, onChange } from 'common/functions';
-import Input from 'common/form/input/input';
+import { Input } from 'common/form/input/input';
 import { Label, Inputs } from 'settings/components';
 import { useSetting } from 'settings/store/hooks';
 
-export default function EmailSubject() {
+export function EmailSubject() {
   const [enabled] = useSetting('signup_confirmation', 'enabled');
   const [subject, setSubject] = useSetting('signup_confirmation', 'subject');
 
diff --git a/mailpoet/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx b/mailpoet/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx
index 8760a34778..54bda3ec20 100644
--- a/mailpoet/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx
+++ b/mailpoet/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx
@@ -1,9 +1,9 @@
 import { t } from 'common/functions';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 import { Label, Inputs } from 'settings/components';
 import { useSelector, useSetting } from 'settings/store/hooks';
 
-export default function EnableSignupConfirmation() {
+export function EnableSignupConfirmation() {
   const isMssActive = useSelector('isMssActive')();
   const [enabled, setEnabled] = useSetting('signup_confirmation', 'enabled');
   const handleChange = (value: '1' | '') => {
diff --git a/mailpoet/assets/js/src/settings/pages/signup_confirmation/signup_confirmation.tsx b/mailpoet/assets/js/src/settings/pages/signup_confirmation/signup_confirmation.tsx
index 1ffa22ac2d..58e071d163 100644
--- a/mailpoet/assets/js/src/settings/pages/signup_confirmation/signup_confirmation.tsx
+++ b/mailpoet/assets/js/src/settings/pages/signup_confirmation/signup_confirmation.tsx
@@ -1,10 +1,10 @@
 import { SaveButton } from 'settings/components';
-import EnableSignupConfirmation from './enable_signup_confirmation';
-import EmailSubject from './email_subject';
-import EmailContent from './email_content';
-import ConfirmationPage from './confirmation_page';
+import { EnableSignupConfirmation } from './enable_signup_confirmation';
+import { EmailSubject } from './email_subject';
+import { EmailContent } from './email_content';
+import { ConfirmationPage } from './confirmation_page';
 
-export default function SignupConfirmation() {
+export function SignupConfirmation() {
   return (
     <div className="mailpoet-settings-grid">
       <EnableSignupConfirmation />
diff --git a/mailpoet/assets/js/src/settings/pages/woo_commerce/checkout_optin.tsx b/mailpoet/assets/js/src/settings/pages/woo_commerce/checkout_optin.tsx
index 972d426987..ecc6afded2 100644
--- a/mailpoet/assets/js/src/settings/pages/woo_commerce/checkout_optin.tsx
+++ b/mailpoet/assets/js/src/settings/pages/woo_commerce/checkout_optin.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { t, onChange } from 'common/functions';
-import Checkbox from 'common/form/checkbox/checkbox';
-import Input from 'common/form/input/input';
+import { Checkbox } from 'common/form/checkbox/checkbox';
+import { Input } from 'common/form/input/input';
 import { Label, Inputs, SegmentsSelect } from 'settings/components';
 import { useSetting, useAction } from 'settings/store/hooks';
 
-export default function CheckoutOptin() {
+export function CheckoutOptin() {
   const [enabled, setEnabled] = useSetting(
     'woocommerce',
     'optin_on_checkout',
diff --git a/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx b/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
index 772f055fce..b752bd7db2 100644
--- a/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
+++ b/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
@@ -1,10 +1,10 @@
 import { t } from 'common/functions';
-import Button from 'common/button/button';
-import Checkbox from 'common/form/checkbox/checkbox';
-import { Label, Inputs } from 'settings/components';
-import { useSetting, useAction } from 'settings/store/hooks';
+import { Button } from 'common/button/button';
+import { Checkbox } from 'common/form/checkbox/checkbox';
+import { Inputs, Label } from 'settings/components';
+import { useAction, useSetting } from 'settings/store/hooks';
 
-export default function EmailCustomizer() {
+export function EmailCustomizer() {
   const [enabled, setEnabled] = useSetting(
     'woocommerce',
     'use_mailpoet_editor',
diff --git a/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx b/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx
index fefa1f77a1..ef68bc66ce 100644
--- a/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx
+++ b/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx
@@ -1,9 +1,9 @@
 import { t } from 'common/functions';
 import { useSetting } from 'settings/store/hooks';
-import { Label, Inputs } from 'settings/components';
-import Checkbox from 'common/form/checkbox/checkbox';
+import { Inputs, Label } from 'settings/components';
+import { Checkbox } from 'common/form/checkbox/checkbox';
 
-export default function SubscribeOldCustomers() {
+export function SubscribeOldCustomers() {
   const [enabled, setEnabled] = useSetting(
     'mailpoet_subscribe_old_woocommerce_customers',
     'enabled',
diff --git a/mailpoet/assets/js/src/settings/pages/woo_commerce/woo_commerce.tsx b/mailpoet/assets/js/src/settings/pages/woo_commerce/woo_commerce.tsx
index 0aa2a854db..03477908e9 100644
--- a/mailpoet/assets/js/src/settings/pages/woo_commerce/woo_commerce.tsx
+++ b/mailpoet/assets/js/src/settings/pages/woo_commerce/woo_commerce.tsx
@@ -1,9 +1,9 @@
 import { SaveButton } from 'settings/components';
-import EmailCustomizer from './email_customizer';
-import CheckoutOptin from './checkout_optin';
-import SubscribeOldCustomers from './subscribe_old_customers';
+import { EmailCustomizer } from './email_customizer';
+import { CheckoutOptin } from './checkout_optin';
+import { SubscribeOldCustomers } from './subscribe_old_customers';
 
-export default function WooCommerce() {
+export function WooCommerce() {
   return (
     <div className="mailpoet-settings-grid">
       <EmailCustomizer />
diff --git a/mailpoet/assets/js/src/settings/settings.tsx b/mailpoet/assets/js/src/settings/settings.tsx
index ccbdae5743..347c0a88a1 100644
--- a/mailpoet/assets/js/src/settings/settings.tsx
+++ b/mailpoet/assets/js/src/settings/settings.tsx
@@ -1,9 +1,9 @@
-import MailPoet from 'mailpoet';
-import Notices from 'notices/notices.jsx';
-import Loading from 'common/loading';
+import { MailPoet } from 'mailpoet';
+import { Notices } from 'notices/notices.jsx';
+import { Loading } from 'common/loading';
 import { t } from 'common/functions';
-import RoutedTabs from 'common/tabs/routed_tabs';
-import Tab from 'common/tabs/tab';
+import { RoutedTabs } from 'common/tabs/routed_tabs';
+import { Tab } from 'common/tabs/tab';
 import { TopBar } from 'common/top_bar/top_bar';
 import {
   Advanced,
@@ -21,7 +21,7 @@ const trackTabSwitched = (tabKey: string) => {
   });
 };
 
-export default function Settings() {
+export function Settings() {
   const isSaving = useSelector('isSaving')();
   const hasWooCommerce = useSelector('hasWooCommerce')();
   return (
diff --git a/mailpoet/assets/js/src/settings/store/actions/index.ts b/mailpoet/assets/js/src/settings/store/actions/index.ts
index d337c2aa67..702e5f4ee9 100644
--- a/mailpoet/assets/js/src/settings/store/actions/index.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/index.ts
@@ -1,7 +1,7 @@
 export * from './settings';
 export * from './key_activation';
 export * from './mss_and_premium';
-export { default as reinstall } from './reinstall';
-export { recalculateSubscribersScore } from './recalculate_subscribers_score';
-export { default as sendTestEmail } from './send_test_email';
-export { default as openWoocommerceCustomizer } from './open_woocommerce_customizer';
+export * from './reinstall';
+export * from './recalculate_subscribers_score';
+export * from './send_test_email';
+export * from './open_woocommerce_customizer';
diff --git a/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts b/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts
index 16e2cfb966..db52b5671b 100644
--- a/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts
@@ -1,6 +1,6 @@
 import { select } from '@wordpress/data';
 
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 import { STORE_NAME } from 'settings/store/store_name';
 import {
diff --git a/mailpoet/assets/js/src/settings/store/actions/open_woocommerce_customizer.ts b/mailpoet/assets/js/src/settings/store/actions/open_woocommerce_customizer.ts
index ce64a497d1..b05c6899d7 100644
--- a/mailpoet/assets/js/src/settings/store/actions/open_woocommerce_customizer.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/open_woocommerce_customizer.ts
@@ -1,4 +1,4 @@
-export default function* openWoocommerceCustomizer(newsletterId?: string) {
+export function* openWoocommerceCustomizer(newsletterId?: string) {
   let id = newsletterId;
   if (!id) {
     const { res, success, error } = yield {
diff --git a/mailpoet/assets/js/src/settings/store/actions/recalculate_subscribers_score.ts b/mailpoet/assets/js/src/settings/store/actions/recalculate_subscribers_score.ts
index 69d0d8e3aa..c5d881fd33 100644
--- a/mailpoet/assets/js/src/settings/store/actions/recalculate_subscribers_score.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/recalculate_subscribers_score.ts
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
 export function* recalculateSubscribersScore(): Generator<{
   type: string;
diff --git a/mailpoet/assets/js/src/settings/store/actions/reinstall.ts b/mailpoet/assets/js/src/settings/store/actions/reinstall.ts
index df61ca2bb0..768fdd6f5d 100644
--- a/mailpoet/assets/js/src/settings/store/actions/reinstall.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/reinstall.ts
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default function* reinstall() {
+export function* reinstall() {
   MailPoet.Modal.loading(true);
   const { success, error } = yield {
     type: 'CALL_API',
diff --git a/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts b/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts
index ccb1f41167..aae48bd176 100644
--- a/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts
@@ -1,10 +1,7 @@
 import { t } from 'common/functions';
 import { Settings } from 'settings/store/types';
 
-export default function* sendTestEmail(
-  recipient: string,
-  mailer: Settings['mta'],
-) {
+export function* sendTestEmail(recipient: string, mailer: Settings['mta']) {
   if (!recipient) {
     return { type: 'TEST_EMAIL_FAILED', error: [t('cantSendEmail')] };
   }
diff --git a/mailpoet/assets/js/src/settings/store/controls.ts b/mailpoet/assets/js/src/settings/store/controls.ts
index 13a322fee7..fa3060b8e2 100644
--- a/mailpoet/assets/js/src/settings/store/controls.ts
+++ b/mailpoet/assets/js/src/settings/store/controls.ts
@@ -1,8 +1,8 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { select } from '@wordpress/data';
 import { STORE_NAME } from './store_name';
 
-export { default as CALL_API } from 'common/controls/call_api';
+export { callApi as CALL_API } from 'common/controls/call_api';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function TRACK_SETTINGS_SAVED() {
diff --git a/mailpoet/assets/js/src/settings/store/create_reducer.ts b/mailpoet/assets/js/src/settings/store/create_reducer.ts
index 649fe628f9..7514a7eb9b 100644
--- a/mailpoet/assets/js/src/settings/store/create_reducer.ts
+++ b/mailpoet/assets/js/src/settings/store/create_reducer.ts
@@ -7,9 +7,9 @@ import {
   PremiumStatus,
   TestEmailState,
 } from './types';
-import normalizeSettings from './normalize_settings';
+import { normalizeSettings } from './normalize_settings';
 
-export default function createReducer(defaultValue: State) {
+export function createReducer(defaultValue: State) {
   let keyActivation: KeyActivationState;
   return (
     state: State = defaultValue, // eslint-disable-line @typescript-eslint/default-param-last
diff --git a/mailpoet/assets/js/src/settings/store/hooks/index.ts b/mailpoet/assets/js/src/settings/store/hooks/index.ts
index cd98ffed74..3caa7a35d4 100644
--- a/mailpoet/assets/js/src/settings/store/hooks/index.ts
+++ b/mailpoet/assets/js/src/settings/store/hooks/index.ts
@@ -1,3 +1,3 @@
 export * from './useActions';
 export * from './useSetting';
-export { default as useSelector } from './useSelector';
+export * from './useSelector';
diff --git a/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts b/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts
index 863623add5..96116bffde 100644
--- a/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts
+++ b/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts
@@ -5,7 +5,7 @@ import { ExcludeFirstParam } from './types';
 
 type Selectors = typeof selectors;
 
-export default function useSelector<Key extends keyof Selectors>(
+export function useSelector<Key extends keyof Selectors>(
   key: Key,
   deps: any[] = [], // eslint-disable-line @typescript-eslint/no-explicit-any
 ): ExcludeFirstParam<Selectors[Key]> {
diff --git a/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts b/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts
index 5504ab7f83..39452f0731 100644
--- a/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts
+++ b/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { Settings } from '../types';
-import useSelector from './useSelector';
+import { useSelector } from './useSelector';
 import { ValueAndSetter } from './types';
 import { useAction } from './useActions';
 /**
diff --git a/mailpoet/assets/js/src/settings/store/index.ts b/mailpoet/assets/js/src/settings/store/index.ts
index 1be8bd65c3..aafe826311 100644
--- a/mailpoet/assets/js/src/settings/store/index.ts
+++ b/mailpoet/assets/js/src/settings/store/index.ts
@@ -2,8 +2,8 @@ import { registerStore } from '@wordpress/data';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import * as controls from './controls';
-import createReducer from './create_reducer';
-import makeDefaultState from './make_default_state';
+import { createReducer } from './create_reducer';
+import { makeDefaultState } from './make_default_state';
 import { STORE_NAME } from './store_name';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/mailpoet/assets/js/src/settings/store/make_default_state.ts b/mailpoet/assets/js/src/settings/store/make_default_state.ts
index bb4bd79695..7e42aeead7 100644
--- a/mailpoet/assets/js/src/settings/store/make_default_state.ts
+++ b/mailpoet/assets/js/src/settings/store/make_default_state.ts
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
-import { State, PremiumStatus, MssStatus, TestEmailState } from './types';
-import normalizeSettings from './normalize_settings';
+import { MailPoet } from 'mailpoet';
+import { MssStatus, PremiumStatus, State, TestEmailState } from './types';
+import { normalizeSettings } from './normalize_settings';
 
 function getPremiumStatus(keyValid, premiumInstalled): PremiumStatus {
   const pluginActive = !!MailPoet.premiumVersion;
@@ -24,7 +24,7 @@ function getMssStatus(keyValid, data): MssStatus {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function makeDefaultState(window: any): State {
+export function makeDefaultState(window: any): State {
   const pages = window.mailpoet_pages;
   const paths = window.mailpoet_paths;
   const segments = window.mailpoet_segments;
diff --git a/mailpoet/assets/js/src/settings/store/normalize_settings.ts b/mailpoet/assets/js/src/settings/store/normalize_settings.ts
index b7dcbb58da..3384a3d857 100644
--- a/mailpoet/assets/js/src/settings/store/normalize_settings.ts
+++ b/mailpoet/assets/js/src/settings/store/normalize_settings.ts
@@ -51,9 +51,7 @@ function asIs<T>(value: T): T {
   return value;
 }
 
-export default function normalizeSettings(
-  data: Record<string, unknown>,
-): Settings {
+export function normalizeSettings(data: Record<string, unknown>): Settings {
   const text = asString('');
   const disabledCheckbox = asBoolean('1', '0', '0');
   const enabledCheckbox = asBoolean('1', '0', '1');
diff --git a/mailpoet/assets/js/src/subscribers/form.jsx b/mailpoet/assets/js/src/subscribers/form.jsx
index 82aafd62b4..ce4b7bbf83 100644
--- a/mailpoet/assets/js/src/subscribers/form.jsx
+++ b/mailpoet/assets/js/src/subscribers/form.jsx
@@ -1,13 +1,14 @@
-import { Link, useLocation, useHistory } from 'react-router-dom';
-import MailPoet from 'mailpoet';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import Form from 'form/form.jsx';
 import ReactStringReplace from 'react-string-replace';
-import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
-import Background from 'common/background/background';
-import Heading from 'common/typography/heading/heading';
-import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
+
+import { Background } from 'common/background/background';
+import { Form } from 'form/form.jsx';
+import { Heading } from 'common/typography/heading/heading';
+import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options';
+import { MailPoet } from 'mailpoet';
+import { SubscribersLimitNotice } from 'notices/subscribers_limit_notice.jsx';
 
 const fields = [
   {
@@ -264,4 +265,4 @@ SubscriberForm.propTypes = {
   }).isRequired,
 };
 
-export default SubscriberForm;
+export { SubscriberForm };
diff --git a/mailpoet/assets/js/src/subscribers/heading.jsx b/mailpoet/assets/js/src/subscribers/heading.jsx
index 2a8005ca41..76ddbeaa1d 100644
--- a/mailpoet/assets/js/src/subscribers/heading.jsx
+++ b/mailpoet/assets/js/src/subscribers/heading.jsx
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
-import plusIcon from 'common/button/icon/plus';
+import { plusIcon } from 'common/button/icon/plus';
 
-function SubscribersHeading({ location }) {
+function SubscribersHeadingComponent({ location }) {
   return (
     <TopBarWithBeamer>
       <Link
@@ -39,8 +39,8 @@ function SubscribersHeading({ location }) {
   );
 }
 
-SubscribersHeading.propTypes = {
+SubscribersHeadingComponent.propTypes = {
   location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-export default withRouter(SubscribersHeading);
+export const SubscribersHeading = withRouter(SubscribersHeadingComponent);
diff --git a/mailpoet/assets/js/src/subscribers/importExport/export.ts b/mailpoet/assets/js/src/subscribers/importExport/export.ts
index 4cc8c214b5..c083c5d4e8 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/export.ts
+++ b/mailpoet/assets/js/src/subscribers/importExport/export.ts
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import Handlebars from 'handlebars';
 import { escapeHTML } from '@wordpress/escape-html';
 
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import.jsx b/mailpoet/assets/js/src/subscribers/importExport/import.jsx
index a3945f612f..f5d81bf27f 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import.jsx
@@ -1,15 +1,15 @@
 import { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
-import ScrollToTop from 'common/scroll_to_top.jsx';
+import { HashRouter, Redirect, Route, Switch } from 'react-router-dom';
+import { ScrollToTop } from 'common/scroll_to_top.jsx';
 
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import StepMethodSelection from './import/step_method_selection.jsx';
-import StepInputValidation from './import/step_input_validation.jsx';
-import StepDataManipulation from './import/step_data_manipulation.jsx';
-import StepResults from './import/step_results.jsx';
-import StepCleanList from './import/step_clean_list';
+import { Notices } from 'notices/notices.jsx';
+import { StepMethodSelection } from './import/step_method_selection.jsx';
+import { StepInputValidation } from './import/step_input_validation.jsx';
+import { StepDataManipulation } from './import/step_data_manipulation.jsx';
+import { StepResults } from './import/step_results.jsx';
+import { StepCleanList } from './import/step_clean_list';
 
 const container = document.getElementById('import_container');
 
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx
index fe055781d2..7c34f1f45f 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx
@@ -1,11 +1,11 @@
-import Button from 'common/button/button';
-import MailPoet from 'mailpoet';
+import { Button } from 'common/button/button';
+import { MailPoet } from 'mailpoet';
 
 type Props = {
   onProceed?: () => void;
 };
 
-export default function CleanList({ onProceed }: Props): JSX.Element {
+export function CleanList({ onProceed }: Props): JSX.Element {
   return (
     <div className="mailpoet-clean-list-step-container">
       <p>{MailPoet.I18n.t('cleanListText1')}</p>
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/context.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/context.jsx
index 4e82915409..1e1e2b8dac 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/context.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/context.jsx
@@ -1,8 +1,6 @@
 import { createContext } from 'react';
 
-const ImportContext = createContext({
+export const ImportContext = createContext({
   isNewUser: window.mailpoet_is_new_user,
   segments: window.mailpoetSegments,
 });
-
-export default ImportContext;
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/previous_next_step_buttons.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/previous_next_step_buttons.jsx
index 83f2427189..3bf01c8a52 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/previous_next_step_buttons.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/previous_next_step_buttons.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 
 function PreviousNextStepButtons({
   hidePrevious,
@@ -48,4 +48,4 @@ PreviousNextStepButtons.defaultProps = {
   onNextAction: () => {},
 };
 
-export default PreviousNextStepButtons;
+export { PreviousNextStepButtons };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx
index 5f6d6871f6..91b024f2a4 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx
@@ -41,7 +41,7 @@ const detectAndCleanupEmail = (emailString) => {
   return email;
 };
 
-function sanitizeCSVData(csvData) {
+export function sanitizeCSVData(csvData) {
   let processedSubscribers = [];
   const parsedEmails = [];
   const duplicateEmails = [];
@@ -131,5 +131,3 @@ function sanitizeCSVData(csvData) {
   }
   return null;
 }
-
-export default sanitizeCSVData;
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx
index d6f3837795..a98b4f4519 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx
@@ -1,9 +1,7 @@
 import { RouteComponentProps } from 'react-router-dom';
-import CleanList from './clean_list';
+import { CleanList } from './clean_list';
 
-export default function StepCleanList({
-  history,
-}: RouteComponentProps): JSX.Element {
+export function StepCleanList({ history }: RouteComponentProps): JSX.Element {
   return (
     <CleanList onProceed={(): void => history.push('step_method_selection')} />
   );
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
index 4c4fdc0f07..30d48f3c96 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
-import Warnings from './step_data_manipulation/warnings.jsx';
-import MatchTable from './step_data_manipulation/match_table.jsx';
-import SelectSegment from './step_data_manipulation/select_segment.jsx';
+import { PreviousNextStepButtons } from './previous_next_step_buttons.jsx';
+import { Warnings } from './step_data_manipulation/warnings.jsx';
+import { MatchTable } from './step_data_manipulation/match_table.jsx';
+import { SelectSegment } from './step_data_manipulation/select_segment.jsx';
 import { NewSubscribersStatus } from './step_data_manipulation/new_subscribers_status';
 import { ExistingSubscribersStatus } from './step_data_manipulation/existing_subscribers_status';
-import UpdateExistingSubscribers from './step_data_manipulation/update_existing_subscribers.jsx';
-import doImport from './step_data_manipulation/do_import.jsx';
+import { UpdateExistingSubscribers } from './step_data_manipulation/update_existing_subscribers.jsx';
+import { doImport } from './step_data_manipulation/do_import.jsx';
 
 function getPreviousStepLink(importData, subscribersLimitForValidation) {
   if (importData === undefined) {
@@ -23,7 +23,7 @@ function getPreviousStepLink(importData, subscribersLimitForValidation) {
   return 'step_input_validation';
 }
 
-function StepDataManipulation({
+function StepDataManipulationComponent({
   history,
   stepMethodSelectionData,
   subscribersLimitForValidation,
@@ -99,7 +99,7 @@ function StepDataManipulation({
   );
 }
 
-StepDataManipulation.propTypes = {
+StepDataManipulationComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
     replace: PropTypes.func.isRequired,
@@ -125,8 +125,8 @@ StepDataManipulation.propTypes = {
   setStepDataManipulationData: PropTypes.func.isRequired,
 };
 
-StepDataManipulation.defaultProps = {
+StepDataManipulationComponent.defaultProps = {
   stepMethodSelectionData: undefined,
 };
 
-export default withRouter(StepDataManipulation);
+export const StepDataManipulation = withRouter(StepDataManipulationComponent);
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx
index 3fa75a63c0..bc9091ffe2 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx
@@ -1,4 +1,4 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 
 export function ConsentDescription(): JSX.Element {
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx
index ee19de0c20..53f789d222 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx
@@ -1,7 +1,7 @@
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default (onCreateSegment) => {
+export const createNewSegment = (onCreateSegment) => {
   MailPoet.Modal.popup({
     title: MailPoet.I18n.t('addNewList'),
     template: jQuery('#new_segment_template').html(),
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx
index 0d806d07fd..a42645be59 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx
@@ -1,9 +1,9 @@
 import jQuery from 'jquery';
 import _ from 'underscore';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import 'asyncqueue';
 
-export default (
+export const doImport = (
   subscribersToImport,
   segments,
   newSubscribersStatus,
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx
index 2ef84b7956..6e589655a1 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
 
 import { ConsentDescription } from './consent_description';
 
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx
index 8045600dd4..2889a49b57 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx
@@ -1,7 +1,7 @@
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-export default () => {
+export const generateColumnSelection = () => {
   const select2Config = {
     data: window.mailpoetColumnsSelect2,
     width: '15em',
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx
index d1ab7c6e5e..cbb9343d07 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx
@@ -1,5 +1,5 @@
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import _ from 'underscore';
 
 export function createSelection(segments, onSelectionChange) {
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx
index f82e57cbf8..205a85ade6 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx
@@ -1,4 +1,4 @@
-export default (subscribers, header) => {
+export const matchColumns = (subscribers, header) => {
   const displayedColumns = [];
   const displayedColumnsIds = [];
   let columnData;
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx
index f1a4cbaa05..e8758ed169 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx
@@ -1,9 +1,9 @@
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 
-import generateColumnSelection from './generate_column_selection.jsx';
-import matchColumns from './match_columns.jsx';
+import { generateColumnSelection } from './generate_column_selection.jsx';
+import { matchColumns } from './match_columns.jsx';
 
 const MAX_SUBSCRIBERS_SHOWN = 10;
 
@@ -171,4 +171,4 @@ MatchTable.defaultProps = {
   header: [],
 };
 
-export default MatchTable;
+export { MatchTable };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx
index b0dafdd355..289f7b9a9e 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
-import MailPoet from 'mailpoet';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Select } from 'common/form/select/select';
 
 import { ConsentDescription } from './consent_description';
 
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
index dcc6fa56e0..0f75fe6391 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
@@ -1,15 +1,15 @@
-import { useLayoutEffect, useContext, useState } from 'react';
-import MailPoet from 'mailpoet';
+import { useContext, useLayoutEffect, useState } from 'react';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
 
 import { GlobalContext } from 'context/index.jsx';
 
-import Button from 'common/button/button';
+import { Button } from 'common/button/button';
 import {
   createSelection,
   destroySelection,
 } from './generate_segment_selection.jsx';
-import createNewSegment from './create_new_segment.jsx';
+import { createNewSegment } from './create_new_segment.jsx';
 
 function SelectSegment({ setSelectedSegments }) {
   const { segments: segmentsContext } = useContext(GlobalContext);
@@ -68,4 +68,4 @@ SelectSegment.propTypes = {
   setSelectedSegments: PropTypes.func.isRequired,
 };
 
-export default SelectSegment;
+export { SelectSegment };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
index 3912de0b47..ddd9eef1a0 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
@@ -1,6 +1,6 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
-import Radio from 'common/form/radio/radio';
+import { Radio } from 'common/form/radio/radio';
 
 function UpdateExistingSubscribers({
   updateExistingSubscribers,
@@ -43,4 +43,4 @@ UpdateExistingSubscribers.propTypes = {
   updateExistingSubscribers: PropTypes.bool.isRequired,
 };
 
-export default UpdateExistingSubscribers;
+export { UpdateExistingSubscribers };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/warnings.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/warnings.jsx
index 9e8bc41832..064dad9176 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/warnings.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/warnings.jsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
-import classNames from 'classnames';
+import classnames from 'classnames';
 
 const SingleWarning = ({ translation, subscribers }) => {
   let warning = '';
@@ -29,7 +29,7 @@ function Warnings({ stepMethodSelectionData }) {
 
   const [detailsShown, setDetailsShown] = useState(false);
 
-  const detailClasses = classNames(
+  const detailClasses = classnames(
     'mailpoet_subscribers_data_parse_results_details',
     { mailpoet_hidden: !detailsShown },
   );
@@ -134,4 +134,4 @@ Warnings.defaultProps = {
   },
 };
 
-export default Warnings;
+export { Warnings };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
index 42e8b8967b..b16f925476 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
@@ -2,12 +2,12 @@ import { useEffect, useState, useCallback } from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import CleanList from 'subscribers/importExport/import/clean_list';
-import InitialQuestion from './step_input_validation/initial_question.jsx';
-import WrongSourceBlock from './step_input_validation/wrong_source_block.jsx';
-import LastSentQuestion from './step_input_validation/last_sent_question.jsx';
+import { CleanList } from 'subscribers/importExport/import/clean_list';
+import { InitialQuestion } from './step_input_validation/initial_question.jsx';
+import { WrongSourceBlock } from './step_input_validation/wrong_source_block.jsx';
+import { LastSentQuestion } from './step_input_validation/last_sent_question.jsx';
 
-function StepInputValidation({ stepMethodSelectionData, history }) {
+function StepInputValidationComponent({ stepMethodSelectionData, history }) {
   const [importSource, setImportSource] = useState(undefined);
   const [lastSent, setLastSent] = useState(undefined);
 
@@ -46,7 +46,7 @@ function StepInputValidation({ stepMethodSelectionData, history }) {
   );
 }
 
-StepInputValidation.propTypes = {
+StepInputValidationComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
     replace: PropTypes.func.isRequired,
@@ -61,8 +61,8 @@ StepInputValidation.propTypes = {
   }),
 };
 
-StepInputValidation.defaultProps = {
+StepInputValidationComponent.defaultProps = {
   stepMethodSelectionData: undefined,
 };
 
-export default withRouter(StepInputValidation);
+export const StepInputValidation = withRouter(StepInputValidationComponent);
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/initial_question.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/initial_question.jsx
index 62e23e51cd..e466538846 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/initial_question.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/initial_question.jsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Radio from 'common/form/radio/radio';
-import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
+import { MailPoet } from 'mailpoet';
+import { Radio } from 'common/form/radio/radio';
+import { PreviousNextStepButtons } from '../previous_next_step_buttons.jsx';
 
 function InitialQuestion({ onSubmit, history }) {
   const [importSource, setImportSource] = useState(undefined);
@@ -58,4 +58,4 @@ InitialQuestion.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 };
 
-export default InitialQuestion;
+export { InitialQuestion };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/last_sent_question.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/last_sent_question.jsx
index 3e6309c199..411ae53aa5 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/last_sent_question.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/last_sent_question.jsx
@@ -1,8 +1,8 @@
 import { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
-import Select from 'common/form/select/select';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
+import { Select } from 'common/form/select/select';
 
 function LastSentQuestion({ onSubmit }) {
   const [value, setValue] = useState('over2years');
@@ -64,4 +64,4 @@ LastSentQuestion.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 };
 
-export default LastSentQuestion;
+export { LastSentQuestion };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/wrong_source_block.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/wrong_source_block.jsx
index fba055d92d..18576fd079 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/wrong_source_block.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_input_validation/wrong_source_block.jsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 
-function WrongSourceBlock() {
+export function WrongSourceBlock() {
   return (
     <div
       className="mailpoet-clean-list-step-container"
@@ -21,5 +21,3 @@ function WrongSourceBlock() {
     </div>
   );
 }
-
-export default WrongSourceBlock;
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection.jsx
index b2d79cc6c4..022c52b1d0 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection.jsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import SelectMethod from './step_method_selection/select_import_method.jsx';
-import MethodPaste from './step_method_selection/method_paste.jsx';
-import MethodUpload from './step_method_selection/method_upload.jsx';
-import MethodMailChimp from './step_method_selection/method_mailchimp.jsx';
-import processCsv from './step_method_selection/process_csv.jsx';
-import PreviousNextStepButtons from './previous_next_step_buttons';
+import { MailPoet } from 'mailpoet';
+import { SelectImportMethod } from './step_method_selection/select_import_method.jsx';
+import { MethodPaste } from './step_method_selection/method_paste.jsx';
+import { MethodUpload } from './step_method_selection/method_upload.jsx';
+import { MethodMailChimp } from './step_method_selection/method_mailchimp.jsx';
+import { processCsv } from './step_method_selection/process_csv.jsx';
+import { PreviousNextStepButtons } from './previous_next_step_buttons';
 
 const getNextStepLink = (importData, subscribersLimitForValidation, method) => {
   if (importData === undefined) {
@@ -25,7 +25,7 @@ const getNextStepLink = (importData, subscribersLimitForValidation, method) => {
   return 'step_input_validation';
 };
 
-function StepMethodSelection({
+function StepMethodSelectionComponent({
   history,
   setStepMethodSelectionData,
   subscribersLimitForValidation,
@@ -57,7 +57,7 @@ function StepMethodSelection({
 
   return (
     <div className="mailpoet-settings-grid">
-      <SelectMethod activeMethod={method} onMethodChange={setMethod} />
+      <SelectImportMethod activeMethod={method} onMethodChange={setMethod} />
       {method === 'paste-method' && (
         <MethodPaste
           onPrevious={previousStep}
@@ -97,7 +97,7 @@ function StepMethodSelection({
   );
 }
 
-StepMethodSelection.propTypes = {
+StepMethodSelectionComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }).isRequired,
@@ -105,4 +105,4 @@ StepMethodSelection.propTypes = {
   subscribersLimitForValidation: PropTypes.number.isRequired,
 };
 
-export default withRouter(StepMethodSelection);
+export const StepMethodSelection = withRouter(StepMethodSelectionComponent);
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx
index 7fb730ad2f..a02e78d666 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx
@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
-import Input from 'common/form/input/input';
-import Selection from 'form/fields/selection.jsx';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
+import { Input } from 'common/form/input/input';
+import { Selection } from 'form/fields/selection.jsx';
 import ReactStringReplace from 'react-string-replace';
-import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
+import { PreviousNextStepButtons } from '../previous_next_step_buttons.jsx';
 
 function MethodMailChimp({ onFinish, onPrevious }) {
   const [key, setKey] = useState('');
@@ -160,4 +160,4 @@ MethodMailChimp.defaultProps = {
   onPrevious: () => {},
 };
 
-export default MethodMailChimp;
+export { MethodMailChimp };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
index f02fad3017..921f151009 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
-import Textarea from 'common/form/textarea/textarea';
-import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
+import { Textarea } from 'common/form/textarea/textarea';
+import { PreviousNextStepButtons } from '../previous_next_step_buttons.jsx';
 
 const kbLink =
   'https://kb.mailpoet.com/article/126-importing-subscribers-with-csv-files';
@@ -71,4 +71,4 @@ MethodPaste.defaultProps = {
   data: '',
 };
 
-export default MethodPaste;
+export { MethodPaste };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx
index 4dc76e6870..5c476f4b99 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
-import Input from 'common/form/input/input';
-import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
+import { Input } from 'common/form/input/input';
+import { PreviousNextStepButtons } from '../previous_next_step_buttons.jsx';
 
 const kbLink =
   'https://kb.mailpoet.com/article/126-importing-subscribers-with-csv-files';
@@ -72,4 +72,4 @@ MethodUpload.defaultProps = {
   onPrevious: () => {},
 };
 
-export default MethodUpload;
+export { MethodUpload };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/process_csv.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/process_csv.jsx
index bc859888a3..34e2388f21 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/process_csv.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/process_csv.jsx
@@ -1,6 +1,6 @@
 import Papa from 'papaparse';
-import MailPoet from 'mailpoet';
-import sanitizeCSVData from '../sanitize_csv_data.jsx';
+import { MailPoet } from 'mailpoet';
+import { sanitizeCSVData } from '../sanitize_csv_data.jsx';
 
 function papaParserConfig(done) {
   return {
@@ -27,7 +27,7 @@ function papaParserConfig(done) {
   };
 }
 
-const process = (csvData, done) => {
+export const processCsv = (csvData, done) => {
   const pasteSize = encodeURI(csvData).split(/%..|./).length - 1;
   MailPoet.Notice.hide();
   // get an approximate size of textarea paste in bytes
@@ -38,5 +38,3 @@ const process = (csvData, done) => {
   MailPoet.Modal.loading(true);
   Papa.parse(csvData, papaParserConfig(done));
 };
-
-export default process;
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
index f976fa5e20..b3cac8dd11 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
@@ -1,7 +1,7 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import PropTypes from 'prop-types';
-import Radio from 'common/form/radio/radio';
-import Tag from 'common/tag/tag';
+import { Radio } from 'common/form/radio/radio';
+import { Tag } from 'common/tag/tag';
 
 function SelectImportMethod({ activeMethod, onMethodChange }) {
   return (
@@ -79,4 +79,4 @@ SelectImportMethod.defaultProps = {
   activeMethod: undefined,
 };
 
-export default SelectImportMethod;
+export { SelectImportMethod };
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_results.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_results.jsx
index 21e3fbdbbd..9cff47264d 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_results.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_results.jsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import _ from 'underscore';
 import { withRouter } from 'react-router-dom';
 import ReactStringReplace from 'react-string-replace';
 
-import Button from 'common/button/button';
+import { Button } from 'common/button/button';
 
 function ResultMessage({ subscribersCount, segments, initialMessage }) {
   if (subscribersCount) {
@@ -107,7 +107,7 @@ NoWelcomeEmail.defaultProps = {
   addedToSegmentWithWelcomeNotification: false,
 };
 
-function StepResults({
+function StepResultsComponent({
   errors,
   createdSubscribers,
   updatedSubscribers,
@@ -184,7 +184,7 @@ function StepResults({
   );
 }
 
-StepResults.propTypes = {
+StepResultsComponent.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
     replace: PropTypes.func.isRequired,
@@ -196,7 +196,7 @@ StepResults.propTypes = {
   addedToSegmentWithWelcomeNotification: PropTypes.bool,
 };
 
-StepResults.defaultProps = {
+StepResultsComponent.defaultProps = {
   errors: [],
   segments: undefined,
   createdSubscribers: undefined,
@@ -204,4 +204,4 @@ StepResults.defaultProps = {
   addedToSegmentWithWelcomeNotification: undefined,
 };
 
-export default withRouter(StepResults);
+export const StepResults = withRouter(StepResultsComponent);
diff --git a/mailpoet/assets/js/src/subscribers/list.jsx b/mailpoet/assets/js/src/subscribers/list.jsx
index aaf58dac36..7cfed5be05 100644
--- a/mailpoet/assets/js/src/subscribers/list.jsx
+++ b/mailpoet/assets/js/src/subscribers/list.jsx
@@ -1,23 +1,20 @@
-import { Link, useLocation } from 'react-router-dom';
-
+import classnames from 'classnames';
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
-import classNames from 'classnames';
+import { Link, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import Button from 'common/button/button.tsx';
-import Tags from 'common/tag/tags';
-import Listing from 'listing/listing.jsx';
-import Modal from 'common/modal/modal.tsx';
-import Selection from 'form/fields/selection.jsx';
-import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
-import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice';
-import EmailVolumeLimitNotice from 'notices/email_volume_limit_notice';
+import { Button, Tags } from 'common';
+import { Listing } from 'listing/listing.jsx';
+import { MailPoet } from 'mailpoet';
+import { Modal } from 'common/modal/modal.tsx';
+import { Selection } from 'form/fields/selection.jsx';
+import { SubscribersLimitNotice } from 'notices/subscribers_limit_notice.jsx';
+import { InvalidMssKeyNotice } from 'notices/invalid_mss_key_notice';
+import { EmailVolumeLimitNotice } from 'notices/email_volume_limit_notice';
 import { SubscribersCacheMessage } from 'common/subscribers_cache_message';
-import SubscribersInPlan from 'common/subscribers_in_plan';
-
-import SubscribersHeading from './heading';
+import { SubscribersInPlan } from 'common/subscribers_in_plan';
 import { ListingsEngagementScore } from './listings_engagement_score';
+import { SubscribersHeading } from './heading';
 
 const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
 
@@ -367,7 +364,7 @@ function SubscriberList({ match }) {
   const location = useLocation();
 
   const renderItem = (subscriber, actions) => {
-    const rowClasses = classNames(
+    const rowClasses = classnames(
       'manage-column',
       'column-primary',
       'has-row-actions',
@@ -514,4 +511,4 @@ SubscriberList.propTypes = {
   }).isRequired,
 };
 
-export default SubscriberList;
+export { SubscriberList };
diff --git a/mailpoet/assets/js/src/subscribers/listings_engagement_score.tsx b/mailpoet/assets/js/src/subscribers/listings_engagement_score.tsx
index 02f284c46d..107facebde 100644
--- a/mailpoet/assets/js/src/subscribers/listings_engagement_score.tsx
+++ b/mailpoet/assets/js/src/subscribers/listings_engagement_score.tsx
@@ -1,5 +1,5 @@
-import Badge from '../common/listings/newsletter_stats/badge';
-import MailPoet from '../mailpoet';
+import { Badge } from '../common/listings/newsletter_stats/badge';
+import { MailPoet } from '../mailpoet';
 
 interface Props {
   id: number;
diff --git a/mailpoet/assets/js/src/subscribers/stats.tsx b/mailpoet/assets/js/src/subscribers/stats.tsx
index e23d18dbc3..28447048cc 100644
--- a/mailpoet/assets/js/src/subscribers/stats.tsx
+++ b/mailpoet/assets/js/src/subscribers/stats.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useRouteMatch, useLocation } from 'react-router-dom';
-import MailPoet from 'mailpoet';
-import Loading from 'common/loading';
+import { MailPoet } from 'mailpoet';
+import { Loading } from 'common/loading';
 import { useGlobalContextValue } from 'context';
 
-import Heading from './stats/heading';
-import Summary from './stats/summary';
-import WoocommerceRevenues from './stats/woocommerce_revenues';
-import OpenedEmailsStats from './stats/opened_email_stats';
+import { StatsHeading as Heading } from './stats/heading';
+import { Summary } from './stats/summary';
+import { WoocommerceRevenues } from './stats/woocommerce_revenues';
+import { OpenedEmailsStats } from './stats/opened_email_stats';
 
 export type StatsType = {
   email: string;
diff --git a/mailpoet/assets/js/src/subscribers/stats/heading.tsx b/mailpoet/assets/js/src/subscribers/stats/heading.tsx
index 659eb3fc09..d454c6b07c 100644
--- a/mailpoet/assets/js/src/subscribers/stats/heading.tsx
+++ b/mailpoet/assets/js/src/subscribers/stats/heading.tsx
@@ -1,13 +1,13 @@
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import { Link, useLocation } from 'react-router-dom';
-import Heading from 'common/typography/heading/heading';
+import { Heading } from 'common/typography/heading/heading';
 import { LocationState } from 'subscribers/location_state';
 
 export type PropTypes = {
   email: string;
 };
 
-export default function StatsHeading({ email }: PropTypes): JSX.Element {
+export function StatsHeading({ email }: PropTypes): JSX.Element {
   const location = useLocation();
   const backUrl = (location.state as LocationState)?.backUrl || '/';
   return (
diff --git a/mailpoet/assets/js/src/subscribers/stats/no_access_info.tsx b/mailpoet/assets/js/src/subscribers/stats/no_access_info.tsx
index 786b7286dc..7a614c95e8 100644
--- a/mailpoet/assets/js/src/subscribers/stats/no_access_info.tsx
+++ b/mailpoet/assets/js/src/subscribers/stats/no_access_info.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
-import MailPoet from 'mailpoet';
-import PremiumRequired from 'common/premium_required/premium_required';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { PremiumRequired } from 'common/premium_required/premium_required';
+import { Button } from 'common/button/button';
 import ReactStringReplace from 'react-string-replace';
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
   hasPremiumSupport: boolean;
 };
 
-export default function NoAccessInfo({
+export function NoAccessInfo({
   limitReached,
   limitValue,
   subscribersCountTowardsLimit,
diff --git a/mailpoet/assets/js/src/subscribers/stats/opened_email_stats.tsx b/mailpoet/assets/js/src/subscribers/stats/opened_email_stats.tsx
index 3cb75202ed..4370dd34f2 100644
--- a/mailpoet/assets/js/src/subscribers/stats/opened_email_stats.tsx
+++ b/mailpoet/assets/js/src/subscribers/stats/opened_email_stats.tsx
@@ -1,8 +1,8 @@
-import Hooks from 'hooks';
+import { Hooks } from 'hooks';
 import { Location } from 'history';
-import MailPoet from 'mailpoet';
-import Heading from 'common/typography/heading/heading';
-import NoAccessInfo from './no_access_info';
+import { MailPoet } from 'mailpoet';
+import { Heading } from 'common/typography/heading/heading';
+import { NoAccessInfo } from './no_access_info';
 
 type Props = {
   params: {
@@ -11,10 +11,7 @@ type Props = {
   location: Location;
 };
 
-export default function OpenedEmailsStats({
-  params,
-  location,
-}: Props): JSX.Element {
+export function OpenedEmailsStats({ params, location }: Props): JSX.Element {
   return (
     <>
       <Heading level={4}>{MailPoet.I18n.t('openedEmailsHeading')}</Heading>
diff --git a/mailpoet/assets/js/src/subscribers/stats/summary.tsx b/mailpoet/assets/js/src/subscribers/stats/summary.tsx
index 761a3c1b95..99d22317a7 100644
--- a/mailpoet/assets/js/src/subscribers/stats/summary.tsx
+++ b/mailpoet/assets/js/src/subscribers/stats/summary.tsx
@@ -1,7 +1,7 @@
 import ReactStringReplace from 'react-string-replace';
-import MailPoet from 'mailpoet';
-import Tag from 'common/tag/tag';
-import Tooltip from 'help-tooltip';
+import { MailPoet } from 'mailpoet';
+import { Tag } from 'common/tag/tag';
+import { Tooltip } from 'help-tooltip';
 import { ListingsEngagementScore } from '../listings_engagement_score';
 
 export type PropTypes = {
@@ -15,7 +15,7 @@ export type PropTypes = {
   };
 };
 
-export default function Summary({
+export function Summary({
   totalSent,
   open,
   machineOpen,
diff --git a/mailpoet/assets/js/src/subscribers/stats/woocommerce_revenues.tsx b/mailpoet/assets/js/src/subscribers/stats/woocommerce_revenues.tsx
index d7ece159b5..8d16181f25 100644
--- a/mailpoet/assets/js/src/subscribers/stats/woocommerce_revenues.tsx
+++ b/mailpoet/assets/js/src/subscribers/stats/woocommerce_revenues.tsx
@@ -4,7 +4,7 @@ export type PropTypes = {
   averageRevenueValue: string;
 };
 
-export default function WoocommerceRevenues({
+export function WoocommerceRevenues({
   revenueValue,
   count,
   averageRevenueValue,
diff --git a/mailpoet/assets/js/src/subscribers/subscribers.jsx b/mailpoet/assets/js/src/subscribers/subscribers.jsx
index cbc56e210d..29419774d4 100644
--- a/mailpoet/assets/js/src/subscribers/subscribers.jsx
+++ b/mailpoet/assets/js/src/subscribers/subscribers.jsx
@@ -1,11 +1,11 @@
 import ReactDOM from 'react-dom';
 import { HashRouter, Switch, Route } from 'react-router-dom';
 
-import SubscriberList from 'subscribers/list.jsx';
-import SubscriberForm from 'subscribers/form.jsx';
+import { SubscriberList } from 'subscribers/list.jsx';
+import { SubscriberForm } from 'subscribers/form.jsx';
 import { SubscriberStats } from 'subscribers/stats';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
+import { Notices } from 'notices/notices.jsx';
 
 function App() {
   return (
diff --git a/mailpoet/assets/js/src/wizard/create_sender_settings.jsx b/mailpoet/assets/js/src/wizard/create_sender_settings.jsx
index ae5c181bc0..b272a6e34f 100644
--- a/mailpoet/assets/js/src/wizard/create_sender_settings.jsx
+++ b/mailpoet/assets/js/src/wizard/create_sender_settings.jsx
@@ -21,7 +21,7 @@ const freeAddress = ({ name, address }) => {
   };
 };
 
-export default ({ name, address }) => {
+export const createSenderSettings = ({ name, address }) => {
   const emailAddressDomain = address.split('@').pop().toLowerCase();
   if (window.mailpoet_free_domains.indexOf(emailAddressDomain) > -1) {
     return freeAddress({ name, address });
diff --git a/mailpoet/assets/js/src/wizard/layout/step_layout.jsx b/mailpoet/assets/js/src/wizard/layout/step_layout.jsx
index 3e10b83846..7468b9b1ed 100644
--- a/mailpoet/assets/js/src/wizard/layout/step_layout.jsx
+++ b/mailpoet/assets/js/src/wizard/layout/step_layout.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import WelcomeWizardStepLayoutBody from './step_layout_body.jsx';
+import { WelcomeWizardStepLayoutBody } from './step_layout_body.jsx';
 
 function WelcomeWizardStepLayout(props) {
   return (
@@ -28,4 +28,4 @@ WelcomeWizardStepLayout.propTypes = {
   ]).isRequired,
 };
 
-export default WelcomeWizardStepLayout;
+export { WelcomeWizardStepLayout };
diff --git a/mailpoet/assets/js/src/wizard/layout/step_layout_body.jsx b/mailpoet/assets/js/src/wizard/layout/step_layout_body.jsx
index ce3b529c70..cbaab389a5 100644
--- a/mailpoet/assets/js/src/wizard/layout/step_layout_body.jsx
+++ b/mailpoet/assets/js/src/wizard/layout/step_layout_body.jsx
@@ -19,4 +19,4 @@ WelcomeWizardStepLayoutBody.propTypes = {
   ]).isRequired,
 };
 
-export default WelcomeWizardStepLayoutBody;
+export { WelcomeWizardStepLayoutBody };
diff --git a/mailpoet/assets/js/src/wizard/steps/email_course_step.jsx b/mailpoet/assets/js/src/wizard/steps/email_course_step.jsx
index 5d2b63bb52..20ce3ff7d7 100644
--- a/mailpoet/assets/js/src/wizard/steps/email_course_step.jsx
+++ b/mailpoet/assets/js/src/wizard/steps/email_course_step.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Button from '../../common/button/button';
-import Heading from '../../common/typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { Button } from '../../common';
+import { Heading } from '../../common/typography/heading/heading';
 
 function WelcomeWizardEmailCourseStep(props) {
   return (
@@ -37,4 +37,4 @@ WelcomeWizardEmailCourseStep.propTypes = {
   next: PropTypes.func.isRequired,
 };
 
-export default WelcomeWizardEmailCourseStep;
+export { WelcomeWizardEmailCourseStep };
diff --git a/mailpoet/assets/js/src/wizard/steps/migrated_user_step.jsx b/mailpoet/assets/js/src/wizard/steps/migrated_user_step.jsx
index 28d3804a46..ea53ad190e 100644
--- a/mailpoet/assets/js/src/wizard/steps/migrated_user_step.jsx
+++ b/mailpoet/assets/js/src/wizard/steps/migrated_user_step.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Button from '../../common/button/button';
-import Heading from '../../common/typography/heading/heading';
+import { MailPoet } from 'mailpoet';
+import { Button } from '../../common';
+import { Heading } from '../../common/typography/heading/heading';
 
 function WelcomeWizardMigratedUserStep(props) {
   return (
@@ -26,4 +26,4 @@ WelcomeWizardMigratedUserStep.propTypes = {
   next: PropTypes.func.isRequired,
 };
 
-export default WelcomeWizardMigratedUserStep;
+export { WelcomeWizardMigratedUserStep };
diff --git a/mailpoet/assets/js/src/wizard/steps/pitch_mss_step.jsx b/mailpoet/assets/js/src/wizard/steps/pitch_mss_step.jsx
index d3f17a63b7..6a220d93fa 100644
--- a/mailpoet/assets/js/src/wizard/steps/pitch_mss_step.jsx
+++ b/mailpoet/assets/js/src/wizard/steps/pitch_mss_step.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import Button from '../../common/button/button';
-import Heading from '../../common/typography/heading/heading';
-import List from '../../common/typography/list/list';
+import { MailPoet } from 'mailpoet';
+import { Button } from '../../common';
+import { Heading } from '../../common/typography/heading/heading';
+import { List } from '../../common/typography/list/list';
 
 export function FreeBenefitsList() {
   return (
@@ -137,7 +137,7 @@ NotFreePlanSubscribers.propTypes = {
   next: PropTypes.func.isRequired,
 };
 
-function Step(props) {
+function WelcomeWizardPitchMSSStep(props) {
   return props.subscribersCount < 1000 ? (
     <FreePlanSubscribers
       mailpoetAccountUrl={props.mailpoetAccountUrl}
@@ -151,11 +151,11 @@ function Step(props) {
   );
 }
 
-Step.propTypes = {
+WelcomeWizardPitchMSSStep.propTypes = {
   next: PropTypes.func.isRequired,
   subscribersCount: PropTypes.number.isRequired,
   mailpoetAccountUrl: PropTypes.string.isRequired,
   purchaseUrl: PropTypes.string.isRequired,
 };
 
-export default Step;
+export { WelcomeWizardPitchMSSStep };
diff --git a/mailpoet/assets/js/src/wizard/steps/sender_step.jsx b/mailpoet/assets/js/src/wizard/steps/sender_step.jsx
index 2266b5b31a..5058ee3852 100644
--- a/mailpoet/assets/js/src/wizard/steps/sender_step.jsx
+++ b/mailpoet/assets/js/src/wizard/steps/sender_step.jsx
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import jQuery from 'jquery';
-import Button from '../../common/button/button';
+import { Button } from '../../common/button/button';
 import { Grid } from '../../common/grid';
-import Heading from '../../common/typography/heading/heading';
-import Input from '../../common/form/input/input';
+import { Heading } from '../../common/typography/heading/heading';
+import { Input } from '../../common/form/input/input';
 
 function WelcomeWizardSenderStep(props) {
   return (
@@ -95,4 +95,4 @@ WelcomeWizardSenderStep.defaultProps = {
   sender: null,
 };
 
-export default WelcomeWizardSenderStep;
+export { WelcomeWizardSenderStep };
diff --git a/mailpoet/assets/js/src/wizard/steps/usage_tracking_step.jsx b/mailpoet/assets/js/src/wizard/steps/usage_tracking_step.jsx
index 0a3519be76..12e6e5a5cb 100644
--- a/mailpoet/assets/js/src/wizard/steps/usage_tracking_step.jsx
+++ b/mailpoet/assets/js/src/wizard/steps/usage_tracking_step.jsx
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
-import Button from 'common/button/button';
+import { MailPoet } from 'mailpoet';
+import { Button } from 'common/button/button';
 import { Grid } from 'common/grid';
-import Heading from 'common/typography/heading/heading';
-import List from 'common/typography/list/list';
-import YesNo from 'common/form/yesno/yesno';
+import { Heading } from 'common/typography/heading/heading';
+import { List } from 'common/typography/list/list';
+import { YesNo } from 'common/form/yesno/yesno';
 
 function WelcomeWizardUsageTrackingStep({ loading, submitForm }) {
   const [state, setState] = useState({
@@ -154,4 +154,4 @@ WelcomeWizardUsageTrackingStep.propTypes = {
   submitForm: PropTypes.func.isRequired,
 };
 
-export default WelcomeWizardUsageTrackingStep;
+export { WelcomeWizardUsageTrackingStep };
diff --git a/mailpoet/assets/js/src/wizard/steps/woo_commerce_step.jsx b/mailpoet/assets/js/src/wizard/steps/woo_commerce_step.jsx
index 993f512efe..88e11be914 100644
--- a/mailpoet/assets/js/src/wizard/steps/woo_commerce_step.jsx
+++ b/mailpoet/assets/js/src/wizard/steps/woo_commerce_step.jsx
@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
+import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 
-import Button from '../../common/button/button';
-import Heading from '../../common/typography/heading/heading';
-import YesNo from '../../common/form/yesno/yesno';
+import { Button, TypographyHeading } from '../../common';
+import { YesNo } from '../../common/form/yesno/yesno';
 
 function WizardWooCommerceStep(props) {
   const [allowed, setAllowed] = useState(null);
@@ -32,7 +31,9 @@ function WizardWooCommerceStep(props) {
 
   return (
     <>
-      <Heading level={1}>{MailPoet.I18n.t('wooCommerceSetupTitle')}</Heading>
+      <TypographyHeading level={1}>
+        {MailPoet.I18n.t('wooCommerceSetupTitle')}
+      </TypographyHeading>
 
       <div className="mailpoet-gap" />
       <p>{MailPoet.I18n.t('wooCommerceSetupInfo')}</p>
@@ -135,4 +136,4 @@ WizardWooCommerceStep.defaultProps = {
   isWizardStep: false,
 };
 
-export default WizardWooCommerceStep;
+export { WizardWooCommerceStep };
diff --git a/mailpoet/assets/js/src/wizard/welcome_wizard_controller.jsx b/mailpoet/assets/js/src/wizard/welcome_wizard_controller.jsx
index 0791b4f8d9..ea33f4164d 100644
--- a/mailpoet/assets/js/src/wizard/welcome_wizard_controller.jsx
+++ b/mailpoet/assets/js/src/wizard/welcome_wizard_controller.jsx
@@ -1,23 +1,24 @@
 import PropTypes from 'prop-types';
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { partial } from 'underscore';
-import MailPoet from 'mailpoet';
-import WelcomeWizardSenderStep from './steps/sender_step.jsx';
-import WelcomeWizardMigratedUserStep from './steps/migrated_user_step.jsx';
-import WelcomeWizardEmailCourseStep from './steps/email_course_step.jsx';
-import WelcomeWizardUsageTrackingStep from './steps/usage_tracking_step.jsx';
-import WelcomeWizardPitchMSSStep from './steps/pitch_mss_step.jsx';
-import WooCommerceController from './woocommerce_controller.jsx';
-import WelcomeWizardStepLayout from './layout/step_layout.jsx';
 
-import CreateSenderSettings from './create_sender_settings.jsx';
+import { MailPoet } from 'mailpoet';
+import { WelcomeWizardSenderStep } from './steps/sender_step.jsx';
+import { WelcomeWizardMigratedUserStep } from './steps/migrated_user_step.jsx';
+import { WelcomeWizardEmailCourseStep } from './steps/email_course_step.jsx';
+import { WelcomeWizardUsageTrackingStep } from './steps/usage_tracking_step.jsx';
+import { WelcomeWizardPitchMSSStep } from './steps/pitch_mss_step.jsx';
+import { WooCommerceController } from './woocommerce_controller.jsx';
+import { WelcomeWizardStepLayout } from './layout/step_layout.jsx';
+
+import { createSenderSettings } from './create_sender_settings.jsx';
 import {
   getStepsCount,
-  redirectToNextStep,
   mapStepNumberToStepName,
+  redirectToNextStep,
 } from './steps_numbers.jsx';
-import Steps from '../common/steps/steps';
-import StepsContent from '../common/steps/steps_content';
+import { Steps } from '../common/steps/steps';
+import { StepsContent } from '../common/steps/steps_content';
 
 function WelcomeWizardStepsController(props) {
   const stepsCount = getStepsCount();
@@ -78,7 +79,7 @@ function WelcomeWizardStepsController(props) {
   );
 
   const submitSender = useCallback(() => {
-    updateSettings(CreateSenderSettings(sender)).then(() => redirect(step));
+    updateSettings(createSenderSettings(sender)).then(() => redirect(step));
   }, [redirect, sender, step]);
 
   const skipSenderStep = useCallback(
@@ -86,7 +87,7 @@ function WelcomeWizardStepsController(props) {
       e.preventDefault();
       setLoading(true);
       updateSettings(
-        CreateSenderSettings({ address: window.admin_email, name: '' }),
+        createSenderSettings({ address: window.admin_email, name: '' }),
       ).then(() => {
         if (window.is_woocommerce_active) {
           redirect(stepsCount - 1);
@@ -182,4 +183,4 @@ WelcomeWizardStepsController.propTypes = {
   }).isRequired,
 };
 
-export default WelcomeWizardStepsController;
+export { WelcomeWizardStepsController };
diff --git a/mailpoet/assets/js/src/wizard/wizard.jsx b/mailpoet/assets/js/src/wizard/wizard.jsx
index 5827ac91d3..14573be031 100644
--- a/mailpoet/assets/js/src/wizard/wizard.jsx
+++ b/mailpoet/assets/js/src/wizard/wizard.jsx
@@ -1,9 +1,9 @@
 import ReactDOM from 'react-dom';
 import { Route, HashRouter, Redirect, Switch } from 'react-router-dom';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
-import Notices from 'notices/notices.jsx';
-import WelcomeWizardStepsController from './welcome_wizard_controller.jsx';
-import WooCommerceController from './woocommerce_controller.jsx';
+import { Notices } from 'notices/notices.jsx';
+import { WelcomeWizardStepsController } from './welcome_wizard_controller.jsx';
+import { WooCommerceController } from './woocommerce_controller.jsx';
 
 function App() {
   let basePath = '/steps/1';
diff --git a/mailpoet/assets/js/src/wizard/woocommerce_controller.jsx b/mailpoet/assets/js/src/wizard/woocommerce_controller.jsx
index 3f2613d674..3c93944ef5 100644
--- a/mailpoet/assets/js/src/wizard/woocommerce_controller.jsx
+++ b/mailpoet/assets/js/src/wizard/woocommerce_controller.jsx
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import { useState } from 'react';
-import MailPoet from 'mailpoet';
-import StepsContent from 'common/steps/steps_content.tsx';
-import WooCommerceStep from './steps/woo_commerce_step.jsx';
-import WelcomeWizardStepLayout from './layout/step_layout.jsx';
+import { MailPoet } from 'mailpoet';
+import { StepsContent } from 'common/steps/steps_content.tsx';
+import { WizardWooCommerceStep } from './steps/woo_commerce_step.jsx';
+import { WelcomeWizardStepLayout } from './layout/step_layout.jsx';
 
 function WooCommerceController({ isWizardStep = false }) {
   const [loading, setLoading] = useState(false);
@@ -53,7 +53,7 @@ function WooCommerceController({ isWizardStep = false }) {
     <WelcomeWizardStepLayout
       illustrationUrl={window.wizard_woocommerce_illustration_url}
     >
-      <WooCommerceStep
+      <WizardWooCommerceStep
         loading={loading}
         submitForm={submit}
         isWizardStep={isWizardStep}
@@ -76,4 +76,4 @@ WooCommerceController.defaultProps = {
   isWizardStep: false,
 };
 
-export default WooCommerceController;
+export { WooCommerceController };
diff --git a/mailpoet/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/mailpoet/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
index 0c8f4dc2da..ebc5fbf268 100644
--- a/mailpoet/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import { partial } from 'lodash';
-import blocksToFormBodyFactory from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
+import { blocksToFormBodyFactory } from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
 import {
   emailBlock,
   lastNameBlock,
diff --git a/mailpoet/tests/javascript/form_editor/store/form_validator.spec.js b/mailpoet/tests/javascript/form_editor/store/form_validator.spec.js
index 01bb83f01d..48c3ff56fe 100644
--- a/mailpoet/tests/javascript/form_editor/store/form_validator.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/form_validator.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import validate from '../../../../assets/js/src/form_editor/store/form_validator.jsx';
+import { validateForm as validate } from '../../../../assets/js/src/form_editor/store/form_validator.jsx';
 
 const emailBlock = {
   clientId: 'email',
diff --git a/mailpoet/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js b/mailpoet/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js
index caaee60a02..080d1af0cb 100644
--- a/mailpoet/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/map_form_data_after_loading.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import map from '../../../../assets/js/src/form_editor/store/map_form_data_after_loading.jsx';
+import { mapFormDataAfterLoading as map } from '../../../../assets/js/src/form_editor/store/map_form_data_after_loading.jsx';
 
 const data = {
   id: '1',
diff --git a/mailpoet/tests/javascript/form_editor/store/map_form_data_before_saving.spec.js b/mailpoet/tests/javascript/form_editor/store/map_form_data_before_saving.spec.js
index 1ba16e2591..d75ce8808f 100644
--- a/mailpoet/tests/javascript/form_editor/store/map_form_data_before_saving.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/map_form_data_before_saving.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import map from '../../../../assets/js/src/form_editor/store/map_form_data_before_saving.jsx';
+import { mapFormDataBeforeSaving as map } from '../../../../assets/js/src/form_editor/store/map_form_data_before_saving.jsx';
 
 const data = {
   id: '1',
diff --git a/mailpoet/tests/javascript/form_editor/store/reducers/create_custom_field_started.spec.js b/mailpoet/tests/javascript/form_editor/store/reducers/create_custom_field_started.spec.js
index 857e81a26d..a2d681904d 100644
--- a/mailpoet/tests/javascript/form_editor/store/reducers/create_custom_field_started.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/reducers/create_custom_field_started.spec.js
@@ -1,12 +1,12 @@
 import { expect } from 'chai';
-import reducerFactory from '../../../../../assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx';
+import { createCustomFieldStartedFactory } from '../../../../../assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx';
 
 const MailPoetStub = {
   I18n: {
     t: () => 'Error [name]!',
   },
 };
-const reducer = reducerFactory(MailPoetStub);
+const reducer = createCustomFieldStartedFactory(MailPoetStub);
 
 const dummyCustomField = {
   name: 'My custom field',
diff --git a/mailpoet/tests/javascript/form_editor/store/reducers/save_form_started.spec.js b/mailpoet/tests/javascript/form_editor/store/reducers/save_form_started.spec.js
index 61914b0718..7030e71e2d 100644
--- a/mailpoet/tests/javascript/form_editor/store/reducers/save_form_started.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/reducers/save_form_started.spec.js
@@ -1,13 +1,13 @@
 import { expect } from 'chai';
 import { identity } from 'lodash';
-import reducerFactory from '../../../../../assets/js/src/form_editor/store/reducers/save_form_started.jsx';
+import { saveFormStartedFactory } from '../../../../../assets/js/src/form_editor/store/reducers/save_form_started.jsx';
 
 const MailPoetStub = {
   I18n: {
     t: identity,
   },
 };
-const reducer = reducerFactory(MailPoetStub);
+const reducer = saveFormStartedFactory(MailPoetStub);
 
 describe('Save Form Started Reducer', () => {
   let initialState = null;
diff --git a/mailpoet/tests/javascript/form_editor/store/reducers/toggle_sidebar_panel.spec.js b/mailpoet/tests/javascript/form_editor/store/reducers/toggle_sidebar_panel.spec.js
index 48a28197e0..6b128b33cf 100644
--- a/mailpoet/tests/javascript/form_editor/store/reducers/toggle_sidebar_panel.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/reducers/toggle_sidebar_panel.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import reducer from '../../../../../assets/js/src/form_editor/store/reducers/toggle_sidebar_panel.jsx';
+import { toggleSidebarPanel as reducer } from '../../../../../assets/js/src/form_editor/store/reducers/toggle_sidebar_panel.jsx';
 
 describe('Toggle Sidebar Panel Reducer', () => {
   let initialState = null;
diff --git a/mailpoet/tests/javascript/form_editor/store/selectors.spec.js b/mailpoet/tests/javascript/form_editor/store/selectors.spec.js
index fa5ff5ab92..0d5928f7ed 100644
--- a/mailpoet/tests/javascript/form_editor/store/selectors.spec.js
+++ b/mailpoet/tests/javascript/form_editor/store/selectors.spec.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import selectors from '../../../../assets/js/src/form_editor/store/selectors.jsx';
+import { selectors } from '../../../../assets/js/src/form_editor/store/selectors.jsx';
 
 describe('Selectors', () => {
   describe('getClosestParentAttribute', () => {
diff --git a/mailpoet/tests/javascript/form_editor/store/server_value_as_num.spec.ts b/mailpoet/tests/javascript/form_editor/store/server_value_as_num.spec.ts
index d7e25f071d..1da0b81601 100644
--- a/mailpoet/tests/javascript/form_editor/store/server_value_as_num.spec.ts
+++ b/mailpoet/tests/javascript/form_editor/store/server_value_as_num.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 
-import asNum from '../../../../assets/js/src/form_editor/store/server_value_as_num';
+import { asNum } from '../../../../assets/js/src/form_editor/store/server_value_as_num';
 
 describe('Server value as num', () => {
   it('Converts string to number', () => {
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/abandonedCartContent.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/abandonedCartContent.spec.js
index 1df2474f64..174d010a6f 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/abandonedCartContent.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/abandonedCartContent.spec.js
@@ -1,4 +1,4 @@
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import Communication from 'newsletter_editor/components/communication';
 import AbandonedCartContentBlock from 'newsletter_editor/blocks/abandonedCartContent';
 import ContainerBlock from 'newsletter_editor/blocks/container';
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/automatedLatestContentLayout.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/automatedLatestContentLayout.spec.js
index 850d6a6795..84c68cdc34 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/automatedLatestContentLayout.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/automatedLatestContentLayout.spec.js
@@ -1,7 +1,7 @@
-import App from 'newsletter_editor/App';
-import AutomatedLatestContentBlock from 'newsletter_editor/blocks/automatedLatestContentLayout';
-import ContainerBlock from 'newsletter_editor/blocks/container';
-import Communication from 'newsletter_editor/components/communication';
+import { App } from 'newsletter_editor/App';
+import { AutomatedLatestContentBlock } from 'newsletter_editor/blocks/automatedLatestContentLayout';
+import { ContainerBlock } from 'newsletter_editor/blocks/container';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
 
 /*  (ES6 -> CommonJS transform needed for inject-loader) */
 /* eslint-disable-next-line max-len  */
@@ -13,7 +13,6 @@ const Backbone = global.Backbone;
 const jQuery = global.jQuery;
 
 var EditorApplication = App;
-var CommunicationComponent = Communication;
 
 describe('Automated Latest Content Layout Supervisor', function () {
   var model;
@@ -37,9 +36,11 @@ describe('Automated Latest Content Layout Supervisor', function () {
 
     module = AutomatedLatestContentInjector({
       'newsletter_editor/components/communication': {
-        getBulkTransformedPosts: mock,
+        CommunicationComponent: {
+          getBulkTransformedPosts: mock,
+        },
       },
-    }).default;
+    }).AutomatedLatestContentBlock;
 
     model = new module.ALCLayoutSupervisor();
     model.refresh();
@@ -410,11 +411,13 @@ describe('Automated latest content layout', function () {
     before(function () {
       module = AutomatedLatestContentInjector({
         'newsletter_editor/components/communication': {
-          getPostTypes: function () {
-            return jQuery.Deferred();
+          CommunicationComponent: {
+            getPostTypes: function () {
+              return jQuery.Deferred();
+            },
           },
         },
-      }).default;
+      }).AutomatedLatestContentBlock;
     });
 
     before(function () {
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/button.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/button.spec.js
index e561b0f029..32439d9bff 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/button.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/button.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import ButtonBlock from 'newsletter_editor/blocks/button';
+import { App } from 'newsletter_editor/App';
+import { ButtonBlock } from 'newsletter_editor/blocks/button';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/container.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/container.spec.js
index 62eb14082a..25fc7d8b18 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/container.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/container.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import ContainerBlock from 'newsletter_editor/blocks/container';
+import { App } from 'newsletter_editor/App';
+import { ContainerBlock } from 'newsletter_editor/blocks/container';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/divider.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/divider.spec.js
index b85c032d66..67dcfcba95 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/divider.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/divider.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import DividerBlock from 'newsletter_editor/blocks/divider';
+import { App } from 'newsletter_editor/App';
+import { DividerBlock } from 'newsletter_editor/blocks/divider';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/footer.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/footer.spec.js
index 9666e24617..fe1fb73899 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/footer.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/footer.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import FooterBlock from 'newsletter_editor/blocks/footer';
+import { App } from 'newsletter_editor/App';
+import { FooterBlock } from 'newsletter_editor/blocks/footer';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/header.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/header.spec.js
index df83c8a735..cbdc2db41c 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/header.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/header.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import HeaderBlock from 'newsletter_editor/blocks/header';
+import { App } from 'newsletter_editor/App';
+import { HeaderBlock } from 'newsletter_editor/blocks/header';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/image.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/image.spec.js
index dbf6f98e78..bca2d9ac60 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/image.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/image.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import ImageBlock from 'newsletter_editor/blocks/image';
+import { App } from 'newsletter_editor/App';
+import { ImageBlock } from 'newsletter_editor/blocks/image';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/posts.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/posts.spec.js
index eac9b6051b..f8f4fda7f0 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/posts.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/posts.spec.js
@@ -1,7 +1,7 @@
-import App from 'newsletter_editor/App';
-import Communication from 'newsletter_editor/components/communication';
-import PostsBlock from 'newsletter_editor/blocks/posts';
-import ContainerBlock from 'newsletter_editor/blocks/container';
+import { App } from 'newsletter_editor/App';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { PostsBlock } from 'newsletter_editor/blocks/posts';
+import { ContainerBlock } from 'newsletter_editor/blocks/container';
 
 const expect = global.expect;
 const sinon = global.sinon;
@@ -9,7 +9,6 @@ const Backbone = global.Backbone;
 const jQuery = global.jQuery;
 
 var EditorApplication = App;
-var CommunicationComponent = Communication;
 
 describe('Posts', function () {
   Backbone.Radio = {
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/products.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/products.spec.js
index 2749aed8c7..3ccc10c40b 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/products.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/products.spec.js
@@ -1,7 +1,7 @@
-import App from 'newsletter_editor/App';
-import Communication from 'newsletter_editor/components/communication';
-import ProductsBlock from 'newsletter_editor/blocks/products';
-import ContainerBlock from 'newsletter_editor/blocks/container';
+import { App } from 'newsletter_editor/App';
+import { CommunicationComponent } from 'newsletter_editor/components/communication';
+import { ProductsBlock } from 'newsletter_editor/blocks/products';
+import { ContainerBlock } from 'newsletter_editor/blocks/container';
 
 const expect = global.expect;
 const sinon = global.sinon;
@@ -9,7 +9,6 @@ const Backbone = global.Backbone;
 const jQuery = global.jQuery;
 
 var EditorApplication = App;
-var CommunicationComponent = Communication;
 
 describe('Products', function () {
   Backbone.Radio = {
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/social.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/social.spec.js
index b6cbe97a6d..60dbc0cae7 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/social.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/social.spec.js
@@ -1,6 +1,6 @@
-import EditorApplication from 'newsletter_editor/App';
-import SocialBlock from 'newsletter_editor/blocks/social';
 import Backbone from 'backbone';
+import { App } from 'newsletter_editor/App';
+import { SocialBlock } from 'newsletter_editor/blocks/social';
 
 const expect = global.expect;
 const sinon = global.sinon;
@@ -11,8 +11,8 @@ describe('Social', function () {
     var sandbox;
 
     beforeEach(function () {
-      global.stubChannel(EditorApplication);
-      global.stubConfig(EditorApplication);
+      global.stubChannel(App);
+      global.stubConfig(App);
       model = new SocialBlock.SocialBlockModel();
       sandbox = sinon.createSandbox();
     });
@@ -34,7 +34,7 @@ describe('Social', function () {
     });
 
     it('uses defaults from config when they are set', function () {
-      global.stubConfig(EditorApplication, {
+      global.stubConfig(App, {
         blockDefaults: {
           social: {
             iconSet: 'customConfigIconSet',
@@ -47,7 +47,7 @@ describe('Social', function () {
     });
 
     it('updates blockDefaults.social when changed', function () {
-      var stub = sandbox.stub(EditorApplication.getConfig(), 'set');
+      var stub = sandbox.stub(App.getConfig(), 'set');
       model.trigger('change');
       expect(stub.callCount).to.equal(1);
       expect(stub.getCall(0).args[0]).to.equal('blockDefaults.social');
@@ -55,7 +55,7 @@ describe('Social', function () {
     });
 
     it('updates blockDefaults.social when icons changed', function () {
-      var stub = sandbox.stub(EditorApplication.getConfig(), 'set');
+      var stub = sandbox.stub(App.getConfig(), 'set');
       model.get('icons').trigger('change');
       expect(stub.callCount).to.equal(1);
       expect(stub.getCall(0).args[0]).to.equal('blockDefaults.social');
@@ -66,11 +66,11 @@ describe('Social', function () {
   describe('icon model', function () {
     var model;
     before(function () {
-      global.stubChannel(EditorApplication);
-      global.stubAvailableStyles(EditorApplication, {
+      global.stubChannel(App);
+      global.stubAvailableStyles(App, {
         'socialIconSets.default.custom': 'someimage.jpg',
       });
-      global.stubConfig(EditorApplication, {
+      global.stubConfig(App, {
         socialIcons: {
           custom: {
             defaultLink: 'http://example.org',
@@ -111,8 +111,8 @@ describe('Social', function () {
     var model;
 
     beforeEach(function () {
-      global.stubChannel(EditorApplication);
-      global.stubAvailableStyles(EditorApplication, {
+      global.stubChannel(App);
+      global.stubAvailableStyles(App, {
         socialIconSets: {
           default: {
             custom: 'http://www.sott.net/images/icons/big_x.png',
@@ -155,7 +155,7 @@ describe('Social', function () {
       var view;
 
       before(function () {
-        global.stubChannel(EditorApplication);
+        global.stubChannel(App);
         model = new SocialBlock.SocialBlockModel({
           type: 'social',
           iconSet: 'default',
@@ -217,8 +217,8 @@ describe('Social', function () {
     var model;
 
     beforeEach(function () {
-      global.stubChannel(EditorApplication);
-      global.stubAvailableStyles(EditorApplication, {
+      global.stubChannel(App);
+      global.stubAvailableStyles(App, {
         socialIconSets: {
           default: {
             custom: 'someimage.png',
@@ -261,8 +261,8 @@ describe('Social', function () {
     describe('once rendered', function () {
       var view;
       beforeEach(function () {
-        global.stubChannel(EditorApplication);
-        global.stubAvailableStyles(EditorApplication, {
+        global.stubChannel(App);
+        global.stubAvailableStyles(App, {
           socialIconSets: {
             default: {
               custom: 'http://www.sott.net/images/icons/big_x.png',
@@ -307,9 +307,7 @@ describe('Social', function () {
       it('updates icons in settings if iconset changes', function () {
         view.$('.mailpoet_social_icon_set').last().trigger('click');
         expect(view.$('.mailpoet_social_icon_field_image').val()).to.equal(
-          EditorApplication.getAvailableStyles().get(
-            'socialIconSets.light.custom',
-          ),
+          App.getAvailableStyles().get('socialIconSets.light.custom'),
         );
       });
 
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/spacer.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/spacer.spec.js
index cca024f9ce..98b07ca535 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/spacer.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/spacer.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import SpacerBlock from 'newsletter_editor/blocks/spacer';
+import { App } from 'newsletter_editor/App';
+import { SpacerBlock } from 'newsletter_editor/blocks/spacer';
 
 const expect = global.expect;
 const sinon = global.sinon;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/text.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/text.spec.js
index 31d92ee261..f6c88ad080 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/text.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/text.spec.js
@@ -1,5 +1,5 @@
-import EditorApplication from 'newsletter_editor/App';
-import TextBlock from 'newsletter_editor/blocks/text';
+import { App } from 'newsletter_editor/App';
+import { TextBlock } from 'newsletter_editor/blocks/text';
 
 const expect = global.expect;
 const sinon = global.sinon;
@@ -9,8 +9,8 @@ describe('Text', function () {
     var model;
     var sandbox;
     beforeEach(function () {
-      global.stubChannel(EditorApplication);
-      global.stubConfig(EditorApplication);
+      global.stubChannel(App);
+      global.stubConfig(App);
       model = new TextBlock.TextBlockModel();
       sandbox = sinon.createSandbox();
     });
@@ -28,7 +28,7 @@ describe('Text', function () {
     });
 
     it('uses defaults from config when they are set', function () {
-      global.stubConfig(EditorApplication, {
+      global.stubConfig(App, {
         blockDefaults: {
           text: {
             text: 'some custom config text',
@@ -41,7 +41,7 @@ describe('Text', function () {
     });
 
     it('do not update blockDefaults.text when changed', function () {
-      var stub = sandbox.stub(EditorApplication.getConfig(), 'set');
+      var stub = sandbox.stub(App.getConfig(), 'set');
       model.trigger('change');
       expect(stub.callCount).to.equal(0);
     });
@@ -50,7 +50,7 @@ describe('Text', function () {
   describe('block view', function () {
     var model;
     var view;
-    global.stubConfig(EditorApplication);
+    global.stubConfig(App);
     model = new TextBlock.TextBlockModel();
     view = new TextBlock.TextBlockView({ model: model });
 
@@ -63,7 +63,7 @@ describe('Text', function () {
       model = new TextBlock.TextBlockModel();
 
       beforeEach(function () {
-        global.stubConfig(EditorApplication);
+        global.stubConfig(App);
         view = new TextBlock.TextBlockView({ model: model });
         view.render();
       });
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/woocommerceContent.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/woocommerceContent.spec.js
index 7accd3e97c..ddda464885 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/woocommerceContent.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/blocks/woocommerceContent.spec.js
@@ -1,4 +1,4 @@
-import App from 'newsletter_editor/App';
+import { App } from 'newsletter_editor/App';
 import WCContentBlock from 'newsletter_editor/blocks/woocommerceContent';
 
 const expect = global.expect;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/communication.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/communication.spec.js
index 65fde7b2eb..6521d9aebf 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/communication.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/communication.spec.js
@@ -10,20 +10,22 @@ describe('getPostTypes', function () {
   it('fetches post types from the server', function () {
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: function () {
-            var deferred = jQuery.Deferred();
-            deferred.resolve({
-              data: {
-                post: 'val1',
-                page: 'val2',
-              },
-            });
-            return deferred;
+        MailPoet: {
+          Ajax: {
+            post: function () {
+              var deferred = jQuery.Deferred();
+              deferred.resolve({
+                data: {
+                  post: 'val1',
+                  page: 'val2',
+                },
+              });
+              return deferred;
+            },
           },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     module.getPostTypes().done(function (types) {
       expect(types).to.eql(['val1', 'val2']);
     });
@@ -38,11 +40,13 @@ describe('getPostTypes', function () {
       .returns(deferred);
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: mock,
+        MailPoet: {
+          Ajax: {
+            post: mock,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     deferred.resolve({
       post: 'val1',
       page: 'val2',
@@ -69,11 +73,13 @@ describe('getTaxonomies', function () {
     spy = sinon.spy(post);
     module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: spy,
+        MailPoet: {
+          Ajax: {
+            post: spy,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
 
     module.getTaxonomies('post');
     expect(spy.args[0][0].data.postType).to.equal('post');
@@ -82,19 +88,21 @@ describe('getTaxonomies', function () {
   it('fetches taxonomies from the server', function () {
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: function () {
-            var deferred = jQuery.Deferred();
-            deferred.resolve({
-              data: {
-                category: 'val1',
-              },
-            });
-            return deferred;
+        MailPoet: {
+          Ajax: {
+            post: function () {
+              var deferred = jQuery.Deferred();
+              deferred.resolve({
+                data: {
+                  category: 'val1',
+                },
+              });
+              return deferred;
+            },
           },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     module.getTaxonomies('page').done(function (types) {
       expect(types).to.eql({ category: 'val1' });
     });
@@ -109,11 +117,13 @@ describe('getTaxonomies', function () {
       .returns(deferred);
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: mock,
+        MailPoet: {
+          Ajax: {
+            post: mock,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     deferred.resolve({ category: 'val1' });
     module.getTaxonomies('page');
     module.getTaxonomies('page');
@@ -134,11 +144,13 @@ describe('getTerms', function () {
     spy = sinon.spy(post);
     module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: spy,
+        MailPoet: {
+          Ajax: {
+            post: spy,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
 
     module.getTerms({
       taxonomies: ['category', 'post_tag'],
@@ -149,20 +161,22 @@ describe('getTerms', function () {
   it('fetches terms from the server', function () {
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: function () {
-            var deferred = jQuery.Deferred();
-            deferred.resolve({
-              data: {
-                term1: 'term1val1',
-                term2: 'term2val2',
-              },
-            });
-            return deferred;
+        MailPoet: {
+          Ajax: {
+            post: function () {
+              var deferred = jQuery.Deferred();
+              deferred.resolve({
+                data: {
+                  term1: 'term1val1',
+                  term2: 'term2val2',
+                },
+              });
+              return deferred;
+            },
           },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     module.getTerms({ taxonomies: ['category'] }).done(function (types) {
       expect(types).to.eql({ term1: 'term1val1', term2: 'term2val2' });
     });
@@ -177,11 +191,13 @@ describe('getTerms', function () {
       .returns(deferred);
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: mock,
+        MailPoet: {
+          Ajax: {
+            post: mock,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     deferred.resolve({ term1: 'term1val1', term2: 'term2val2' });
     module.getTerms({ taxonomies: ['category'] });
     module.getTerms({ taxonomies: ['category'] });
@@ -202,11 +218,13 @@ describe('getPosts', function () {
     spy = sinon.spy(post);
     module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: spy,
+        MailPoet: {
+          Ajax: {
+            post: spy,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
 
     module.getPosts({
       type: 'posts',
@@ -221,17 +239,22 @@ describe('getPosts', function () {
   it('fetches posts from the server', function () {
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: function () {
-            var deferred = jQuery.Deferred();
-            deferred.resolve({
-              data: [{ post_title: 'title 1' }, { post_title: 'post title 2' }],
-            });
-            return deferred;
+        MailPoet: {
+          Ajax: {
+            post: function () {
+              var deferred = jQuery.Deferred();
+              deferred.resolve({
+                data: [
+                  { post_title: 'title 1' },
+                  { post_title: 'post title 2' },
+                ],
+              });
+              return deferred;
+            },
           },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     module.getPosts().done(function (posts) {
       expect(posts).to.eql([
         { post_title: 'title 1' },
@@ -249,11 +272,13 @@ describe('getPosts', function () {
       .returns(deferred);
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: mock,
+        MailPoet: {
+          Ajax: {
+            post: mock,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     deferred.resolve({
       type: 'posts',
       search: 'some search term',
@@ -277,11 +302,13 @@ describe('getTransformedPosts', function () {
     spy = sinon.spy(post);
     module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: spy,
+        MailPoet: {
+          Ajax: {
+            post: spy,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
 
     module.getTransformedPosts({
       type: 'posts',
@@ -296,20 +323,22 @@ describe('getTransformedPosts', function () {
   it('fetches transformed posts from the server', function () {
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: function () {
-            var deferred = jQuery.Deferred();
-            deferred.resolve({
-              data: [
-                { type: 'text', text: 'something' },
-                { type: 'text', text: 'something else' },
-              ],
-            });
-            return deferred;
+        MailPoet: {
+          Ajax: {
+            post: function () {
+              var deferred = jQuery.Deferred();
+              deferred.resolve({
+                data: [
+                  { type: 'text', text: 'something' },
+                  { type: 'text', text: 'something else' },
+                ],
+              });
+              return deferred;
+            },
           },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     module.getTransformedPosts().done(function (posts) {
       expect(posts).to.eql([
         { type: 'text', text: 'something' },
@@ -327,11 +356,13 @@ describe('getTransformedPosts', function () {
       .returns(deferred);
     var module = CommunicationInjector({
       mailpoet: {
-        Ajax: {
-          post: mock,
+        MailPoet: {
+          Ajax: {
+            post: mock,
+          },
         },
       },
-    }).default;
+    }).CommunicationComponent;
     deferred.resolve({
       type: 'posts',
       posts: [1, 3],
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/config.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/config.spec.js
index 2c5e674b8a..033761d767 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/config.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/config.spec.js
@@ -1,4 +1,4 @@
-import ConfigComponent from 'newsletter_editor/components/config';
+import { ConfigComponent } from 'newsletter_editor/components/config';
 
 const expect = global.expect;
 
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/content.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/content.spec.js
index 869f314a53..4203db7e8d 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/content.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/content.spec.js
@@ -1,13 +1,11 @@
-import App from 'newsletter_editor/App';
-import ContentComponent from 'newsletter_editor/components/content';
+import { App } from 'newsletter_editor/App';
+import { ContentComponent } from 'newsletter_editor/components/content';
 
 const expect = global.expect;
 const sinon = global.sinon;
 const Backbone = global.Backbone;
 const _ = global._;
 
-var EditorApplication = App;
-
 describe('Content', function () {
   describe('newsletter model', function () {
     var model;
@@ -34,7 +32,7 @@ describe('Content', function () {
         .expects('trigger')
         .once()
         .withArgs('autoSave');
-      global.stubChannel(EditorApplication, {
+      global.stubChannel(App, {
         trigger: mock,
       });
       model.set('subject', 'another test subject');
@@ -103,26 +101,26 @@ describe('Content', function () {
       var blockDefaults = {
         button: {},
       };
-      EditorApplication._contentContainer = {
+      App._contentContainer = {
         toJSON: function () {
           return dataField;
         },
       };
-      EditorApplication.getGlobalStyles = function () {
+      App.getGlobalStyles = function () {
         return {
           toJSON: function () {
             return stylesField;
           },
         };
       };
-      EditorApplication.getNewsletter = function () {
+      App.getNewsletter = function () {
         return {
           toJSON: function () {
             return newsletterFields;
           },
         };
       };
-      EditorApplication.getConfig().set('blockDefaults', blockDefaults);
+      App.getConfig().set('blockDefaults', blockDefaults);
       json = ContentComponent.toJSON();
       expect(json).to.deep.equal(
         _.extend(
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/heading.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/heading.spec.js
index 87df49a481..83461c106c 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/heading.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/heading.spec.js
@@ -1,4 +1,4 @@
-import HeadingComponent from 'newsletter_editor/components/heading';
+import { HeadingComponent } from 'newsletter_editor/components/heading';
 
 const expect = global.expect;
 const Backbone = global.Backbone;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/history.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/history.spec.js
index 483592edf6..17cef1188d 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/history.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/history.spec.js
@@ -1,4 +1,4 @@
-import HistoryComponent from 'newsletter_editor/components/history';
+import { HistoryComponent } from 'newsletter_editor/components/history';
 
 const expect = global.expect;
 
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/save.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/save.spec.js
index 82a9d90280..440e0157d3 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/save.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/save.spec.js
@@ -1,5 +1,5 @@
-import App from 'newsletter_editor/App';
-import SaveComponent from 'newsletter_editor/components/save';
+import { App } from 'newsletter_editor/App';
+import { SaveComponent } from 'newsletter_editor/components/save';
 import jQuery from 'jquery';
 
 /* (ES6 -> CommonJS transform needed for inject-loader) */
@@ -10,27 +10,27 @@ const expect = global.expect;
 const sinon = global.sinon;
 const Backbone = global.Backbone;
 
-var EditorApplication = App;
-
 describe('Save', function () {
   describe('save method', function () {
     var module;
     before(function () {
       module = SaveInjector({
         'newsletter_editor/components/communication': {
-          saveNewsletter: function () {
-            return jQuery.Deferred();
+          CommunicationComponent: {
+            saveNewsletter: function () {
+              return jQuery.Deferred();
+            },
           },
         },
-      }).default;
+      }).SaveComponent;
     });
 
     it('triggers beforeEditorSave event', function () {
       var spy = sinon.spy();
-      global.stubChannel(EditorApplication, {
+      global.stubChannel(App, {
         trigger: spy,
       });
-      EditorApplication.toJSON = sinon.stub().returns({
+      App.toJSON = sinon.stub().returns({
         body: {
           type: 'container',
         },
@@ -44,19 +44,21 @@ describe('Save', function () {
       var innerModule;
       var spy = sinon.spy();
       var promise = jQuery.Deferred();
-      global.stubChannel(EditorApplication, {
+      global.stubChannel(App, {
         trigger: spy,
       });
-      EditorApplication.toJSON = sinon.stub().returns({
+      App.toJSON = sinon.stub().returns({
         body: {
           type: 'container',
         },
       });
       innerModule = SaveInjector({
         'newsletter_editor/components/communication': {
-          saveNewsletter: sinon.stub().returns(promise),
+          CommunicationComponent: {
+            saveNewsletter: sinon.stub().returns(promise),
+          },
         },
-      }).default;
+      }).SaveComponent;
       promise.resolve({ success: true });
       innerModule.save();
       expect(spy.withArgs('afterEditorSave').calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
@@ -66,12 +68,14 @@ describe('Save', function () {
       var mock = sinon.mock().once().returns(jQuery.Deferred());
       var innerModule = SaveInjector({
         'newsletter_editor/components/communication': {
-          saveNewsletter: mock,
+          CommunicationComponent: {
+            saveNewsletter: mock,
+          },
         },
-      }).default;
-      global.stubChannel(EditorApplication);
+      }).SaveComponent;
+      global.stubChannel(App);
 
-      EditorApplication.toJSON = sinon.stub().returns({});
+      App.toJSON = sinon.stub().returns({});
       innerModule.save();
 
       mock.verify();
@@ -87,16 +91,18 @@ describe('Save', function () {
           body: JSON.stringify(body),
         })
         .returns(jQuery.Deferred());
-      global.stubChannel(EditorApplication);
+      global.stubChannel(App);
 
-      EditorApplication.toJSON = sinon.stub().returns({
+      App.toJSON = sinon.stub().returns({
         body: body,
       });
       innerModule = SaveInjector({
         'newsletter_editor/components/communication': {
-          saveNewsletter: mock,
+          CommunicationComponent: {
+            saveNewsletter: mock,
+          },
         },
-      }).default;
+      }).SaveComponent;
       innerModule.save();
 
       mock.verify();
@@ -115,11 +121,11 @@ describe('Save', function () {
       var newsletter = {
         get: sinon.stub().withArgs('type').returns('newsletter'),
       };
-      EditorApplication._contentContainer = {
+      App._contentContainer = {
         isValid: sinon.stub().returns(true),
       };
-      global.stubConfig(EditorApplication);
-      EditorApplication.getNewsletter = sinon.stub().returns(newsletter);
+      global.stubConfig(App);
+      App.getNewsletter = sinon.stub().returns(newsletter);
     });
 
     it('renders', function () {
@@ -154,7 +160,7 @@ describe('Save', function () {
         var newsletter = {
           get: sinon.stub().withArgs('type').returns('notification'),
         };
-        EditorApplication.getNewsletter = sinon.stub().returns(newsletter);
+        App.getNewsletter = sinon.stub().returns(newsletter);
         view.validateNewsletter({
           body: {
             content: {
@@ -170,7 +176,7 @@ describe('Save', function () {
           get: sinon.stub().withArgs('type').returns('notification'),
         };
         var showValidationErrorStub = sinon.stub(view, 'showValidationError');
-        EditorApplication.getNewsletter = sinon.stub().returns(newsletter);
+        App.getNewsletter = sinon.stub().returns(newsletter);
         view.validateNewsletter(validNewsletter);
         expect(showValidationErrorStub.callCount).to.be.equal(1);
       });
@@ -180,7 +186,7 @@ describe('Save', function () {
       var view;
       var model;
       beforeEach(function () {
-        EditorApplication._contentContainer = {
+        App._contentContainer = {
           isValid: sinon.stub().returns(true),
         };
         model = new Backbone.SuperModel({});
@@ -197,7 +203,7 @@ describe('Save', function () {
           .expects('request')
           .once()
           .withArgs('save');
-        global.stubChannel(EditorApplication, {
+        global.stubChannel(App, {
           request: mock,
         });
         view.$('.mailpoet_save_button').trigger('click');
@@ -227,8 +233,8 @@ describe('Save', function () {
         };
         promiseMock.catch = promiseMock.then;
 
-        EditorApplication.getBody = sinon.stub();
-        EditorApplication.getNewsletter = function () {
+        App.getBody = sinon.stub();
+        App.getNewsletter = function () {
           return {
             get: function () {
               return 'standard';
@@ -237,27 +243,29 @@ describe('Save', function () {
         };
         module = SaveInjector({
           mailpoet: {
-            Ajax: {
-              post: mock,
-            },
-            I18n: {
-              t: function () {
-                return '';
+            MailPoet: {
+              Ajax: {
+                post: mock,
               },
+              I18n: {
+                t: function () {
+                  return '';
+                },
+              },
+              Notice: {
+                success: function () {},
+                error: function () {},
+              },
+              trackEvent: function () {},
             },
-            Notice: {
-              success: function () {},
-              error: function () {},
-            },
-            trackEvent: function () {},
           },
-          'newsletter_editor/App': EditorApplication,
+          'newsletter_editor/App': { App },
           'common/thumbnail.ts': {
             fromNewsletter: function () {
               return promiseMock;
             },
           },
-        }).default;
+        }).SaveComponent;
         model = new Backbone.SuperModel({});
         model.isWoocommerceTransactional = function () {
           return false;
@@ -278,12 +286,14 @@ describe('Save', function () {
         var spy = sinon.spy();
         var module = SaveInjector({
           'newsletter_editor/components/communication': {
-            saveNewsletter: function () {
-              return jQuery.Deferred();
+            CommunicationComponent: {
+              saveNewsletter: function () {
+                return jQuery.Deferred();
+              },
             },
           },
-        }).default;
-        global.stubChannel(EditorApplication, {
+        }).SaveComponent;
+        global.stubChannel(App, {
           trigger: spy,
         });
         model = new Backbone.SuperModel({});
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/sidebar.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/sidebar.spec.js
index e41cf300b8..68603469dc 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/sidebar.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/sidebar.spec.js
@@ -1,4 +1,4 @@
-import SidebarComponent from 'newsletter_editor/components/sidebar';
+import { SidebarComponent } from 'newsletter_editor/components/sidebar';
 
 const expect = global.expect;
 const Backbone = global.Backbone;
diff --git a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/styles.spec.js b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/styles.spec.js
index 0698fb99d9..1a22eff543 100644
--- a/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/styles.spec.js
+++ b/mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/styles.spec.js
@@ -1,11 +1,9 @@
-import App from 'newsletter_editor/App';
-import StylesComponent from 'newsletter_editor/components/styles';
+import { App } from 'newsletter_editor/App';
+import { StylesComponent } from 'newsletter_editor/components/styles';
 
 const expect = global.expect;
 const sinon = global.sinon;
 
-var EditorApplication = App;
-
 describe('Styles', function () {
   it('loads and stores globally available styles', function () {
     var model;
@@ -28,7 +26,7 @@ describe('Styles', function () {
         .expects('trigger')
         .once()
         .withExactArgs('autoSave');
-      EditorApplication.getChannel = function () {
+      App.getChannel = function () {
         return {
           on: function () {},
           trigger: mock,