Using require(' ') in client side

I am using a package that uses the Giphy API, which I need to use on my client-side script. I got errors in the Chrome console saying that require(’ ') is not defined. I tried using Browserify and RequireJS, but I didn’t get the hang of it. All help is accepted.

The project can be found here.

hey @khalby786! I remixed your project and I think I got the require working using browserify – you can take a look at jeweled-wormhole! There’s a new error now but I found this article that seems to cover it: Using giphy for my discord bot

(Edited because I realized my initial solution was not working!)

Also credit to this project which I used to get browserify-middleware working: https://glitch.com/edit/#!/browserify-middleware

You know @househaunt, I think all your replies to me are mostly the solutions.:grinning:

1 Like

@househaunt

I seemed to have stumbled upon a new problem. After I click the Search button to find the gif using the search, I have a new error in the Chrome Console that says

client.js:8 Uncaught TypeError: giphy.then is not a function
   at HTMLButtonElement.searchgif

hmmm…it looks like .search might take in a callback instead of returning a Promise https://github.com/Giphy/giphy-js-sdk-core/blob/master/src/GphApiClient.js#L45

What does that even mean?

Basically whenever you have an asynchronous action (i.e., you don’t know how long it will take to finish executing, like a network request for example) there are different ways of telling the browser what you want to do once the action is complete. Callbacks and Promises are two different ways of accomplishing this.

Take, for example, our function .search. With callbacks, you pass a function as an argument into search, with the expectation that it will be executed when the asynchronous action is complete.

With Promises, you expect that .search will kick off the asynchronous action, and then return a “Promise” to you – basically an object with a few methods on it. One of those methods is .then! Calling .then says – “whatever I write after .then, run it once the asynchronous action completes.”

But in this case, it looks like whoever designed the giphy-js-sdk-core package structured it to take in a callback instead.

EDIT: I may have to eat my words – I’m re-reading this documentation and it looks like if you don’t pass in a callback, it should default to a promise??? I’ll dig into it some more

1 Like

The issue was as follows:

  1. I was wrong! We could use Promises!

  2. We needed to both move the code server-side (so that we could reference the process.env variables) and also instantiate the SDK like this:

const { apiClient } = require('giphy-js-sdk-core');
const giphy = new apiClient(process.env.GIPHY_KEY);

You can see a working version of this at jeweled-wormhole – credit to @khalby786 for the base code!