Issue with using rxjs npm module on Cocos Creator 3.x!

Cocos Creator
#1

Hello, I was trying to upgrade my Cocos Creator 2.4.2 game project to Cocos Creator 3.x
(2.4.2 original project was working comptlety ok on 2.4.3)

Upgrading code was succesful except rxjs module…

but having issue on importing rxjs module. Spent 2 weeks on solving this issue … :sob: :sob:

please help me fixing this…
or Cocos Creator 3.x + rxjs example project will be helpful for me .

Please someone could provide me example project that has rxjs on it??

examples projects with rxjs on git are all cocos creator 2.x :sob:

I ‘ve searched and tried all of forum posts’ methods, but nethier worked:

  1. using umd.js with import map
  2. extracting rxjs into project directory
  3. npm安装了rxjs包之后，构建时勾选source map就会出错 - Creator 2.x - Cocos中文社区
    3.0的rxjs模块如何导入呢？ - Creator 3.x - Cocos中文社区

2
21060×701 8.98 KB

I ‘ve searched and tried all of forum posts’ methods, but nethier worked:

  1. using umd.js with import map
  2. extracting rxjs into project directory
  3. npm安装了rxjs包之后，构建时勾选source map就会出错 - Creator 2.x - Cocos中文社区
    3.0的rxjs模块如何导入呢？ - Creator 3.x - Cocos中文社区 
[Scene] Error: Error: Invalid module specifier
at rejector (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:759:15)
at ExecutorSystem.resolve [as _detailResolve] (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:777:13)
at ExecutorSystem._resolve (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\editor-systemjs\index.ts:120:14)
at SystemJS.resolve (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\editor-systemjs\index.ts:36:23)
at C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:355:37
at Array.map (<anonymous>)
at C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:353:41
at file:///C:/Users/zi_zi/Downloads/132213/temp/programming/packer-driver/targets/editor/chunks/5f/cce:/internal/x/prerequisite-imports:8:13
at Object.execute (file:///C:/Users/zi_zi/Downloads/132213/temp/programming/packer-driver/targets/editor/chunks/5f/cce:/internal/x/prerequisite-imports:4:1)
at Executor._importPrerequisiteModules (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\executor\index.ts:263:13)
Error: [Scene] Error: Error: Invalid module specifier
at SystemJS.resolve (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\editor-systemjs\index.ts:36:23)
at C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:355:37
at Array.map (<anonymous>)
at C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:353:41
at file:///C:/Users/zi_zi/Downloads/132213/temp/programming/packer-driver/targets/editor/chunks/5f/cce:/internal/x/prerequisite-imports:8:13
at Object.execute (file:///C:/Users/zi_zi/Downloads/132213/temp/programming/packer-driver/targets/editor/chunks/5f/cce:/internal/x/prerequisite-imports:4:1)
at Executor._importPrerequisiteModules (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\executor\index.ts:263:13)
at Logger._logHandler (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\builtin\scene\dist\script\3d\manager\startup\log.ccc:1:318)
at Logger.record (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@base\electron-logger\lib\renderer.ccc:1:458)
at console.error (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@base\electron-logger\lib\renderer.ccc:1:1414)
at ScriptManager._handleImportException (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\builtin\scene\dist\script\3d\manager\scripts.ccc:1:5375)
at Executor.importExceptionHandler [as _importExceptionHandler] (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\builtin\scene\dist\script\3d\manager\scripts.ccc:1:3367)
at Executor._onModuleLoaded (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\executor\index.ts:312:22)
at SystemJS.onload (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\src\executor\index.ts:73:18)
at triggerOnload (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:270:10)
at C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:431:7
at file:///C:/Users/zi_zi/Downloads/132213/temp/programming/packer-driver/targets/editor/chunks/5f/cce:/internal/x/prerequisite-imports:8:13

3d40546d-1ba3-428a-9547-8c84005ba479 (1)
3d40546d-1ba3-428a-9547-8c84005ba479 (1)1072×470 42.4 KB

스크린샷 2023-06-11 202249
스크린샷 2023-06-11 2022491239×709 68.4 KB

13131
13131932×196 12.6 KB

#3

tried this solution on cocosCreator 3.7.3 Car sample project, but. :sob:

got this error

스크린샷 2023-06-12 011822
스크린샷 2023-06-12 0118221704×622 60 KB

or

22131222
221312221253×1338 193 KB 

 [Scene] Error: Error: Unexpected export statement in CJS module.
at @:1:8
at Object.execute (file:///F:/game/NewProject_2/temp/programming/packer-driver/targets/editor/chunks/db/db871e03bd39729f90582e139037492f481606ff.js:8:13)
at doExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:517:30)
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:508:21)
at C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:491:10)
at C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:491:10)
at C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:440:12
Error: [Scene] Error: Error: Unexpected export statement in CJS module.
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:508:21)
at C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:491:10)
at C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:491:10)
at C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:440:12
at Logger._logHandler (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\builtin\scene\dist\script\3d\manager\startup\log.ccc:1:318)
at Logger.record (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@base\electron-logger\lib\renderer.ccc:1:458)
at console.error (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@base\electron-logger\lib\renderer.ccc:1:1414)
at ScriptManager._handleImportException (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\builtin\scene\dist\script\3d\manager\scripts.ccc:1:5259)
at Executor.importExceptionHandler [as _importExceptionHandler] (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\builtin\scene\dist\script\3d\manager\scripts.ccc:1:3396)
at Executor._onModuleLoaded (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\src\executor\index.ts:316:22)
at SystemJS.onload (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\src\executor\index.ts:77:18)
at triggerOnload (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:270:10)
at doExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:538:7)
at postOrderExec (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\node_modules\@editor\lib-programming\static\executor\systemjs-bridge\out\index.js:508:21)
 
 [Scene] Missing class: c5aa7IsWr5A4blPeFPanXM/
Error: [Scene] Missing class: c5aa7IsWr5A4blPeFPanXM/
at Object.classFinder (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\app.asar\builtin\engine\dist\editor-extends\missing-reporter\missing-class-reporter.ccc:1:2131)
at _Deserializer.classFinder [as _classFinder] (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\resources\3d\engine\bin\.cache\dev\editor\bundled\index.js:136986:34)
at _Deserializer._deserializeTypeTaggedObject (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\resources\3d\engine\bin\.cache\dev\editor\bundled\index.js:46692:30)
at _Deserializer._deserializeObject (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\resources\3d\engine\bin\.cache\dev\editor\bundled\index.js:46633:29)
at _Deserializer._deserializeAndAssignField (C:\ProgramData\cocos\editors\Creator\3.7.3\resources\resources\3d\engine\bin\.cache\dev\editor\bundled\index.js:46841:38)

the project file
https://drive.google.com/file/d/1ypkV6Q1Cs4EbNnYjmY6Wrq2uJtt7czRq/view?usp=sharing
the car example project on 3.7.3 cocos creator

what I did –

  1. npm install rxjs --save
  2. addded import-map.json
  3. added simple rxjs test code on assets/script/main.ts
#4 
import { from } 'rxjs';
import { filter, map } from 'rxjs/operators';

->>

import rxjs from 'rxjs';
const { filter, from, map } = rxjs;

not it works!!

1 Like
#5

Are you sure there is a from inside the export ?

#6

oh mistake was made, wait .
yes. that looks confusing
:grinning:

image
image947×689 38.1 KB

https://rxjs.dev/api/index/function/from

#7

Oh, got it, thanks for sharing the solution

1 Like