React App fetch data using Node Fetch

Question

I am using the Create-React-App starter app to play around with react. I want to test getting data with node fetch, but it does not seem to work. I am able to get it to work with axios.

I get an error to the effect that: Warning in ./~/encoding/lib/iconv-loader.js Critical dependencies: 9:12-34 the request of dependency is an expression @ ./~/encoding/lib/iconv-loader.js 9:12-34

it seems to be an error in webpack:///./~/react-scripts/~/react-dev-utils/webpackHotDevClient.js?

I also get an error that says: Failed to load resource: net::ERR_CONNECTION_TIMED_OUT and it seem like the fetch is appending the port to the url when sending the request: http://codepen.io:3000/jobs.json

Code:

import React from 'react'
import NodeFetch from 'node-fetch' 

class NodeFetchData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jobs: []
    };
  }


  componentDidMount() {

    NodeFetch('http://codepen.io/jobs.json')
    .then(res => {
      this.setState({ jobs:res.data.jobs });
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.jobs.map(job =>
            <li key={job.hashid}>{job.company_name}</li>
          )}
        </ul>
      </div>
    );
  }
}

export default NodeFetchData;

Answer 1

I suggest you use https://github.com/github/fetch , that is pretty standard, in fact this has been recently added as peer in react@15.4 ).

For more sophisticated cases ( like multiple file-uploads etc ) superagent goes good!