diff --git a/samples/react-chartcontrol/src/services/ChartDataProvider/MockChartDataProvider.ts b/samples/react-chartcontrol/src/services/ChartDataProvider/MockChartDataProvider.ts
index 45ec62e5f..bc51f92b3 100644
--- a/samples/react-chartcontrol/src/services/ChartDataProvider/MockChartDataProvider.ts
+++ b/samples/react-chartcontrol/src/services/ChartDataProvider/MockChartDataProvider.ts
@@ -5,7 +5,7 @@ const FAKE_DELAY: number = 500;
 /**
  * Returns an array of chart points (x,y)
  */
-export default class MockChartDataProvider implements IChartDataProvider {
+export class MockChartDataProvider implements IChartDataProvider {
   public getSignedNumberArray(length: number): Promise<number[]> {
     return new Promise<number[]>((resolve) => {
       // pretend we're getting the data from a service
diff --git a/samples/react-chartcontrol/src/services/GitHubService/GitHubService.ts b/samples/react-chartcontrol/src/services/GitHubService/GitHubService.ts
index 7af2bdc38..3a36741f5 100644
--- a/samples/react-chartcontrol/src/services/GitHubService/GitHubService.ts
+++ b/samples/react-chartcontrol/src/services/GitHubService/GitHubService.ts
@@ -1,7 +1,7 @@
 import { IGitHubService, IGitHubContributor, IAuthorCommit } from "./IGitHubService.types";
 import { HttpClient, HttpClientResponse } from '@microsoft/sp-http';
 
-export default class GitHubService implements IGitHubService {
+export  class GitHubService implements IGitHubService {
   /**
    * Gets a list of github commits in a repo for a single contributor
    * @param client the HttpClient object that will make the call
diff --git a/samples/react-chartcontrol/src/services/ListService/MockListService.ts b/samples/react-chartcontrol/src/services/ListService/MockListService.ts
index d8212c199..4b890daa0 100644
--- a/samples/react-chartcontrol/src/services/ListService/MockListService.ts
+++ b/samples/react-chartcontrol/src/services/ListService/MockListService.ts
@@ -2,7 +2,7 @@ import { IListService } from "./IListService";
 import { IListField } from "./IListField";
 import { IListItem } from "./IListItem";
 import { ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
-import MockChartDataProvider from "../ChartDataProvider/MockChartDataProvider";
+import { MockChartDataProvider } from "../ChartDataProvider/MockChartDataProvider";
 import IChartDataProvider from "../ChartDataProvider/IChartDataProvider";
 import { ChartPoint } from 'chart.js';
 
diff --git a/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts b/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts
index 27ae1113c..f6af84ed3 100644
--- a/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/accessibleTable/AccessibleTableWebPart.ts
@@ -5,7 +5,7 @@ import { BaseClientSideWebPart,  } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
 
 import * as strings from 'AccessibleTableWebPartStrings';
-import AccessibleTable from './components/AccessibleTable';
+import { AccessibleTable } from './components/AccessibleTable';
 import { IAccessibleTableProps } from './components/IAccessibleTable.types';
 
 import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
@@ -18,7 +18,7 @@ export interface IAccessibleTableWebPartProps {
   datasetlabel: string;
 }
 
-export default class AccessibleTableWebPart extends BaseClientSideWebPart<IAccessibleTableWebPartProps> {
+export class AccessibleTableWebPart extends BaseClientSideWebPart<IAccessibleTableWebPartProps> {
    public render(): void {
     const element: React.ReactElement<IAccessibleTableProps> = React.createElement(
       AccessibleTable,
@@ -37,10 +37,6 @@ export default class AccessibleTableWebPart extends BaseClientSideWebPart<IAcces
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx b/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
index 83698c223..252f156d7 100644
--- a/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
+++ b/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
@@ -8,9 +8,9 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 
 import { ChartControl, ChartType, OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
 
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
-export default class AccessibleTable extends React.Component<IAccessibleTableProps, {}> {
+export  class AccessibleTable extends React.Component<IAccessibleTableProps, {}> {
   public render(): React.ReactElement<IAccessibleTableProps> {
 
     return (
diff --git a/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts
index 33ec2a80f..7279400e9 100644
--- a/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/areaChartDemo/AreaChartDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'AreaChartDemoWebPartStrings';
-import AreaChartDemo from './components/AreaChartDemo';
+import { AreaChartDemo } from './components/AreaChartDemo';
 import { IAreaChartDemoProps } from './components/IAreaChartDemo.types';
 
 export interface IAreaChartDemoWebPartProps {
   description: string;
 }
 
-export default class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaChartDemoWebPartProps> {
+export class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IAreaChartDemoProps > = React.createElement(
@@ -29,10 +29,6 @@ export default class AreaChartDemoWebPart extends BaseClientSideWebPart<IAreaCha
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx b/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx
index 1086f4533..cdcdc3362 100644
--- a/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx
@@ -8,7 +8,7 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
 import { ChartDataSets, ChartData, ChartOptions } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 // used to render the toolbar above the chart
 import {
@@ -26,7 +26,7 @@ This demo shows the following:
 - Generate a gradient for a background color
 - Change the fill value
  */
-export default class AreaChartDemo extends React.Component<IAreaChartDemoProps, IAreaChartDemoState> {
+export  class AreaChartDemo extends React.Component<IAreaChartDemoProps, IAreaChartDemoState> {
   /**
 * The chart element
 */
diff --git a/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts
index 41cbde9d6..ac47b3640 100644
--- a/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/barChartDemo/BarChartDemoWebPart.ts
@@ -5,7 +5,7 @@ import { Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart,  } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
-import BarChartDemo from './components/BarChartDemo';
+import { BarChartDemo } from './components/BarChartDemo';
 import { IBarChartDemoProps } from './components/IBarChartDemo.types';
 
 export interface IBarChartDemoWebPartProps {
@@ -17,7 +17,7 @@ export interface IBarChartDemoWebPartProps {
  * and rendering the chart once the data has been retrieved.
  * To keep the demo simple, we don't specify custom colors.
  */
-export default class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChartDemoWebPartProps> {
+export  class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChartDemoWebPartProps> {
 
   public render(): void {
 
@@ -35,10 +35,6 @@ export default class BarChartDemoWebPart extends BaseClientSideWebPart<IBarChart
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx b/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx
index 33b6c5b04..c0e734656 100644
--- a/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './BarChartDemo.module.scss';
 import * as strings from 'BarChartDemoWebPartStrings';
 import { IBarChartDemoProps, IBarChartDemoState } from './IBarChartDemo.types';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 
@@ -16,7 +16,7 @@ const DATA_LENGTH: number = 7;
  * and display the results, rendering a "please wait" message while
  * data is loading.
  */
-export default class BarChartDemo extends React.Component<IBarChartDemoProps, IBarChartDemoState> {
+export class BarChartDemo extends React.Component<IBarChartDemoProps, IBarChartDemoState> {
   /**
    * Renders the "Loading" spinner if the state is currently loading,
    * or the chart once data is loladed
diff --git a/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts b/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts
index 629c1a9aa..a858ed90d 100644
--- a/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/barChartStatic/BarChartStaticWebPart.ts
@@ -5,14 +5,14 @@ import { BaseClientSideWebPart,  } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 import * as strings from 'BarChartStaticWebPartStrings';
-import BarChartStatic from './components/BarChartStatic';
+import { BarChartStatic } from './components/BarChartStatic';
 import { IBarChartStaticProps } from './components/IBarChartStaticProps';
 
 export interface IBarChartStaticWebPartProps {
   description: string;
 }
 
-export default class BarChartStaticWebPart extends BaseClientSideWebPart<IBarChartStaticWebPartProps> {
+export class BarChartStaticWebPart extends BaseClientSideWebPart<IBarChartStaticWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IBarChartStaticProps > = React.createElement(
@@ -29,10 +29,6 @@ export default class BarChartStaticWebPart extends BaseClientSideWebPart<IBarCha
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/barChartStatic/components/BarChartStatic.tsx b/samples/react-chartcontrol/src/webparts/barChartStatic/components/BarChartStatic.tsx
index 79d96ae22..274724729 100644
--- a/samples/react-chartcontrol/src/webparts/barChartStatic/components/BarChartStatic.tsx
+++ b/samples/react-chartcontrol/src/webparts/barChartStatic/components/BarChartStatic.tsx
@@ -12,7 +12,7 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
  * this sample as simple as possible.
  * @see https://www.chartjs.org/docs/latest/ for the original sample code.
  */
-export default class BarChartStatic extends React.Component<IBarChartStaticProps, {}> {
+export  class BarChartStatic extends React.Component<IBarChartStaticProps, {}> {
   public render(): React.ReactElement<IBarChartStaticProps> {
     return (
       <div className={styles.barChartStatic}>
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts
index 1ac2f9774..527f0f91c 100644
--- a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/BubbleChartDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'BubbleChartDemoWebPartStrings';
-import BubbleChartDemo from './components/BubbleChartDemo';
+import { BubbleChartDemo } from './components/BubbleChartDemo';
 import { IBubbleChartDemoProps } from './components/IBubbleChartDemo.types';
 
 export interface IBubbleChartDemoWebPartProps {
   description: string;
 }
 
-export default class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbleChartDemoWebPartProps> {
+export  class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbleChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IBubbleChartDemoProps > = React.createElement(
@@ -29,10 +29,6 @@ export default class BubbleChartDemoWebPart extends BaseClientSideWebPart<IBubbl
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx
index fb1bdf781..a34903c20 100644
--- a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx
@@ -9,7 +9,7 @@ import { ChartPoint, ChartData } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 // used to render the toolbar above the chart
 import {
@@ -37,7 +37,7 @@ const DATA_COUNT: number = 16;
 const DATSET_LENGTH: number = 2;
 const MAX_BORDERWIDTH: number = 8;
 
-export default class BubbleChartDemo extends React.Component<IBubbleChartDemoProps, {}> {
+export  class BubbleChartDemo extends React.Component<IBubbleChartDemoProps, {}> {
   /**
  * The chart element
  */
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
index 8bb117d2b..a2670c1c7 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
@@ -25,7 +25,7 @@ import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHe
 import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
 
 // Component that actually renders the web part content
-import Chartinator from './components/Chartinator';
+import { Chartinator } from './components/Chartinator';
 import { IChartinatorProps, DataSourceType } from './components/Chartinator.types';
 
 // Needed to generate unique data row ids
@@ -68,7 +68,7 @@ const DEFAULT_CIRCUMFERENCE: number = 100;
 const DEFAULT_CHARTROTATION: number = -180;
 const DEFAULT_POINTRADIUS = 3;
 
-export default class ChartinatorWebPart extends BaseClientSideWebPart<IChartinatorWebPartProps> {
+export class ChartinatorWebPart extends BaseClientSideWebPart<IChartinatorWebPartProps> {
   private _fields: IListField[];
 
   /**
@@ -138,13 +138,6 @@ export default class ChartinatorWebPart extends BaseClientSideWebPart<IChartinat
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  /**
-   * Returns the data version
-   */
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   /**
    * Initializes properties for the web part.
    * You could absolutely replace this function with
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx
index defc1807a..c1a8655f2 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/components/Chartinator.tsx
@@ -22,7 +22,7 @@ import { DashStrokes } from '../controls/PropertyPaneDashSelector/components/Das
 // List methods to retrieve data
 import { IListService, ListService, IListItem, MockListService } from '../../../services/ListService';
 
-export default class Chartinator extends React.Component<IChartinatorProps, {}> {
+export class Chartinator extends React.Component<IChartinatorProps, {}> {
   /**
 * The chart element
 */
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts
index 5ca9d2acd..d697cf6bf 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts
@@ -5,7 +5,7 @@ import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-propert
 import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 import { IChartPaletteSelectorProps } from './components/ChartPaletteSelector.types';
-import ChartPaletteSelector from './components/ChartPaletteSelector';
+import { ChartPaletteSelector } from './components/ChartPaletteSelector';
 import {
   IPropertyPaneChartPaletteSelectorProps,
   IPropertyPaneChartPaletteSelectorInternalProps,
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
index dab0e05d1..505a5c5ed 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
@@ -11,7 +11,7 @@ import { IChartPaletteSelectorProps, IChartPaletteSelectorState } from './ChartP
 /**
  * Displays a list of palette colours
  */
-export default class ChartPaletteSelector extends React.Component<IChartPaletteSelectorProps, IChartPaletteSelectorState> {
+export  class ChartPaletteSelector extends React.Component<IChartPaletteSelectorProps, IChartPaletteSelectorState> {
   constructor(props: IChartPaletteSelectorProps) {
     super(props);
     this.state = {
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
index bf337d78c..37235cd73 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
@@ -5,7 +5,7 @@ import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-propert
 import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 import { IDashSelectorProps } from './components/DashSelector.types';
-import DashSelector from './components/DashSelector';
+import { DashSelector } from './components/DashSelector';
 import {
   IPropertyPaneDashSelectorProps,
   IPropertyPaneDashSelectorInternalProps,
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
index 3207c5385..cebafd35e 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
@@ -12,7 +12,7 @@ import { IDashSelectorProps, IDashSelectorState } from './DashSelector.types';
  * Displays a list of dash options.
  *
  */
-export default class DashSelector extends React.Component<IDashSelectorProps, IDashSelectorState> {
+export  class DashSelector extends React.Component<IDashSelectorProps, IDashSelectorState> {
   /**
    *
    */
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
index b00f57685..3a3d295db 100644
--- a/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/ComboChartDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'ComboChartDemoWebPartStrings';
-import ComboChartDemo from './components/ComboChartDemo';
+import { ComboChartDemo } from './components/ComboChartDemo';
 import { IComboChartDemoProps } from './components/IComboChartDemo.types';
 
 export interface IComboChartDemoWebPartProps {
   description: string;
 }
 
-export default class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboChartDemoWebPartProps> {
+export  class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IComboChartDemoProps > = React.createElement(
@@ -29,10 +29,6 @@ export default class ComboChartDemoWebPart extends BaseClientSideWebPart<IComboC
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx
index 759506716..fe1e57488 100644
--- a/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/comboChartDemo/components/ComboChartDemo.tsx
@@ -7,12 +7,12 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
 import { ChartData } from 'chart.js';
 
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 const DATA_LENGTH: number = 7;
 const DATASET_LENGTH: number = 3;
 
-export default class ComboChartDemo extends React.Component<IComboChartDemoProps, {}> {
+export  class ComboChartDemo extends React.Component<IComboChartDemoProps, {}> {
 
   /**
   * Renders the command bar and the chart
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
index 59e5b539b..7ea3deb42 100644
--- a/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/CustomPluginDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'CustomPluginDemoWebPartStrings';
-import CustomPluginDemo from './components/CustomPluginDemo';
+import { CustomPluginDemo } from './components/CustomPluginDemo';
 import { ICustomPluginDemoProps } from './components/ICustomPluginDemo,types';
 
 export interface ICustomPluginDemoWebPartProps {
   description: string;
 }
 
-export default class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICustomPluginDemoWebPartProps> {
+export  class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICustomPluginDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<ICustomPluginDemoProps > = React.createElement(
@@ -30,10 +30,6 @@ export default class CustomPluginDemoWebPart extends BaseClientSideWebPart<ICust
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx
index 9a2c40742..6aa5be871 100644
--- a/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/customPluginDemo/components/CustomPluginDemo.tsx
@@ -145,7 +145,7 @@ const chartOptions: any = {
   }
 };
 
-export default class CustomPluginDemo extends React.Component<ICustomPluginDemoProps, {}> {
+export class CustomPluginDemo extends React.Component<ICustomPluginDemoProps, {}> {
 
   /**
    * Renders the (static) donut chart with the plugins passed in
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
index 688312255..a782da010 100644
--- a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/DonutPatternsDemoWebPart.ts
@@ -7,14 +7,14 @@ import { BaseClientSideWebPart,  } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
-import DonutPatternsDemo from './components/DonutPatternsDemo';
+import { DonutPatternsDemo } from './components/DonutPatternsDemo';
 import { IDonutPatternsDemoProps } from './components/IDonutPatternsDemo.types';
 
 export interface IDonutPatternsDemoWebPartProps {
   description: string;
 }
 
-export default class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDonutPatternsDemoWebPartProps> {
+export class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDonutPatternsDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IDonutPatternsDemoProps > = React.createElement(
@@ -30,10 +30,6 @@ export default class DonutPatternsDemoWebPart extends BaseClientSideWebPart<IDon
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
index 37d6afaf0..3582bf3c1 100644
--- a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
@@ -3,7 +3,7 @@ import styles from './DonutPatternsDemo.module.scss';
 import { IDonutPatternsDemoProps, IDonutPatternsDemoState } from './IDonutPatternsDemo.types';
 import * as strings from 'DonutPatternsDemoWebPartStrings';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 // Patternomaly is used to render patterns
@@ -57,7 +57,7 @@ const patterns: CanvasPattern[] = [
  * call the update methods to get access to and modified the data without
  * refreshing the entire web part
  */
-export default class DonutPatternsDemo extends React.Component<IDonutPatternsDemoProps, IDonutPatternsDemoState> {
+export  class DonutPatternsDemo extends React.Component<IDonutPatternsDemoProps, IDonutPatternsDemoState> {
   private _chartElem: ChartControl = undefined;
 
   /**
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
index 0b6c45916..5f408fd46 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/DynamicDataCallableWebPart.ts
@@ -5,7 +5,7 @@ import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
 
 import * as strings from 'DynamicDataCallableWebPartStrings';
-import DynamicDataCallable from './components/DynamicDataCallable';
+import { DynamicDataCallable } from './components/DynamicDataCallable';
 import { IDynamicDataCallableProps } from './components/IDynamicDataCallableProps';
 import { IDynamicDataPropertyDefinition, IDynamicDataCallables } from '@microsoft/sp-dynamic-data';
 import { IContributor } from '../../services/GitHubService';
@@ -20,7 +20,7 @@ export interface IDynamicDataCallableWebPartProps {
   repo: string;
 }
 
-export default class DynamicDataCallableWebPart extends BaseClientSideWebPart<IDynamicDataCallableWebPartProps>  implements IDynamicDataCallables {
+export  class DynamicDataCallableWebPart extends BaseClientSideWebPart<IDynamicDataCallableWebPartProps>  implements IDynamicDataCallables {
   /** the last selected contributor */
   private _selectedContributor: IContributor;
 
@@ -52,10 +52,6 @@ export default class DynamicDataCallableWebPart extends BaseClientSideWebPart<ID
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   /**
    * We're disabling reactive property panes here because we don't want the web part to try to fetch
    * statistics until both the repo owner and repo name have been filled it
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
index 60d92fa99..e16a6ca5b 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
@@ -11,10 +11,10 @@ import { ChartControl, ChartType, PaletteGenerator } from '@pnp/spfx-controls-re
 import { ChartData } from 'chart.js';
 
 // used to call GitHub
-import GitHubService from '../../../services/GitHubService/GitHubService';
+import { GitHubService } from '../../../services/GitHubService/GitHubService';
 import { IGitHubService, IGitHubContributor } from '../../../services/GitHubService';
 
-export default class DynamicDataCallable extends React.Component<IDynamicDataCallableProps, {}> {
+export class DynamicDataCallable extends React.Component<IDynamicDataCallableProps, {}> {
   /**
 * The chart element
 */
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
index f78f62e05..7a39cc2b3 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
@@ -13,12 +13,12 @@ import { DynamicProperty } from '@microsoft/sp-component-base';
 import * as strings from 'DynamicDataConsumerWebPartStrings';
 
 // component rendering
-import DynamicDataConsumer from './components/DynamicDataConsumer';
+import { DynamicDataConsumer } from './components/DynamicDataConsumer';
 import { IDynamicDataConsumerProps } from './components/IDynamicDataConsumerProps';
 import { IContributor, IGitHubService, IAuthorCommit } from '../../services/GitHubService';
 
 // Needed to retrieve GitHub data
-import GitHubService from '../../services/GitHubService/GitHubService';
+import { GitHubService } from '../../services/GitHubService/GitHubService';
 
 // used to group GitHub results by date
 import { groupBy, toPairs } from '@microsoft/sp-lodash-subset';
@@ -43,7 +43,7 @@ export interface IDynamicDataConsumerWebPartProps {
   repoOwner: string;
 }
 
-export default class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDataConsumerWebPartProps> {
+export class DynamicDataConsumerWebPart extends BaseClientSideWebPart<IDynamicDataConsumerWebPartProps> {
 
   public render(): void {
     const { repo,
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx
index 68bdcf093..1719d916b 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/components/DynamicDataConsumer.tsx
@@ -18,7 +18,7 @@ import * as moment from 'moment';
  * Unlike most samples in this solution, most of the business logic/data retrieval isn't here, but
  * in the web part.
  */
-export default class DynamicDataConsumer extends React.Component<IDynamicDataConsumerProps, {}> {
+export class DynamicDataConsumer extends React.Component<IDynamicDataConsumerProps, {}> {
 
   public render(): React.ReactElement<IDynamicDataConsumerProps> {
     const { alias, data } = this.props;
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
index 14829c91f..ae93966c3 100644
--- a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/HorizontalBarDemoWebPart.ts
@@ -5,14 +5,14 @@ import { BaseClientSideWebPart,  } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 import * as strings from 'HorizontalBarDemoWebPartStrings';
-import HorizontalBarDemo from './components/HorizontalBarDemo';
+import { HorizontalBarDemo } from './components/HorizontalBarDemo';
 import { IHorizontalBarDemoProps } from './components/IHorizontalBarDemo.types';
 
 export interface IHorizontalBarDemoWebPartProps {
   description: string;
 }
 
-export default class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontalBarDemoWebPartProps> {
+export  class HorizontalBarDemoWebPart extends BaseClientSideWebPart<IHorizontalBarDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IHorizontalBarDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
index e1d5dea09..d0b0ecd96 100644
--- a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './HorizontalBarDemo.module.scss';
 import { IHorizontalBarDemoProps } from './IHorizontalBarDemo.types';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import {MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 import * as strings from 'HorizontalBarDemoWebPartStrings';
 import * as Color from 'color';
 
@@ -19,13 +19,14 @@ import { ChartData } from 'chart.js';
  */
 const chartColors: string[] = OFFICE_COLORFUL1;
 const backgroundColors: string[] = PaletteGenerator.alpha(OFFICE_COLORFUL1, 0.2) as string[];
+
 /**
  * Demonstrates how to use a horizontal bar chart.
  * Also shows how to use an Office Fabric CommandBar to change
  * data and settings.
  * This sample uses the state to store the entire chart's
  */
-export default class HorizontalBarDemo extends React.Component<IHorizontalBarDemoProps, {}> {
+export class HorizontalBarDemo extends React.Component<IHorizontalBarDemoProps, {}> {
   private _chartElem: ChartControl = undefined;
 
   public render(): React.ReactElement<IHorizontalBarDemoProps> {
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
index eeedc03e5..e3fae99b7 100644
--- a/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/LineChartDemoWebPart.ts
@@ -5,14 +5,14 @@ import { Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart,  } from "@microsoft/sp-webpart-base";
 import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
-import LineChartDemo from './components/LineChartDemo';
+import { LineChartDemo } from './components/LineChartDemo';
 import { ILineChartDemoProps } from './components/ILineChartDemo.types';
 
 export interface ILineChartDemoWebPartProps {
   description: string;
 }
 
-export default class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoWebPartProps> {
+export  class LineChartDemoWebPart extends BaseClientSideWebPart<ILineChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<ILineChartDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx
index 5b3045708..9095298c8 100644
--- a/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/lineChartDemo/components/LineChartDemo.tsx
@@ -3,7 +3,7 @@ import styles from './LineChartDemo.module.scss';
 import { ILineChartDemoProps, ILineChartDemoState } from './ILineChartDemo.types';
 import * as strings from 'LineChartDemoWebPartStrings';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 import { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
 import { ChartData } from 'chart.js';
@@ -14,7 +14,7 @@ import { ChartData } from 'chart.js';
  * Also demonstrates customizing axis labels and
  * custom tooltip providers.
  */
-export default class LineChartDemo extends React.Component<ILineChartDemoProps, ILineChartDemoState> {
+export class LineChartDemo extends React.Component<ILineChartDemoProps, ILineChartDemoState> {
 
   public render(): React.ReactElement<ILineChartDemoProps> {
     return (
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
index cd681c98f..e6d78c866 100644
--- a/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/PieChartDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'PieChartDemoWebPartStrings';
-import PieChartDemo from './components/PieChartDemo';
+import { PieChartDemo } from './components/PieChartDemo';
 import { IPieChartDemoProps } from './components/IPieChartDemo.types';
 
 export interface IPieChartDemoWebPartProps {
   description: string;
 }
 
-export default class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChartDemoWebPartProps> {
+export class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IPieChartDemoProps > = React.createElement(
@@ -27,10 +27,6 @@ export default class PieChartDemoWebPart extends BaseClientSideWebPart<IPieChart
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
-  protected get dataVersion(): Version {
-    return Version.parse('1.0');
-  }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
index 5d220596e..8779263a5 100644
--- a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
@@ -10,7 +10,7 @@ import { ChartData } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 // used to render the toolbar above the chart
 import {
@@ -37,7 +37,7 @@ const DATA_LENGTH: number = 5;
 /**
  * This sample demonstrates add and modifying the data in a pie chart
  */
-export default class PieChartDemo extends React.Component<IPieChartDemoProps, {}> {
+export class PieChartDemo extends React.Component<IPieChartDemoProps, {}> {
   /**
    * The chart element
    */
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
index 11fe5167f..dfe270279 100644
--- a/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/PolarAreaDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'PolarAreaDemoWebPartStrings';
-import PolarAreaDemo from './components/PolarAreaDemo';
+import { PolarAreaDemo } from './components/PolarAreaDemo';
 import { IPolarAreaDemoProps } from './components/IPolarAreaDemo.types';
 
 export interface IPolarAreaDemoWebPartProps {
   description: string;
 }
 
-export default class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoWebPartProps> {
+export  class PolarAreaDemoWebPart extends BaseClientSideWebPart<IPolarAreaDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IPolarAreaDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
index 12bb47bc9..9a0871494 100644
--- a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
@@ -9,7 +9,7 @@ import { ChartData } from 'chart.js';
 
 // used to retrieve (fake) data from a (fake) service
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 // used to render the toolbar above the chart
 import {
@@ -42,7 +42,7 @@ const borderColors: string[] = [
 
 const DATA_LENGTH: number = 5;
 
-export default class PolarAreaDemo extends React.Component<IPolarAreaDemoProps, {}> {
+export class PolarAreaDemo extends React.Component<IPolarAreaDemoProps, {}> {
   /**
   * The chart element
   */
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
index 3b5cc6b9d..3f449192a 100644
--- a/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/RadarDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'RadarDemoWebPartStrings';
-import RadarDemo from './components/RadarDemo';
+import { RadarDemo } from './components/RadarDemo';
 import { IRadarDemoProps } from './components/IRadarDemo.types';
 
 export interface IRadarDemoWebPartProps {
   description: string;
 }
 
-export default class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartProps> {
+export class RadarDemoWebPart extends BaseClientSideWebPart<IRadarDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IRadarDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx b/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx
index 58b0acf6a..57fa999a7 100644
--- a/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/radarDemo/components/RadarDemo.tsx
@@ -3,14 +3,14 @@ import * as strings from 'RadarDemoWebPartStrings';
 import styles from './RadarDemo.module.scss';
 import { IRadarDemoProps, IRadarDemoState } from './IRadarDemo.types';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
+import { MockChartDataProvider } from '../../../services/ChartDataProvider/MockChartDataProvider';
 
 import { ChartControl, ChartType } from "@pnp/spfx-controls-react/lib/ChartControl";
 import { ChartData } from 'chart.js';
 
 const DATASET_LENGTH: number = 2;
 const DATA_LENGTH: number = 7;
-export default class RadarDemo extends React.Component<IRadarDemoProps, IRadarDemoState> {
+export class RadarDemo extends React.Component<IRadarDemoProps, IRadarDemoState> {
 
  public render(): React.ReactElement<IRadarDemoProps> {
 
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
index 7be655852..154006dad 100644
--- a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/RealtimePluginDemoWebPart.ts
@@ -6,14 +6,14 @@ import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
 import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
 
 import * as strings from 'RealtimePluginDemoWebPartStrings';
-import RealtimePluginDemo from './components/RealtimePluginDemo';
+import { RealtimePluginDemo } from './components/RealtimePluginDemo';
 import { IRealtimePluginDemoProps } from './components/IRealtimePluginDemo.types';
 
 export interface IRealtimePluginDemoWebPartProps {
   description: string;
 }
 
-export default class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePluginDemoWebPartProps> {
+export class RealtimePluginDemoWebPart extends BaseClientSideWebPart<IRealtimePluginDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IRealtimePluginDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
index d29e5030f..3de7fccb3 100644
--- a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
@@ -27,7 +27,7 @@ const chartColors = {
 };
 
 
-export default class RealtimePluginDemo extends React.Component<IRealtimePluginDemoProps, {}> {
+export class RealtimePluginDemo extends React.Component<IRealtimePluginDemoProps, {}> {
   /**
  * The chart element
  */
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
index e624deb99..e6c2289a7 100644
--- a/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/ScatterChartDemoWebPart.ts
@@ -7,14 +7,14 @@ import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/
 
 
 import * as strings from 'ScatterChartDemoWebPartStrings';
-import ScatterChartDemo from './components/ScatterChartDemo';
+import { ScatterChartDemo } from './components/ScatterChartDemo';
 import { IScatterChartDemoProps } from './components/IScatterChartDemo.types';
 
 export interface IScatterChartDemoWebPartProps {
   description: string;
 }
 
-export default class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChartDemoWebPartProps> {
+export class ScatterChartDemoWebPart extends BaseClientSideWebPart<IScatterChartDemoWebPartProps> {
 
   public render(): void {
     const element: React.ReactElement<IScatterChartDemoProps > = React.createElement(
diff --git a/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx
index 512355eed..1d3c80267 100644
--- a/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/scatterChartDemo/components/ScatterChartDemo.tsx
@@ -8,7 +8,7 @@ import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartContr
 import * as strings from 'ScatterChartDemoWebPartStrings';
 
 
-export default class ScatterChartDemo extends React.Component<IScatterChartDemoProps, {}> {
+export class ScatterChartDemo extends React.Component<IScatterChartDemoProps, {}> {
   public render(): React.ReactElement<IScatterChartDemoProps> {
     return (
       <div className={styles.scatterChartDemo}>