Getting ERR_REQUIRE_ESM in SSR when using Quill

[lvshuang]

Hi everyone:
My project works well in my Macbook Pro with command 'quasar dev -m ssr '.
I built the project with command 'quasar build -m ssr'.
When I deployed the built code to my server, and ran it with command 'yarn start', I got the following error:

yarn run v1.22.22
$ node index.js
/path/web/server/server-entry.js:1
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue"),l=require("vue/server-renderer"),La=require("pinia"),Bt=require("vue-router"),ep=require("vuedraggable"),tp=require("moment"),lp=require("ali-oss"),ap=require("quill"),op=require("quill-toggle-fullscreen-button"),np=require("quill-better-table"),rp=require("browser-image-compression"),ip=require("axios"),sp=require("vue-i18n");function Il(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function up(t){if(t&&t.__esModule)return t;var o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(a){if(a!=="default"){var n=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(o,a,n.get?n:{enumerable:!0,get:function(){return t[a]}})}}),o.default=t,Object.freeze(o)}var ht=Il(ep),Nl=Il(tp),dp=Il(lp),oa=Il(ap),cp=Il(op),mp=Il(np),pp=Il(rp),sn=Il(ip);/*!
                                                                                                                                                                                                                                                                                        ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/web/node_modules/quill/quill.js from /path/web/server/server-entry.js not supported.
Instead change the require of quill.js in /path/web/server/server-entry.js to a dynamic import() which is available in all CommonJS modules.
    at Module.<anonymous> (/path/web/server/server-entry.js:1:281) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.18.2
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I don't know what happened and i have no idea how to fix this problem! Can anyone tell me how to fix it and why this happened?
Thanks!!

[yusufkandemir]

quill is an ESM package, and you are most likely using app-vite v1 or app-webpack v3 (leaving it to us to guess rather than provide info). So, you are using CJS on the server and can't import ESM. So, depending on your possibilities, you can either wrap quill-related components in <q-no-ssr>, or upgrade to app-vite v2 / app-webpack v4 to be able to use ESM SSR.

[yusufkandemir]

To clarify, if quill was configured to be ESM and CJS compatible, then it would have worked directly.

[lvshuang]

Thanks, I upgraded to app-vite v2 and fixed this problem!