Import destructuring of libraries doesn't work

Cocos Creator
#1

Hi,

I cannot find a way to import several libraries such as Redux or RxJS through standard imports

e.g. import { configureStore } from '@reduxjs/toolkit';

This will result in a runtime error (configureStore is undefined). I think this is because it is resolved as a CJS module containing a default entry.

Using import toolkit from '@reduxjs/toolkit'; and then const { configureStore } = toolkit; works though. But as you can imagine, it is pretty cumbersome and doesn’t works well with IDE autoimports.

Redux is used as a reproducible example here but this happens with several third party libraries.

I tried several typescript configurations (module and moduleResolution for example) with no avail. Is there a way to configure TS or CC so it works as it should or maybe can you consider looking into this as a bug and plan a fix?

2 Likes
#2

sorry, for now named import from a CommonJS module is not support,
maybe you can use import all statement

import * as foo from '@reduxjs/toolkit';

foo.configureStore

there is an related known issue to track here: [Feature Request] Warn if importing CommonJS through named import pattern · Issue #10839 · cocos/cocos-engine · GitHub
maybe we cound also support “named export guess”

1 Like
#3

Thank you for the link to the issue. I’m now following it. It would be nice to have support of named exports in CJS too indeed!