Using Playfab SDK with ReactJS? - 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