Remove System. in front of import as it's no longer needed

Moved css of video-js to dynamic loading
Updated pnp property controls to 1.12.0
Updated webpack anaylyser to 3.0.3

samples/react-search-refiners/spfx/package.json

@@ -11,53 +11,53 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
-    "@types/react": "16.4.2",
-    "@types/react-dom": "16.0.5",
-    "@microsoft/sp-core-library": "1.7.0",
-    "@microsoft/sp-webpart-base": "1.7.0",
-    "@microsoft/sp-lodash-subset": "1.7.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.7.0",
-    "@types/webpack-env": "1.13.1",
-    "@types/es6-promise": "0.0.33",
     "@microsoft/decorators": "1.7.0",
     "@microsoft/sp-application-base": "1.7.0",
+    "@microsoft/sp-core-library": "1.7.0",
     "@microsoft/sp-dialog": "1.7.0",
     "@microsoft/sp-loader": "1.7.0",
+    "@microsoft/sp-lodash-subset": "1.7.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.7.0",
+    "@microsoft/sp-webpart-base": "1.7.0",
     "@pnp/common": "1.2.5",
     "@pnp/logging": "1.2.5",
     "@pnp/odata": "1.2.5",
-    "@pnp/sp": "1.2.5",
     "@pnp/polyfill-ie11": "1.0.0",
+    "@pnp/sp": "1.2.5",
     "@pnp/spfx-controls-react": "1.10.0",
-    "@pnp/spfx-property-controls": "1.11.0",
+    "@pnp/spfx-property-controls": "1.12.0",
+    "@types/es6-promise": "0.0.33",
     "@types/fabric": "^1.5.43",
     "@types/handlebars": "^4.0.39",
+    "@types/react": "16.4.2",
+    "@types/react-dom": "16.0.5",
     "@types/sharepoint": "2013.1.9",
+    "@types/webpack-env": "1.13.1",
     "common-tags": "^1.8.0",
     "downshift": "3.1.5",
     "handlebars": "^4.0.12",
-    "lodash": "4.17.11",
     "handlebars-helpers": "^0.8.4",
     "immutability-helper": "2.4.0",
+    "lodash": "4.17.11",
     "office-ui-fabric-react": "5.120.0",
     "on-el-resize": "0.0.4",
+    "react": "16.3.2",
     "react-ace": "6.1.4",
     "react-custom-scrollbars": "4.1.2",
+    "react-dom": "16.3.2",
     "react-js-pagination": "3.0.0",
     "video.js": "^7.3.0"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "1.7.0",
-    "@microsoft/sp-tslint-rules": "1.7.0",
     "@microsoft/sp-module-interfaces": "1.7.0",
+    "@microsoft/sp-tslint-rules": "1.7.0",
     "@microsoft/sp-webpart-workbench": "1.7.0",
-    "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",
+    "gulp": "~3.9.1",
     "unlazy-loader": "0.1.3",
-    "webpack-bundle-analyzer": "^2.13.1"
+    "webpack-bundle-analyzer": "^3.0.3"
   }
 }

samples/react-search-refiners/spfx/src/services/SearchService/SearchService.ts

@@ -163,11 +163,10 @@ class SearchService implements ISearchService {
 
                 const refinementRows = refinementResultsRows ? refinementResultsRows['Refiners'] : [];
                 if (refinementRows.length > 0) {
-                    let component = await System.import(
+                    const component = await import(
                         /* webpackChunkName: 'search-handlebars-helpers' */
                         'handlebars-helpers'
                     );
-        
                     this._helper = component({
                         handlebars: Handlebars
                     });

samples/react-search-refiners/spfx/src/services/TemplateService/BaseTemplateService.ts

@@ -7,7 +7,6 @@ import { html } from 'common-tags';
 import { isEmpty, uniqBy, uniq } from '@microsoft/sp-lodash-subset';
 import * as strings from 'SearchResultsWebPartStrings';
 import { Text } from '@microsoft/sp-core-library';
-import 'video.js/dist/video-js.css';
 import { Logger } from '@pnp/logging';
 import templateStyles from './BaseTemplateService.module.scss';
 import { DomHelper } from '../../helpers/DomHelper';
@@ -25,11 +24,10 @@ abstract class BaseTemplateService {
 
     public async LoadHandlebarsHelpers(load: boolean) {
         if (load) {
-            let component = await System.import(
+            let component = await import(
                 /* webpackChunkName: 'search-handlebars-helpers' */
                 'handlebars-helpers'
             );
-
             this._helper = component({
                 handlebars: Handlebars
             });
@@ -424,12 +422,11 @@ abstract class BaseTemplateService {
 
         // Load Videos-Js on Demand 
         // Webpack will create a other bundle loaded on demand just for this library
-        const videoJs = await System.import(
+        const videoJs = await import(
             /* webpackChunkName: 'videos-js' */
-            'video.js',
+            './video-js',
         );
-
+        this._videoJs = videoJs.default.getVideoJs();
-        this._videoJs = videoJs.default;
     }
 
     private _initVideoPreviews() {

samples/react-search-refiners/spfx/src/services/TemplateService/video-js.ts

@@ -0,0 +1,8 @@
+import 'video.js/dist/video-js.min.css';
+import videojs from 'video.js';
+
+export default class VideoJs {
+    public static getVideoJs(){
+        return videojs;
+    }
+}

samples/react-search-refiners/spfx/src/webparts/searchResults/SearchResultsWebPart.ts

@@ -226,7 +226,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
     }
     
     protected async loadPropertyPaneResources(): Promise<void> {
-        this._propertyPage = await System.import(
+        this._propertyPage = await import(
             /* webpackChunkName: 'search-property-pane' */
             '../controls/PropertyPaneTextDialog/PropertyPaneTextDialog'
         );

samples/react-search-refiners/spfx/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx

@@ -182,7 +182,7 @@ export default class SearchResultsContainer extends React.Component<ISearchConta
                 const localizedFilters = await this._getLocalizedFilters(searchResults.RefinementResults);
 
                 if (localizedFilters && localizedFilters.length > 0) {
-                    const filterPanelComponent = await System.import(
+                    const filterPanelComponent = await import(
                         /* webpackChunkName: 'search-filterpanel' */
                         '../FilterPanel'
                     );
@@ -252,7 +252,7 @@ export default class SearchResultsContainer extends React.Component<ISearchConta
                     const localizedFilters = await this._getLocalizedFilters(searchResults.RefinementResults);
 
                     if (FilterPanel === null && localizedFilters && localizedFilters.length > 0) {
-                        const filterPanelComponent = await System.import(
+                        const filterPanelComponent = await import(
                             /* webpackChunkName: 'search-filterpanel' */
                             '../FilterPanel'
                         );