Using Playfab SDK with ReactJS?

Question

I am trying to use Playfab SDK on my React project, but no success yet..

I can't find well explained documentation for it.

• created a react app with:

npx create-react-app playfabtest

• installing PlayFab SDK for nodejs:

  npm install playfab-sdk

NOTE: ( there is another SDK for JavaScript (npm install playfab-web-sdk), but I am assuming that for a react app, the nodes is the correct one ?)

The documentation for those SDK

• Modified the App.js file on the project with this code: (tried in many ways actually, I put the last one tried that didn't work neither).

---

App.js:

// import { PlayFabClient } from './playfab-sdk/Scripts/PlayFab/PlayFabClient';

// var PlayFabClient = require('./PlayFabSdk/Scripts/PlayFab/PlayFabClient.js')

function App() {
  const PlayFabClient = require('./PlayFabSdk/Scripts/PlayFab/PlayFabClient.js');

  PlayFabClient.settings.titleId = '';
  PlayFabClient.settings.developerSecretKey = '';

  PlayFabClient.GetTitleData({ Keys: ['Sample'] }, function (error, result) {
    if (error) {
      console.log('Got an error: ', error);
      return;
    }

    console.log('Reply: ', result);
  });

  return ...
}

---

• After that, if I run : npm start

get this error :

---

error:

Compiled with problems:

ERROR in ./src/PlayFabSdk/Scripts/PlayFab/PlayFab.js 4:10-24

Module not found: Error: Can't resolve 'url' in 'D:\Github\playfabtest\src\PlayFabSdk\Scripts\PlayFab'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url' If you don't want to include a polyfill, you can use an empty module like this:     resolve.fallback: { "url": false }


ERROR in ./src/PlayFabSdk/Scripts/PlayFab/PlayFab.js 6:12-28

Module not found: Error: Can't resolve 'https' in 'D:\Github\playfabtest\src\PlayFabSdk\Scripts\PlayFab'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this:    resolve.fallback: { "https": false }

---

Would be very helpful if can explain how to make PlayfabSDK run well on a react app.

Thanks a lot!

Answer 1

In the context of Create React App, you need to use ES6 style import statement instead of require to import the playfab-sdk NPM package into your project. Also you need to set the settings on the PlayFab object instead of the PlayFabClient.

Example:

import { useEffect, useState } from 'react';
import { PlayFab, PlayFabClient } from 'playfab-sdk'

PlayFab.settings.titleId = process.env.REACT_APP_PLAYFAB_TITLE_ID || ''
PlayFab.settings.developerSecretKey = process.env.REACT_APP_PLAYFAB_DEVELOPER_SECRET_KEY

// continue with component implementation
const App {
  // get title data
  PlayFabClient.GetTitleData(...)
  // etc...
}

export default App