Cocos Creator v3.0 and NPM Modules

[Ronsku]

Hi,

Tried out quickly a CC v3.0 with NPM modules, since it now says it should be working with them. I got immediately errors of it.

I created a super simple test with a button and one RxJS timer to demonstrate the most simplest way using one NPM module, one component and one function.

Cocos3test.zip (3.9 MB)

What am I doing wrong?

[pandamicro]

It should work actually, but our developer in charge of it is in spring festival vacations, so I will let him investigate into your project after that

[Ronsku]

Thank you for your response @pandamicro. When he/she is back, let him/her know about my post and my example project. Example should be very straight forward to test from.

[shrinktofit]

Sorry for being late. Since rxjs is published in CommonJS format, you can not use its named exports at present(from your asset modules, in ESM format). Contents of module.exports of rxjs can be accessed through ESM default export. You should use rxjs like this:

import rxjs from 'rxjs'; // Syntax sugar: `import { default as rxjs } from 'rxjs'`;
const { timer } = rxjs; // Syntax sugar: `const timer = rxjs.timer;`

To consume CommonJS modules/npm packages you have to take care of some rules. But unfortunately we haven’t finished the english edition manual yet. You may take a look at Modules: ECMAScript modules | Node.js v15.9.0 Documentation. We are following similar rules like Node.js does.

[Ronsku]

@shrinktofit Thanks for your response!

I see, but why does it work just fine in 2.4.4 and older versions? Are you still working on it and will it be working like in 2.4.4 later on? The regular way of importing with
import { timer, rxjs, Observable } from 'rxjs';
Works in every software the same, why not in Cocos Creator 3.0?

[shrinktofit]

Works in every software the same, why not in Cocos Creator 3.0?

It does not work in raw Node ES module context:

The limitation here is due to how ES module interoperates with CommonJS. You might see it work since it’s handled by bundling tools like rollup/webpack/browserify and these tool have their different semantic, options. We selected the most simple rule: follow the semantic defined by Node — just because npm is the abbreviation of Node.js package manager.

[Horchynskyi]

Hi, I also have a problem, I am trying to import sentry module, but gets errors in editor and strange import output.
Here is the result of:

import * as Sentry from '@sentry/browser';

console.log(Sentry);

I get strange object with default property what contains exports.

I also tried like this and IDE shows everything ok, but init function is undefined when I run project:

[StudioAMK]

@Horchynskyi

import * as Sentry from '@sentry/browser';

Please try this

import { default as Sentry } from '@sentry/browser';

[Horchynskyi]

[StudioAMK]

@Horchynskyi

From the first line in the log, you can find that “default” was there.
So, it should work at the run time.

[yufang.wu]

rxjs does not work as normal npm, simply because it has a problem with package.json and does not support running on the native ESM module system. See ESM version is never used · Issue #6321 · ReactiveX/rxjs (github.com) for more details.

The following is a solution for using rxjs in Creator:

• Principle: use Import maps feature of Creator (supported in v3.3) to map rxjs directly to rxjs.umd.js, skipping the package.json of rxjs.

• Create a new import-map.json file in the project root directory with the following contents:

  {
      "imports": {
          "rxjs": "./node_modules/rxjs/dist/bundles/rxjs.umd.js"
      }
  }
  

• Then return to the editor, click Project → Project Settings → Scripting in the top menu bar, and then specify the import-map.json file you just created in the Import maps option.

• Restart the editor (it needs to be restarted after setting Import maps. Live updates are not yet available).

• Used in this way:

  import rxjs from 'rxjs';
  const { Observable } = rxjs;
  

For more information about Import maps, please refer to the documentation Import Maps (experimental).

[Ronsku]

@yufang.wu Thanks for your detailed response!