Issue with Vitest and PrimeReact

[sara1989mohammadi]

Dear PrimeReact Team,

I am currently using PrimeReact in my project and have encountered an issue while running my tests with Vitest in a happy-dom environment.(i m using Editor component.)

The error I’m facing is as follows: require() of ES Module /node_modules/quill/quill.js from /node_modules/primereact/editor/editor.cjs.js not supported. Instead, change the require of quill.js in /node_modules/primereact/editor/editor.cjs.js to a dynamic import() which is available in all CommonJS modules.

This error indicates that there is an issue with how Quill is being imported in the PrimeReact Editor component. Specifically, it seems that the component is trying to require the Quill module as a CommonJS module, which is not supported since Quill is an ES Module.

I would appreciate any guidance or suggestions you could provide to help resolve this issue. For reference, here are the versions I am using:

Vitest: 1.5.0 Quill: ^2.0.2 PrimeReact: ^10.8.3 Happy-Dom: ^14.12.3

Thank you for your support!

[melloware]

Not sure anything can be done to fix this the way the component is designed to not enforce users to have quill installed to use PR.

[sara1989mohammadi]

HI @melloware Quill is a mandatory dependency for the PrimeReact Editor component because it serves as the underlying rich text editor. The PrimeReact Editor is built on top of Quill, so you need to install it to use the Editor component properly.

[melloware]

Yes its an "optional" dependency not required. If you use the Editor you must npm install it if you don't use the Editor PrimeReact does not enforce this dependency. Its the same with the Charts component and Charts.JS

[sara1989mohammadi]

@melloware I'm using Editor component, and created test with vitest , so i got error. The error I’m facing is as follows: require() of ES Module /node_modules/quill/quill.js from /node_modules/primereact/editor/editor.cjs.js not supported. Instead, change the require of quill.js in /node_modules/primereact/editor/editor.cjs.js to a dynamic import() which is available in all CommonJS modules.

[melloware]

Yep its right here: https://github.com/primefaces/primereact/blob/5d9098e234795506b1054e8c33bd29217185cac2/components/lib/editor/Editor.js#L50

Its dynamic not statically linked.

[sara1989mohammadi]

@melloware I got error about these line

[melloware]

Yep that is the dynamic import

https://github.com/primefaces/primereact/blob/5d9098e234795506b1054e8c33bd29217185cac2/components/lib/editor/Editor.js#L52-L67

it loads the Editor only if the user has added it to their project and you are using the Editor component.

[sara1989mohammadi]

@melloware I understand. I'm using Editor and created a test with Vitest, but when I run the test, I encounter an error related to Quill.

[melloware]

Yep I understand and I am telling you it won't be fixed.... Its Dynamically loaded on purpose. Its not a bug.

[sara1989mohammadi]

Thank you for your explanation. @melloware I understand that the purpose of using dynamic import for Quill in PrimeReact is to avoid unnecessary dependencies. However, the issue I'm facing occurs when running tests with Vitest and happy-dom, and it seems that Vitest doesn’t handle dynamic imports well, especially in testing environments like happy-dom. Given that unit testing is an important part of the software development cycle, this issue could be problematic in many projects. Is there a solution that would allow development teams using testing tools like Vitest to overcome this issue?

[melloware]

I am not familiar with Vitest so not sure.