Getting started using Visual Studio - require is undefined

4055
6
Jump to solution
07-17-2015 02:09 PM
DavidChevrier
Occasional Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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.

View solution in original post

0 Kudos
6 Replies
thejuskambi
Occasional Contributor III

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.

ChrisSergent
Regular Contributor III

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.

0 Kudos
DavidChevrier
Occasional Contributor II

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.

0 Kudos
DavidChevrier
Occasional Contributor II

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>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

    <style>

        html, body {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        #map {

            padding: 0;

        }

    </style>

    <script src="http://js.arcgis.com/3.14/"></script>

    <script>

        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>

<body class="claro">

    <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 style="position:absolute; right:20px; top:10px; z-Index:999;">

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

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

                    <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">

                        <div id="basemapGallery"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

0 Kudos
JoelBennett
MVP Regular Contributor

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.

0 Kudos
DavidChevrier
Occasional Contributor II

Thanks!  Creating a new website (of type ASP.NET Empty Web Site in Visual C#), then adding new item-->html page did it!  I was creating a project with the template for javascript-->store apps-->Blank App.  It probably adds a bunch of extra stuff I don't need that causes the error.

0 Kudos