Undefined function by using es6 and react

Question

I'm getting an undefined while calling function from other file, I'm using webpack, babel, es6 and react, according to the standars I think that I'm doing the things right, but this is what I'm seeing in the console

TypeError: _openWeatherMap.getTemp(...) is undefined[Saber más] bundle.js:25033:9 GET XHR response from request [HTTP/1.1 200 OK 232ms] //the request was made no matter the undefined

this are my files

//open-weather-map.js

import axios from 'axios';

const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=*************&units=metric';

export function getTemp(location) {
  var encodedLocation = encodeURIComponent(location);
  var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;
  axios.get(requestUrl).then((res) => {
    if(res.data.cod && res.data.message) {
      throw res.data.cod;
    } else {
      return res.data.main.temp;
    }
  }, (res) => {
    throw (res && ((res.response && res.response.data && (res.response.data.message || res.response.data)) || (res.code))) || res;
  });
};


//weather.js


import React, { Component } from 'react';
import WeatherForm from 'weather-form';
import WeatherMessage from 'weather-message';
import { getTemp } from 'open-weather-map';

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location: 'Miami',
      temp: 88
    };
  }
  handleSearch(location) {
    var that = this;

    getTemp(location).then((temp) => {
      that.setState({ location, temp });
    }, (err) => {
      alert(err);
    });
  }
  render() {
    let {location, temp} = this.state;
    return (<div>
      <h3>Weather component</h3>
      <WeatherForm onSearch={this.handleSearch.bind(this)}/>
      <WeatherMessage location={location} temp={temp}/>
    </div>);
  }
}

export default Weather;


//webpack.config.js
module.exports = {
  entry: './app/app.jsx',
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    alias: {
      main: 'app/components/main.js',
      nav: 'app/components/nav.js',
      weather: 'app/components/weather.js',
      about: 'app/components/about.js',
      examples: 'app/components/examples.js',
      'weather-form': 'app/components/weather-form.js',
      'weather-message': 'app/components/weather-message.js',
      'open-weather-map': 'app/api/open-weather-map.js'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-0']
      },
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/
    }]
  }
};

I hope that you can help me with this, because I have wasted my chances here, in advance many thanks for your kindly help.

This is just an aside: if you add this to the constructor: this.handleSearch = this.handleSearch.bind(this) and use this for the onSearch property: this.handleSearch, then you'll get a little better performance since React won't recreate the function every time it renders the Weather component. — James Kraus
– James Kraus, Commented May 17, 2017 at 13:07

Dan Mindru · Accepted Answer · 2017-05-17 13:10:13Z

1

You need to return axios.get(...) in your getTemp method.

The implicit return value of a function is undefined. So you're trying to access .then() of undefined, therefore the error.

//open-weather-map.js

import axios from 'axios';

const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=*************&units=metric';

export function getTemp(location) {
  var encodedLocation = encodeURIComponent(location);
  var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;

  return axios.get(requestUrl).then((res) => {
    if(res.data.cod && res.data.message) {
      throw res.data.cod;
    } else {
      return res.data.main.temp;
    }
  }, (res) => {
    throw (res && ((res.response && res.response.data && (res.response.data.message || res.response.data)) || (res.code))) || res;
  });
};

answered May 17, 2017 at 13:10

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erick Garve Over a year ago

Many thanks that was the exactly issue, I will return the promise the next time

Dan Mindru Over a year ago

Glad to help. Happy coding! :)

Collectives™ on Stack Overflow

Undefined function by using es6 and react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related