0

Here is my code and my only problem in fetch and axios are not working.Do i need to add some plugins for promise or fetch inmy webpack.config.js to achieve so?If i use cdn for fetch then it works fine.Please guide how to implement it in webpack

    var React=require('react');
var ReactDOM=require('react-dom');
var fetch=require('fetch');
var Header = React.createClass({
      getOccasion: function(evt) {
          alert(evt.target.value)
            fetch('/holidays/occasion', {
              credentials: 'same-origin',
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
               state: evt.target.value,
             })
            });
          },
  render: function() {
var state=this.props.holidays.state;
var ButtonGroup = ReactBootstrap.ButtonGroup,
Button  = ReactBootstrap.Button;
    return (
      <div>
      <ButtonGroup>
      <Button bsStyle="danger">Danger!</Button>
  </ButtonGroup>

      <select onChange={this.getOccasion}>
      <option value="states">States</option>
      {
          this.props.holidays.map(function(holidays,i) {
          return <option key={i}
            value={holidays.state}>{holidays.state}</option>;
        })
      }
    </select>




      </div>
    );
  }
});

Update:App.js

    var React=require('react');
var ReactDOM=require('react-dom');
var Pusher=require('pusher-js');
var fetch = require('node-fetch');

var Header=require('./components/header.js');
var App = React.createClass({
  getInitialState: function() {
    return { items: [], holidays: [] };
  },

  componentWillMount: function() {
      alert("in mount")

    this.pusher = new Pusher("ba34e3874d4b87905f36", {
      encrypted: true,
      cluster: 'ap2',
    });
    this.channel = this.pusher.subscribe("doodles");
    this.total = 0;
    alert("in pusher")
  },

  componentDidMount: function() {
      alert("in did")


   fetch('/holidays',{credentials: 'same-origin',}).then(function(response) {
        return response.json();
    }).then(this.getHolidaysSuccess);

  },
  componentWillUnmount: function() {
    // Unbind from channel events
    this.channel.unbind();

    // Unsubscribe from the Pusher channel
    this.pusher.unsubscribe(this.channel);

    // Unregister by assign them to an empty function
    this.getHolidaysSuccess = function() {};

  },


  getHolidaysSuccess: function(response) {

       alert(JSON.stringify(response))

    this.setState({
        holidays: response
    });
  },


  render: function() {
      alert("in render1")

    return (
      <div>

<Header holidays={this.state.holidays} />

      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById("app"));

my webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: './src/main/resources/static/js/app.js',
  output: {
    path: __dirname + '/src/main/resources/static/js', 
    filename: 'bundle.js' 
  },


  module: {

    loaders: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      } ]
  },

      plugins: [  
                new webpack.ProvidePlugin({
                      Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
                      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
                 })
            ]
};

1 Answer 1

1

You need to install and import fetch from node-fetch instead of fetch like

 npm install -S node-fetch

and then import like

var fetch = require('node-fetch');

DOC

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

9 Comments

it is not working.Even alert in componentdidmount is not called after render
alert("in did") in componentdidmount in App.js
You have an extra comma here fetch('/holidays',{credentials: 'same-origin',})
still not working after removing ','.Webpack should have thrown this error while compiling
it is showing a warning ie warning in encoding/iconv-loader.js
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.