Is there a way to use cdn files with reactjs using webpack?

Question

I am not able to configure pusher and fetch using npm in reactjs.Also,is there any way to use cdn inside your react code?

Answer 1

You can use the react-async-script-loader as a Higher Order Component for this: https://github.com/leozdgao/react-async-script-loader

Just install it via npm:

npm install --save react-async-script-loader

then Import it and extend your component that needs the cdn javascripts with the scriptLoader giving it the urls you would like to include for your component.

import scriptLoader from 'react-async-script-loader';

// Your component code:
class YourComponent extends React.Component {
  render() {
    return <p>{
      this.props.isScriptLoadSucceed ? 'Scripts loaded.' : 'Loading...'
    }</p>;
  }
}

export default scriptLoader([
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'
])(YourComponent);

This way the files are only loaded where you really need them. Once loaded, they do not get included again (if you update the component).

Decorator (ES7) syntax works as well if you like it more than a HOC implementation, this is documented in the projects README.

Answer 2

Finally i came up with a very simple answer

install npm pusher-js,es6-promise and isomorphic-fetch and import it as

var Pusher=require('pusher-js');
var fetch=require('isomorphic-fetch');
require('es6-promise').polyfill();