1

I have a SPFx web part with Knockout framework. Its developed for SharePoint on premises (V1.1.0). Deployed all the Assets in the SharePoint library. Application is working fine in Chrome. But in IE, web part is not loaded in the page. Even I have not any console logs/errors. If I refresh the page with developer console open, it works.

I have removed all my console logs in the application, even I have removed the console logs from the bundled JS. Still web part is not loaded.

Then I thought it could be a problem with the order of loading the JS. So I have commented all code and package import statements. But no luck.

In Some Article, I found it could be a problem with Master page. So I have removed the custom Master and set back to settle master. But still have the issue.

Then, I have loaded the page with developer console open, I found an issue in console, "Object doesn't support property or method 'warn'" and it was thrown from sp-classic-page-assembly_en-us.js. Also I can see the stack overflow error from sp-classic-page-assembly_en-us.js sometimes.

Below is the sample ViewModel.ts file code.

    import * as ko from 'knockout';
    import styles from './Search.module.scss';
    import { ISearchWebPartProps } from './SearchWebPart';
    import pnp, { SearchResults, Web, SearchResult, SortDirection } from 'sp-pnp-js';
    import { QueryBuilder } from './Support/QueryBuilder';
    import { SearchParameters } from './Entities/SearchParameters';
    import { CommonFunctions } from './Support/CommonFunctions';
    import { AppConstants } from './Constants/AppConstants';
    import { ListNames } from './Constants/ListNames';
    import { DocumentCategory } from './Entities/DocumentCategory';
    import { ResultTableProperties } from './Entities/ResultTableProperties';
    import { PinnedDocuments } from './Entities/PinnedDocuments';
    import { SPComponentLoader } from '@microsoft/sp-loader';
    import * as $ from "jquery";
    import { Topics } from './Entities/Topics';
    import { PinnedLists } from "./Entities/PinnedLists";
    import { UserPinnedLists } from "./Entities/UserPinnedLists";
    import { ConfigProperties } from "./Entities/ConfigProperties";
    import { ConfigKeys } from "./Constants/ConfigKeys";
    import 'jqueryui';
    require('./es6-promise.auto.min.js');
    let Swal: any = require('./sweetalert2.min.js');
    let moment: any = require('./MyWIMS-I/js/moment.min.js');

    require('./SwalStyles.css');



    export interface ISearchBindingContext extends ISearchWebPartProps {
        shouter: KnockoutSubscribable<{}>;
    }

    export default class SearchViewModel {

        public resultTablePageSize: KnockoutObservable<number> = ko.observable(50);
        public mmsName: KnockoutObservable<string> = ko.observable("");
        public topicsTermID: KnockoutObservable<string> = ko.observable("");
        public startPageNumber: KnockoutObservable<number> = ko.observable(1);
        public lastPageNumber: KnockoutObservable<number> = ko.observable(1);
        public currentPageNumber: KnockoutObservable<number> = ko.observable(1);
        public pinnedDocumentsCount: KnockoutObservable<number> = ko.observable(0);
        public isPrevEnabled: KnockoutObservable<boolean> = ko.observable(false);
        public isNextEnabled: KnockoutObservable<boolean> = ko.observable(false);
        public selectedCategory: KnockoutObservable<string> = ko.observable('');
        public resultTableDocProperties: KnockoutObservableArray<ResultTableProperties> = ko.observableArray([]);
        public rootCategoryDetails: KnockoutObservableArray<DocumentCategory> = ko.observableArray([]);
        public topicsTerms: KnockoutObservableArray<Topics> = ko.observableArray([]);
        public pinnedsectionDetails: KnockoutObservableArray<PinnedLists> = ko.observableArray([]);
        public selectpinListDetails: KnockoutObservableArray<UserPinnedLists> = ko.observableArray([]);
        public associatedLists: KnockoutObservableArray<string> = ko.observableArray([]);
        public docToUnPin: KnockoutObservable<string> = ko.observable('');

        public searchParameters: KnockoutObservable<SearchParameters> = ko.observable(new SearchParameters());
        public openedPinnedList: KnockoutObservable<PinnedLists> = ko.observable(new PinnedLists());
        public isLoading: KnockoutObservable<boolean> = ko.observable(true);
        public isPinnedSectionOpen: KnockoutObservable<boolean> = ko.observable(false);
        public webAbsUrl: string = '';
        public webServRelUrl: string = '';
        public docCategoryDetails: DocumentCategory[] = [];
        private oWeb: Web = undefined;

        constructor(bindings: ISearchBindingContext) {

            this.webAbsUrl = bindings.webAbsUrl;
            this.webServRelUrl = bindings.webServRelUrl;
            this.isLoading(true);
            this.resultTablePageSize(parseInt(bindings.pageSize));
            this.mmsName(bindings.mmsName);
            this.topicsTermID(bindings.topicsTermID);
            this.oWeb = new Web(bindings.webAbsUrl);
            SPComponentLoader.loadScript(this.webAbsUrl + '/_layouts/15/clienttemplates.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
            });

            SPComponentLoader.loadCss(this.webAbsUrl + '/SiteAssets/css/bootstrap.min.css');
            SPComponentLoader.loadCss('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
            SPComponentLoader.loadScript(this.webAbsUrl + '/SiteAssets/js/jquery-2.2.4.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
                SPComponentLoader.loadScript(this.webAbsUrl + '/SiteAssets/js/jquery-ui.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
                    SPComponentLoader.loadScript(this.webAbsUrl + '/SiteAssets/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
                        SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js', { globalExportsName: 'jQuery' }).then((): void => {
                        });
                    });
                });
            });


            this.oWeb.currentUser.get().then((_currentUser: any) => {
                this.currentUserID = _currentUser.Id;
                this.GetUserPinnedLists();
                const sessionKey: string = CommonFunctions.GetQueryStringParameter(AppConstants.CONST_Session_Key);
                const _srchParams: SearchParameters = CommonFunctions.GetSearchParameters(sessionKey);
                this.searchParameters(_srchParams);            
                this.InitiateWIMSSearch();          
            });
        }

        private GetUserPinnedLists(): void {
            this.pinnedListsDetails = [];
            this.oWeb.lists.getByTitle(ListNames.LIST_User_Specific_Pinned_Lists).items.filter("UserNameId eq " + this.currentUserID).orderBy("PinnedListOrder", true).get().then(_pinnedLists => {
                if (_pinnedLists && _pinnedLists.length > 0) {
                    for (let i = 0; i < _pinnedLists.length; i++) {
                        this.pinnedListsDetails.push({ ListName: _pinnedLists[i].Title, ListID: _pinnedLists[i].ID, Documents: [], IsExpanded: false, IsSeeMoreVisible: true });
                    }
                }
                this.pinnedListsDetails.push({ ListName: AppConstants.CONST_DEFAULT_PinnedList, ListID: 1, Documents: [], IsExpanded: false, IsSeeMoreVisible: true });
            }).catch(e => { this.LogException("GetUserPinnedLists", e); });
        }

        private InitiateWIMSSearch(): void {
            this.GetTopicsTerms();
            this.SearchDocuments(1);        
        }
    }

Any suggestions would be helpful. Thanks.

  • can you share some sample code ? – Gautam Sheth Dec 10 '18 at 9:08
  • @GautamSheth, Thanks, updated the question with sample code. – Naveen Prasath Dec 10 '18 at 9:48
  • replace const in your code with let or var. It should start working. – Gautam Sheth Dec 10 '18 at 9:55
  • Hi @GautamSheth, I don't think so. Because the app is working fine in another test environment. How const will make a problem? – Naveen Prasath Dec 10 '18 at 9:59
  • Usually, const is a newer declaration and it gave some some weird errors while using it in IE 11, changing them to var or let fixed it for me. Can you give it a try and check ? – Gautam Sheth Dec 10 '18 at 10:14

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.