External JS not loading in liferay 7 GA4

Question

I have added external JS in theme and portlet but JS not loading first time page loading.

I am using below code :

 <script>
    Liferay.Loader.define._amd = Liferay.Loader.define.amd;
    Liferay.Loader.define.amd = false;
</script>
    <script src="${javascript_folder}/jquery.jscrollpane.min.js" />  
    <script src="${javascript_folder}/jquery.mousewheel.js" />  
    <script src="${javascript_folder}/common.js" /> 

<script>
    Liferay.Loader.define.amd = Liferay.Loader.define._amd;
</script>

Please help me.

Answer 1

As per given Liferay version L7 GA4,

Follow these steps:

Open the Control Panel, navigate to Configuration → System Settings.

Click JavaScript Loader under the Foundation tab.

Uncheck the expose global option.

Reference Link - https://help.liferay.com/hc/en-us/articles/360018161931-Using-External-Libraries-#using-libraries-that-you-host

Also, there is some alternative second solution of Liferay Version which I used L7.1 and L7.2

Below code, I am adding in my module project

@Component(immediate = true, service = DynamicInclude.class)
public class JSTopHeadDynamicInclude extends BaseDynamicInclude {

  @Override
    public void include(
            HttpServletRequest request, HttpServletResponse response,
            String key)
        throws IOException {

    PrintWriter printWriter = response.getWriter();

    String content = "<script src=\"/o/my-custom-dynamic-include/jquery.jscrollpane.min.js\" />";
    content += "<script src=\"/o/my-custom-dynamic-include/jquery.mousewheel.js\" />";
    content += "<script src=\"/o/my-custom-dynamic-include/common.js\" />";
    printWriter.println(content);
    }

    @Override
    public void register(
        DynamicInclude.DynamicIncludeRegistry dynamicIncludeRegistry) {

        dynamicIncludeRegistry.register(
      "/html/common/themes/top_js.jspf#resources"
    );
    }
}

You can add these js files in your OSGI module location if "js" folder did not exist then you can create and add your js files.

**src/main/resource/META-INF/resources/js/**

Also, You should register Web-ContextPath in BND.BND file for module

**Web-ContextPath: /my-custom-dynamic-include**

Reference Link - https://help.liferay.com/hc/en-us/articles/360018165751-Top-JS-Dynamic-Include

I am using the second solution. - Which is working fine.