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.

Answer 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;
  });
};