question

itsjustnils avatar image
itsjustnils asked

PlayFab.d.ts not a module

Hello, I'm running into an issue where I've trouble loading the playfab sdk in TypeScript.

Code below:

     import { _decorator, Component, Node, Label } from 'cc';
        
     const { ccclass, property } = _decorator;

     // Error is here
     import PlayFab from 'playfab-web-sdk';
        
     @ccclass('NewComponent')
     export class NewComponent extends Component {
        
         start() {
         }
        
         update(deltaTime: number) {
                
         }
     }

I've installed the playfab sdk via npm and the vscode is auto-completing import PlayFab from 'playfab-web-sdk'; which means it's recognized. However, I do not understand what I need to do from here on.

After googling and learning more about TypeScript. I still have question marks as the code in PlayFab.d.ts is a tad different than most examples found on the web.

Any suggestions?

Thanks in advance!

Update: adding a decs.d.ts to the root of my project including declare module 'playfab-web-sdk' fixed the above problem, but when trying to run the code an error is thrown: index.js:1 Error: Error: Module "<main>" not found for file:///C:/Projects/CardboardCore/PlayFabTest/node_modules/playfab-web-sdk/

When trying to create a build, some extra information is given: ModuleNotFoundError: (i18n needed)resolve_error_module_not_found: {"specifier":"<main>","parentURL":"file:///C:/Projects/CardboardCore/PlayFabTest/node_modules/playfab-web-sdk/"}

This is happening using Cocos Creator.

Any support would be great!

sdks
10 |1200

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

itsjustnils avatar image
itsjustnils answered

Ended up modifying the playfab-web-sdk in such a way so it's usable for me. Now I'm happy.

3 comments
10 |1200

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Xiao Zha avatar image Xiao Zha commented ·

Is your solution the one I mentioned before? If not, can you please share how you solved it? That way, others with similar issues can refer to your workaround.

0 Likes 0 ·
itsjustnils avatar image itsjustnils Xiao Zha commented ·

I had moved all js code to ts, exported the Playfab object and changed the d.ts to ts as well. Then created a single global.d.ts and attached "PlayFab" to the window. This worked, but was not ideal.

However, I've just learned that Cocos Creator has a way to import js code as a "plugin". Like this: 5500-image.png

No need to modify anything and it just seemed to have worked.

1 Like 1 ·
image.png (13.4 KiB)
Xiao Zha avatar image Xiao Zha itsjustnils commented ·

Thanks for sharing.

0 Likes 0 ·
Xiao Zha avatar image
Xiao Zha answered

The playfab-web-sdk module is the JS SDK for the client API of PlayFab, it is for building JavaScript applications. For NodeJs, there is a playfab-sdk module which also has built-in TypeScript support with all interfaces defined already. You can try this playfab-sdk instead and see if the error still exists.

8 comments
10 |1200

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

itsjustnils avatar image itsjustnils commented ·

Thanks for the answer!

After grabbing the sdk suggested by you import { PlayFab } from 'playfab-sdk'; seems to work fine!

Now there's some cocos specific issues to fix (missing require in current environment). So I'll keep scouring the web how to fix that issue.

Cheers!

0 Likes 0 ·
itsjustnils avatar image itsjustnils commented ·

This eventually didn't work as I'm trying to set something up for a web based client. Using the playfab-sdk always requires "url" and "http" and imports the entire playfab toolchain (also server side, which i don't want on a client).

It seems I'll have to go back to the playfab-web-sdk and do some manual work to get access to client-only code.

0 Likes 0 ·
Xiao Zha avatar image Xiao Zha itsjustnils commented ·

Using "playfab-sdk" can still be an option, you can follow the document: External Module Usage Case · Cocos Creator, set the "allowSyntheticDefaultImports" option in the "compilerOptions" field to true by editing the tsconfig.json file in the project directory. If the field is not present, manually fill it in. Then you can refer to my test code that can work normally to call the loginwithcustomidid API. 5410-cocos.png

1 Like 1 ·
cocos.png (44.0 KiB)
itsjustnils avatar image itsjustnils Xiao Zha commented ·

Sorry for the late reply, as what I'm working on is a bit on a sidetrack right now. I will for sure give this a shot!

0 Likes 0 ·
Show more comments
Show more comments

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.