Cocos Creator v3.0 and NPM Modules


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. (3.9 MB)

What am I doing wrong?

1 Like

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

1 Like

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.

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.

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

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.