title: Using module.exports in React ES6
body: <p>I am trying to use module.exports to create a 'global' function which I can use in my React project to make API calls using Axios.</p>
  
  <p>I have tried the following...</p>
  
  <pre><code>import axios from 'axios';
  
  module.exports = {
      fetchApi: function (endPoint) {
          var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);
  
          return axios.get(encodeURI)
              .then(function (response) {
                  return response.data
              })
      }
  }
  
  //call function in other components like this
  componentDidMount () {
      fetchApi.fetchApi(this.setState.endPoint)
      .then(function (endPoint) {
          console.log("API endpoint: " + endPoint)
      })
  }
  </code></pre>
  
  <p>this returns the error...
  'fetchApi' is not defined  no-undef</p>
  
  <p>I am aware that usually you can import and export components using export default but I thought this wasnt required if using module.export.</p>
  
  <p>Also, if I try to import like this...</p>
  
  <pre><code>import fetchApi from '../../../utils/api'
  </code></pre>
  
  <p>I get the following error...
  Attempted import error: '../../../utils/api' does not contain a default export (imported as 'fetchApi').</p>
  
  <p>Any help appreciated.  Thanks.</p>
  
  <p>Edit:</p>
  
  <p>import axios from 'axios';</p>
  
  <p><strong>Solution (Edit)...</strong></p>
  
  <p>api.js</p>
  
  <pre><code>const api = {
      fetchApi: function(endPoint){
          var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);
          console.log(encodedURI)
  
          return axios.get(encodedURI)
              .then(function (response) {
                  return response.data
  
              })
      }
  }
  
  export default api;
  </code></pre>
  
  <p>Sites.js</p>
  
  <pre><code>import api from '../../../utils/api'
  
      //single api call
      componentWillMount = async () =&gt; {
          api.fetchApi('sites')
              .then(data =&gt; {
                  console.log(data);
                  this.setState({ rows: data.rows, columns: data.columns })
              })
              .then(async () =&gt; {
                  this.setState({ tableRows: this.assemblePosts(), isLoading: false })
              });
      }
  </code></pre>
  
  <p>This gives me access to the following api endpoint...</p>
  
  <p><a href="http://localhost:3001/sites" rel="noreferrer">http://localhost:3001/sites</a></p>
  
  <p>Thanks for your help.</p>