coordinate system - Defining spatial reference for WMS layer in ArcGIS API for JavaScript?

I'm just starting with the ArcGIS Javascript API, and I'm having some issues adding layers from my geoserver to my basic map application.

I started with the WMS resource info sample from the ESRI site (https://developers.arcgis.com/javascript/jssamples/layers_wmsresourceinfo.html). I took out the two layers they display in that sample, and I replaced it with a WMS layer from my geoserver. I'm getting this error:

    
  Error occurred decoding the espg code EPSG:102100

No code "EPSG:102100" from authority "European Petroleum Survey Group" found for object of type "IdentifiedObject".

The problem seems to stem from the difference in spatial references. The base map uses 102100, and my layer uses 4326. It doesn't look like changing the spatial reference of my layer is an option, so is it possible for me to change the spatial reference of the base map?

---

I added 102100 as a custom CRS to my geoserver. I then changed the declared SRS for my layer to EPSG:3857, and told it to "reproject native to declared" (I'm also new to using geoserver, so please let me know if it sounds like I'm doing something wrong there). I'm getting a different error message now:

Error occurred decoding the espg code urn:x-ogc:def:crs:EPSG:102100 Error in "PROJECTION": No transform for classification "Mercator_Auxiliary_Sphere". Error in "PROJECTION": No transform for classification "Mercator_Auxiliary_Sphere". No transform for classification "Mercator_Auxiliary_Sphere".

And for full information, here's the js code of my basic ArcGIS map:

var map;
require([
  'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
  'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser',
  'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dojo/domReady!'
], function(Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser) {
  parser.parse();


  map = new Map('map', {
    basemap: 'hybrid',
    center: [-96, 37],
    zoom: 4
  });

  var layer1 = new WMSLayerInfo({
    name: 'states',
    title: 'states'

  });

  var resourceInfo = {
    extent: new Extent(-120.77027961360125 ,35.79436009671527, -120.74876891832204, 35.81224289313929, {
      wkid: 3857
    }),
    layerInfos: [layer1]
  };
  var wmsLayer = new WMSLayer('http://localhost:8040/geoserver/topp/wms', {
    resourceInfo: resourceInfo,

    visibleLayers: ['states']
  });
  map.addLayers([wmsLayer]);

  var details = dom.byId('details');
  domConst.place('Layers:', details);
  var ul = domConst.create('ul', null, details);
  array.forEach(wmsLayer.layerInfos, function(layerInfo) {
    domConst.create('li', { innerHTML: layerInfo.title }, ul);
  });

  domConst.place('WMS Version:' + wmsLayer.version + '
', details);
});

Any idea what might be causing the error?

Answer

So I finally found the solution to this problem. You have to override the spatialReferences array of the WMSLayer object right before adding it to the map.

  wmsLayer.spatialReferences[0] = 3857;
  map.addLayers([wmsLayer]);

This worked with a layer using EPSG:3857 and another layer using ESPG:4326.