nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Getting started using Visual Studio - require is undefined

DavidChevrier

Hi,

I'm transitioning from the silverlight api to the the javascript api. (Reluctantly, because I really enjoy programming in C and using MVVM and XAML, way less developer plug-ins needed and easier to debug, but I digress.) I grabbed a simple sample javascript api html file from esri's site and when I open it in chrome, it works no problem. Then I tried to make this in Visual Studio 2013 (which is what I want to use as my IDE).

I first added in the plug-ins listed on the esri site and created a new project with the template javascript-->Store Apps-->Windows Apps-->Blank App. I copied the html over to the default.html, but when I ran it (F5), it says "JavaScript runtime error: 'require' is undefined". I looked around the forums but the only solution listed (changing the source in the script tag from .../3.14 to .../3.14/init.js) did not work. Since I know the html works in a browser, how do I get Visual Studio to work with this api? And what template should I use for a proper website, there aren't many listed for javascript?

Thanks

Vind meer berichten getagd met

Accepted answers

JoelBennett

I created a new website in Visual Studio 2010, then added an HTML page via Add New Item. I pasted your code in there, ran the debugger and the page loads fine.

I opened the network tab on the developer tools window (F12) and noticed that when the browser requested

http://js.arcgis.com/3.14/

the server replied with a 302 and redirected to

http://js.arcgis.com/3.14/init.js

Maybe try that full URL as the src for your script tag.

All comments

JoelBennett

I created a new website in Visual Studio 2010, then added an HTML page via Add New Item. I pasted your code in there, ran the debugger and the page loads fine.

I opened the network tab on the developer tools window (F12) and noticed that when the browser requested

http://js.arcgis.com/3.14/

the server replied with a 302 and redirected to

http://js.arcgis.com/3.14/init.js

Maybe try that full URL as the src for your script tag.

DavidChevrier

Here is the code I'm using for the default.html (which works when I open it in chrome, just fails when I hit F5 to debug in VS using Local Machine)

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<style>

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

#map {

padding: 0;

}

</style>

var map;

require([

"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

"dojo/parser",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

"dojo/domReady!"

], function (

Map, BasemapGallery, arcgisUtils,

parser

) {

parser.parse();

map = new Map("map", {

basemap: "topo",

center: [-105.255, 40.022],

zoom: 13

});

//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

basemapGallery.on("error", function (msg) {

console.log("basemap gallery error: ", msg);

});

</script>

</head>

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline', gutters:false"

style="width:100%;height:100%;margin:0;">

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'"

style="padding:0;">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

</body>

</html>

DavidChevrier

Thanks,
What template do you use when you start a new project in VS? For plug-ins, I installed typescript, the arcgis-js-api-typescript and dojo using nuget. In the extensions, I added JSLint.Net for VS, VS Extensions for Window Library for JavaScript, and Web Essentials 2013 update 4.

ChrisSergent

Can you share your code on JS Bin - Collaborative JavaScript Debugging or do you have your project on GitHub. Not sure why it's working in the browser. Did you already check developer tools. In Google Chrome you can just press F12. I develop pure HTML5 and .NET with Visual Studio 2013 Professional so I will do what I can to help you.

I am not sure what plug-ins you needed unless it was not web related as I develop strictly web apps and I have not needed any unless you mean JsLint.

thejuskambi

The error occurs when a amd module is being loaded before the esri init file is loaded.

Check all your js files references/scripts tags. make sure the arcgis api is first loaded and if there is a script for dojoConfig. It should be before the esri api tag.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.