TypeError: 'undefined' is not an object only when building

[michael.parrott]

I have some code that I am trying to get working to show a map and where you are and places close by and other things like that. However, it works fine when I test it out using localhost, but when trying to build the app using package, production, or testing, I receive the error:

[INFO] Resolving your application dependencies (...)
[ERROR] TypeError: 'undefined' is not an object
Stack trace:
...

Ext.define("LocationTwo.view.Main",{
    extend: 'Ext.Container',
    requires: [ 'Ext.Map' ],
    
    config:
    {
        layout: 'vbox',
        
        items:
        [
        {
            xtype: 'map',
            useCurrentLocation: false,
            flex: 1,
            
            listeners:
            {
                maprender: function( mapComponent, mapObject, options )
                {
                    console.log( 'maprender' );
                    var create = function( position )
                    {
                    };
                    var error = function( errorInfo )
                    {
                    };
                    var options = { enableHighAccuracy: true };
                    
                    navigator.geolocation.getCurrentPosition( create, error, options );
                }
            }
        }
        ]
    }
});

It seems like something is wrong with the "navigator.geolocation.getCurrentPosition" line or the useCurrentLocation line, because when I comment that line out, everything is fine. Or, if I leave the line uncommented, and change useCurrentLocation to true, it also builds okay. Either way, the application does not output an errors in Google Chrome's console when running.

[michael.parrott]

Also note that this works:

Main.js:

Ext.define( 'LocationTwo.view.Main',{
    extend: 'Ext.Container',
    requires: [ 'LocationTwo.view.MapView' ],
	
    config:
	{
		layout: 'card',
		
		items:
		[
		{
			xtype: 'button',
			text: 'Click me',
			
			listeners:
			{
				tap: function( button )
				{	
					button.up( 'container' ).setActiveItem(
					{
						xtype: 'mapview'
					} );
				}
			}
		}
		]
    }
});

MapView.js:

Ext.define( 'LocationTwo.view.MapView',{
    extend: 'Ext.Map',
	xtype: 'mapview',
	
    config:
	{
		useCurrentLocation: false,
		
		listeners:
		{
			maprender: function()
			{
				navigator.geolocation.getCurrentPosition( this.createMap, this.onError, { enableHighAccuracy: true } );
			}
		}
    },
	
	createMap: function( position )
	{
	},


	onError: function( errorInfo )
	{
	}
});

But if you were change Main.js to this:

Ext.define( 'LocationTwo.view.Main',{
    extend: 'Ext.Container',
	
    config:
	{
		layout: 'card',


		listeners:
		{
			initialize: function( button )
			{
				this.setActiveItem(
				{
					xtype: 'mapview'
				} );
			}
		}
    }
});

the application won't build, despite the fact that it results in the same program on screen before building the application.

[mitchellsimoens]

Why are you using a listener to add items? Also you aren't requiring the map view in this code:

Ext.define( 'LocationTwo.view.Main',{
    extend: 'Ext.Container',
	
    config:
	{
		layout: 'card',


		listeners:
		{
			initialize: function( button )
			{
				this.setActiveItem(
				{
					xtype: 'mapview'
				} );
			}
		}
    }
});

Could be:

Ext.define('LocationTwo.view.Main', {
    extend : 'Ext.Container',
    xtype  : 'locationtwo-main',

    //<debug>
    requires: [ 'LocationTwo.view.MapView' ],
    //</debug>

    config : {
        layout : 'card',
        items  : [
            {
                xtype : 'mapview'
            }
        ]
    }
});

[michael.parrott]

I think I didn't require the map view because it was included in the views: [ ] in the app.js file. Also, using the listener to add the map view was just something that I was trying differently to get it to work. I was wondering why you could add the view using a button okay but not using a listener. Doing it normally with the items config still doesn't work.

Main.js:

Ext.define( 'LocationTwo.view.Main',{
    extend: 'Ext.Container',
	requires: [ 'LocationTwo.view.MapView' ],
	
    config:
	{
		layout: 'fit',
		
		items:
		[
		{
			xtype: 'mapview'
		}
		]
    }
});

MapView.js:

Ext.define( 'LocationTwo.view.MapView',{
    extend: 'Ext.Map',
	xtype: 'mapview',
	
    config:
	{
		useCurrentLocation: false,
		
		listeners:
		{
                        //Error still occurs if this is initialize rather than maprender
			maprender: function()
			{
				navigator.geolocation.getCurrentPosition( function( position ) { }, function( error ) { }, { enableHighAccuracy: true } );
			}
		}
    }
});

Again, it's only the packaging fails using "sencha app build [package|production|testing]". It works fine when running it from localhost, which is the part that I find puzzling.

[abcd_ca]

after that type error do you get a stack trace and then another error like this?

[ERROR] Failed loading your application from: <url>

the first error distracted me from the bottom url error. I entered the url into my browser and I got a javascript error in the console and that's the problem that really needed solving. I was testing up until then with foo.com/?foo=bar but the error was citing just foo.com. It had been a while since I tested without the query param and didn't realize I had an error in there. Hopefully your problem is as simple as mine.

[bluehipy]

Well, navigator might not be defined in that context.
Did you try to use things like this:

if(navigator && navigator.geolocation && navigator.geolocation.getCurrentPosition)
{
navigator.geolocation.getCurrentPosiotion( someHandler );
}