Arcgis conflict in Liferay 7.0

Question

I try to use Arcgis javascript API in Liferay 7.0 but it's fail. I think because Liferay 7.0 using requireJS for using javascript which conflict with dojo of Arcgis javascript API. I am using this code for implement Arcgis API:

<script type="text/javascript" src="<%=request.getContextPath() %>/js/arcgis_js_api/library/3.14/3.14/init.js"></script>

<script>
require([
      "esri/map", "dojo/dom" 
    ], function(Map, dom) {

    var map = new esri.Map("map", {
        basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 13
      });
});

This is console log:

java.lang.IllegalArgumentException: Path esri/map.js does not start with a "/" character
java.lang.IllegalArgumentException: Path dojo.js does not start with a "/" character

This is javascript error:

Error: defineAlreadyDefined

Anyone has solution help me please. Thanks!

Answer 1

I use this code before implement arcgis (javascript):

if(typeof define !== "undefined" && typeof require !== "undefined"){
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;}

It will be resolved.

Answer 2

As you mention Liferay7 and your script tag makes use of <%=request.getContextPath()%>, you most likely have a mismatch between your portlet and the servlet API: request is not aware of any portlet context (but is still there, because JSPs have been designed for servlets and it's a mandatory object that's around, irritating a lot of people)

The URLs for your own Javascript files are just not relative to the context root, but Liferay makes them available on a different path. The easiest way, without messing around with this location, is to just mention the file you'd like to include in your portlet's configuration. In Liferay 7 OSGi portlet modules, it works like this (pseudocode, simplified)

@Component(
    immediate = true,
    property = {
        "com.liferay.portlet.footer-portlet-javascript=/js/main.js",
        "javax.portlet.display-name=My Portlet",
    },
    service = Portlet.class
)

In JSR-286 portlets packaged in WARs, you'd use the footer-portlet-javascript value in WEB-INF/liferay-portlet.xml.

Alternatively, use the header-* variant.

I personally prefer this way over memorizing how the path of resources is being constructed.