Crowdin Integration with Cocos Creator 2.4.6

How to use Crowdin? Tips&Tricks
1

I’m trying to integrate Crowdin to my game which is build on Cocos Creator 2.4.6
I have followed steps from here OTA Client Doc to install npm pkg.

  1. npm install @crowdin/ota-client
  2. import otaClient from '@crowdin/ota-client'; ES6
  3. Initialise the OTA client with hash key
    const client = new otaClient('xxxxxxxf1fc5823b5cff49k8nm');

But in console i’m getting error

Uncaught TypeError: _otaClient.default is not a constructor
    at HelloWorld.onLoad (eval at <anonymous> (__quick_compile__.js:238:32), <anonymous>:35:18)
    at eval (eval at createInvokeImpl (component-scheduler.js:219:57), <anonymous>:3:65)
    at CCClass._invoke (component-scheduler.js:224:13)
    at CCClass.invoke (component-scheduler.js:140:14)
    at CCClass.activateNode (node-activator.js:251:25)
    at cc_Scene._activate (CCScene.js:102:36)
    at 102.cc.Director.runSceneImmediate (CCDirector.js:480:15)

With commonJS module import - const OtaClient = require("@crowdin/ota-client");

Uncaught TypeError: OtaClient is not a constructor
    at HelloWorld.onLoad (eval at <anonymous> (__quick_compile__.js:238:32), <anonymous>:33:18)
    at eval (eval at createInvokeImpl (component-scheduler.js:219:57), <anonymous>:3:65)
    at CCClass._invoke (component-scheduler.js:224:13)
    at CCClass.invoke (component-scheduler.js:140:14)
    at CCClass.activateNode (node-activator.js:251:25)
    at cc_Scene._activate (CCScene.js:102:36)
    at 102.cc.Director.runSceneImmediate (CCDirector.js:480:15)

Any help how can i solve this issue.

2

Hi @dheeraj.yadav ,

We will check everything with our developers and get back to you

3

Hi @dheeraj.yadav,

As far as I can see my colleague has already responded to you via email. In any case, you are welcome to check how to import npm packages correctly according to your environment: Cocos Creator 3.8 Manual - External Module Usage Case

Hope this helps!

4

@TaniaM . I have follow the steps which is defined in the Adding External Module but Cocos engine isn’t able to parse Crowdin index.js throwing some undefined token error.

Added logs below


error: SyntaxError: Unexpected token (57:10) while parsing CrowdinCocos/node_modules/@crowdin/ota-client/out/index.js
    at DestroyableTransform.end [as _flush] (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/insert-module-globals/index.js:96:21)
    at DestroyableTransform.prefinish (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/readable-stream/lib/_stream_transform.js:138:10)
    at DestroyableTransform.emit (events.js:315:20)
    at DestroyableTransform.emit (domain.js:483:12)
    at prefinish (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/readable-stream/lib/_stream_writable.js:619:14)
    at finishMaybe (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/readable-stream/lib/_stream_writable.js:627:5)
    at endWritable (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/readable-stream/lib/_stream_writable.js:638:3)
    at DestroyableTransform.end (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/readable-stream/lib/_stream_writable.js:594:41)
    at Readable.onend (_stream_readable.js:681:10)
    at Object.onceWrapper (events.js:421:28) {
  type: 'syntax',
  filename: 'CrowdinCocos/node_modules/@crowdin/ota-client/out/index.js'
}

at 

/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/editor/share/quick-compile/index.ccc:1:586
    at m._transform (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/editor/share/quick-compile/index.ccc:1:4670)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
2023-11-02T10:58:15.720Z - error: Error: Parsing file CrowdinCocos/node_modules/@crowdin/ota-client/out/index.js: Unexpected token (210:28)
    at Deps.parseDeps (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/module-deps/index.js:481:28)
    at getDeps (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/module-deps/index.js:414:40)
    at /Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/module-deps/index.js:398:32
    at ConcatStream.<anonymous> (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/concat-stream/index.js:36:43)
    at ConcatStream.emit (events.js:327:22)
    at ConcatStream.emit (domain.js:483:12)
    at finishMaybe (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:475:14)
    at endWritable (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:485:3)
    at ConcatStream.end (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:455:41)
    at DestroyableTransform.onend (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/node_modules/readable-stream/lib/_stream_readable.js:577:10)
    at m._parseEntry (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/editor/share/quick-compile/index.ccc:1:6393)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 0)
    at async m._compileScripts (/Applications/CocosCreator/Creator/2.4.6/CocosCreator.app/Contents/Resources/app.asar/editor/share/quick-compile/index.ccc:1:3491)

tsconfig.json

{
  "dependencies": {
    "@crowdin/ota-client": "^1.1.0",
    "@types/node": "^20.8.10",
  }
}

package.json

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [ "es2015", "es2017", "dom" ],
    "target": "es5",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "temp/vscode-dist",
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules",
    "library",
    "local",
    "temp",
    "build",
    "settings"
  ]
}
5

@dheeraj.yadav please provide a Minimal, Reproducible Example. Thank you!

6

@andrii-bodnar I have created a POC | MRE can you please take a look into this.

Crowdin with Cocos Creator 2.4.6 Github.

7

@dheeraj.yadav thanks a lot for your example! :rocket:

I will look into this.

1 Like
8

@dheeraj.yadav I checked your project in Cocos Creator and unfortunately didn’t find a solution for this issue.

Probably, it’s something related to how they load NPM modules (Cocos Creator 3.8 Manual - External Module Usage Case).

Also, I’ve found this - Error: Current environment does not provide a require() for requiring 'crypto' - Cocos Creator - Cocos Forums. It looks like Cocos supports only a limited amount of NPM packages according to the discussion.

Due to a lack of expertise with Cocos, I can’t investigate it in more detail.