2

I've just started a new app using create-react-app which uses Webpack and need to load in some js libraries that are not available on npm but am not sure what the best method for doing this is. Basically im using the adobe marketing cloud javascript sdk to load in some JSON objects from analytics data. The way I tried to set it up in my app.js file is like so:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {$, jQuery} from 'jquery';
import MarketingCloud from './scripts/marketing-cloud-javascript-sdk/marketing_cloud';
import wsse from './scripts/marketing-cloud-javascript-sdk/wsse';

class App extends Component {
    prepReport = () => {
        console.log("testing")
    }
    render() {
    return (
      <div className="App" onLoad={this.prepReport}>
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to analytics Dashboard</h2>
        </div>
        <p className="App-intro">

        </p>
      </div>
    );
    }
}

export default App;

This throws an error in the /scripts/marketing-cloud-javascript-sdk/marketing_cloud file saying Wsse is not defined and Marketing Cloud is not defined. Here is what that file looks like:

import {$, jQuery} from 'jquery';

(function($) {
  window.MarketingCloud = {
    env:   {},
    wsse:  new Wsse(),

    /** Make the api request */
    /* callback should follow standard jQuery request format:
     *    function callback(data)
     */
    makeRequest: function (username, secret, method, params, endpoint, callback)
    {
        var headers = MarketingCloud.wsse.generateAuth(username, secret);
        var url = 'https://'+endpoint+'/admin/1.4/rest/?method='+method;
        $.ajax(url, {
            type:'POST',
            data: params,
            complete: callback,
            dataType: "json",
            headers: {
                'X-WSSE': headers['X-WSSE']
            }
        });
    }
  };
})(jQuery);

Before it was throwing a jquery is not defined error but I fixed this by importing the jquery package in the marketing_cloud file as you can see at the top of the code. The Wsse file is also throwing a few errors all saying

'rval' is not defined

When I tested the SDK not in react I would just include both the scripts as just <script src=...></script> tags in the header and then I could access the functions no problem such as MarketingCloud so ideally i'm trying to get to the same point within React so I can call MarketingCloud on click or whatever.

Can anyone spot where i've gone wrong and what the best practice is for including external libraries that aren't on NPM such as this one in React projects?

Thanks

red house 87
  • 1,837
  • 9
  • 50
  • 99
  • It seems like these files do not enjoy being parsed by babel. You can either load them as externals(and just add script tags in your index.html), or ask babel not to parse these files(as they're probably already production-ready) – Patrick May 04 '17 at 15:14
  • If I add script tags to my index.html how can I refer back to the function in my app? ie if I want to call the MarketingCloud function on click or something. Currently if I do this it says MarketingCloud is undefined as I have not imported it anywhere in the App.js – red house 87 May 04 '17 at 15:27
  • You'd have to add those functions to the global scope. The specifics depend on your build tools - in webpack for example you can provide "globals". here's a link to all webpack users out there http://stackoverflow.com/questions/37656592/define-global-variable-with-webpack – Patrick May 04 '17 at 15:30
  • Looks very confusing, will have to search for an alternative way if I can't find a decent example – red house 87 May 04 '17 at 15:51
  • Yes it is, an alternative as I wrote is to avoid parsing those libraries with babel, this depends on your build tool. – Patrick May 04 '17 at 15:52
  • any idea where I could start with excluding the library? – red house 87 May 05 '17 at 08:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143491/discussion-between-patrick-and-ben-liger). – Patrick May 05 '17 at 11:11

0 Answers0