Giving the non EcmaScript module (only default export is available) Error

[anishkumar127]

What version of rsuite are you using?

5.56.0

What version of React are you using?

17.0.1

What version of TypeScript are you using (if any)?

4.5.5

What browser are you using?

Chrome

Describe the Bug

I'm using the spfx solution from sharepoint. when do the npm run serve giving me the this error.

ERROR in ./node_modules/react-use-set/dist/index.mjs 5:14-25
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/react-use-set/dist/index.mjs 14:23-34
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/react-use-set/dist/index.mjs 23:17-28
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/react-use-set/dist/index.mjs 34:16-27
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/react-use-set/dist/index.mjs 37:15-26
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/react-use-set/dist/index.mjs 40:9-16
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/react-use-set/dist/index.mjs 4:24-32
Can't import the named export 'useState' from non EcmaScript module (only default export is available)

Expected Behavior

I want to code should run without error.

To Reproduce

use the spfx solution of sharepoint and then install rsuite and try to start the server it will crash.

[simonguo]

#3168 (comment)

Similar question, refer to this reply to see if it helps.

[anishkumar127]

Didn't help. Im using the SharePoint spfx framework

[simonguo]

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline
Try adding the first rule to handle .mjs files.

Hi @SevenOutman, Are you considering updating react-use-set to make it compatible with these frameworks?

[SevenOutman]

What needs to be changed particularly with react-use-set?

[simonguo]

What needs to be changed particularly with react-use-set?

Change the build dist/index.mjs file to dist/index.js.

[SevenOutman]

The package exports both dist/index.mjs (ESM) and dist/index.js (CommonJS) already. webpack or other module resolution mechanisms should be choosing which file to use depending on whether you are using CommonJS-style require or ESM-style import. https://webpack.js.org/guides/package-exports/
If you choose ESM you MAY need to also configure your build system to handle .mjs extension.

[DarinaSavytska]

Please let me know when we can expect a compatibility fix with SharePoint spfx framework?