Crowdin Integration with Cocos Creator 2.4.6

dheeraj.yadav · October 30, 2023, 4:49pm

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.

npm install @crowdin/ota-client
import otaClient from '@crowdin/ota-client'; ES6
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.

TaniaM · October 30, 2023, 5:27pm

Hi @dheeraj.yadav ,

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

TaniaM · November 1, 2023, 4:10pm

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!

dheeraj.yadav · November 2, 2023, 11:07am

@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"
  ]
}

andrii-bodnar · November 3, 2023, 8:58am

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

dheeraj.yadav · November 24, 2023, 6:33am

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

Crowdin with Cocos Creator 2.4.6 Github.

andrii-bodnar · November 24, 2023, 7:24am

@dheeraj.yadav thanks a lot for your example!

I will look into this.

andrii-bodnar · November 27, 2023, 3:23pm

@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.

dheeraj.yadav · February 26, 2024, 1:45pm

@andrii-bodnar @TaniaM
I have created a demo project and it’s working.
Workaround i have found - extracted OTA Client code and add it as independent one.
Main issue is that the specific axios version crowdin OTA depended on was not compatible with cocos.

MRE - GitHub - ApoorvaDheeraj/Crowdin

andrii-bodnar · February 26, 2024, 2:06pm

@dheeraj.yadav thanks for the update!

The latest version of the Crowdin OTA client uses the 1.6.0 version of Axios.

What version of Axios are you using that is compatible with Cocos?

dheeraj.yadav · February 26, 2024, 2:51pm

@andrii-bodnar I’m using Axios version which comes with - analytics-node": "^4.0.1 is
axios: ^0.21.1 .

Can be seen in package.json in linked GitHub project.

andrii-bodnar · February 26, 2024, 3:07pm

@dheeraj.yadav this is a very old version. Also, I can see that the analytics-node project is archived and deprecated.

So I would recommend using @segment/analytics-node instead. It already uses Axios 1.6.0 under the hood.

andrii-bodnar · September 12, 2024, 8:44am

Hi @dheeraj.yadav, I have a great update on the OTA JS client.

There is a new major release v2.0.0 that doesn’t include Axios anymore, so the integration should be even smoother.