Extension JS works in debug but not in prod

Question

I have built a very small application customizer extension that is trying to do the following:hide the author panel, including the view count, from the news.aspx page in Sharepoint OnlineThe approach I have is to select all elements with a data-automation-id of "newsAuthorDate". I can't tell what class is present in these news events because they are obfuscated, hence looking for the data-automation-id instead.Here is my code in the onInit event handler:        // Check if the current page path contains "news.aspx"
        if (window.location.pathname.indexOf("news.aspx") !== -1) {
          console.log("checking for newsAuthorDate data automation id...");
          // Select all div elements with data-automation-id="newsAuthorDate"
          const divsToHide = document.querySelectorAll('div[data-automation-id="newsAuthorDate"]');

if (divsToHide.length &gt; 0) {
            console.log("Found newsAuthorDate divs!!!");
          }

// Loop through each div and set its display style to hidden
          divsToHide.forEach(div =&gt; {
            (div as HTMLElement).style.display = 'none';
          });
        }So as you can see, I'm trying to only fire this code in the news.aspx page (when users select See All from news web parts).&nbsp;When I run this using `gulp serve` it works like a charm, finding all of the elements and hiding them. When I build it for production, however, the code logs to the console that it's "checking for newsAuthorDate data automation id...", but it never finds any elements, thus never hiding any.&nbsp;&nbsp;I'm at a loss as to what is going on here or how to proceed next. Any ideas would be welcome. Thank you in advance.

michalkornet · Accepted Answer

Hi homolworks &nbsp;It is not recommended to change the predefined layout in SharePoint, but if it is really needed in your case, you can try assigning a CSS file in the Application Customizer.&nbsp;&nbsp;    //set the css file url
    const cssGlobalUrl = 'https://contoso.sharepoint.com/Styles/Main.css';

//get the head element
    const element = document.getElementsByTagName('head')[0] || document.documentElement;
    // assign CSS file url to the link element
    const linkElement = document.createElement('link');
    //set CSs Version by time
    linkElement.href = `${cssGlobalUrl}`;
    linkElement.rel = 'stylesheet';
    linkElement.type = 'text/css';

element.insertAdjacentElement('beforeend', linkElement)&nbsp;Let me know if it works in your case. In your current approach, the elements might not have been rendered yet when you check them in the code

Forum Discussion

Extension JS works in debug but not in prod

2 Replies

Resources