Error [ERR_REQUIRE_ESM]: require() of ES Module ..../node_modules/quasar/lang/en-GB.js from ..../node_modules/.cache/quasar-app-extension-ssg not supported.

[gyohng]

For a project where ssg used to work before (webpack-based), right now when I run quasar ssg generate, I get the following error at the end:

(I edited out the project path)

Error [ERR_REQUIRE_ESM]: require() of ES Module ..../node_modules/quasar/lang/en-GB.js from ..../node_modules/.cache/quasar-app-extension-ssg not supported.

Instead change the require of en-GB.js in ..../node_modules/.cache/quasar-app-extension-ssg to a dynamic import() which is available in all CommonJS modules.
    at _require (..../node_modules/@quasar/ssr-helpers/lib/create-bundle.js:56:9)
    at render-app.js:1:4286
    at render-app.js:1:5887
    at Object.<anonymous> (render-app.js:1:5908)
    at evaluateModule (..../node_modules/@quasar/ssr-helpers/lib/create-bundle.js:96:21)
    at evaluateEntry (..../node_modules/@quasar/ssr-helpers/lib/create-bundle.js:187:31)
    at runApp (..../node_modules/quasar-app-extension-ssg/src/webpack/create-renderer.js:283:35)
    at renderToString (..../node_modules/quasar-app-extension-ssg/src/webpack/create-renderer.js:325:25)
    at PagesGenerator.v [as renderToString] (..../node_modules/.cache/quasar-app-extension-ssg/render-to-string.js:1:897)
    at PagesGenerator.renderPage (..../node_modules/quasar-app-extension-ssg/src/webpack/PagesGenerator.js:237:25)
    at PagesGenerator.generatePage (..../node_modules/quasar-app-extension-ssg/src/webpack/PagesGenerator.js:181:23)
    at PagesGenerator.<anonymous> (..../node_modules/quasar-app-extension-ssg/src/webpack/PagesGenerator.js:123:22)
    at PagesGenerator.asyncWrapper (..../node_modules/fastq/queue.js:235:12)
    at push (..../node_modules/fastq/queue.js:131:14)
    at ..../node_modules/fastq/queue.js:254:7
    at new Promise (<anonymous>)
    at Object.push (..../node_modules/fastq/queue.js:253:13)
    at ..../node_modules/quasar-app-extension-ssg/src/webpack/PagesGenerator.js:165:18
    at Array.forEach (<anonymous>)
    at PagesGenerator.generate (..../node_modules/quasar-app-extension-ssg/src/webpack/PagesGenerator.js:160:12)
    at ..../node_modules/quasar-app-extension-ssg/src/webpack/cmd/generate.js:131:45 {
  code: 'ERR_REQUIRE_ESM',
  hint: 'Could not pre-render page for route \x1B[1m/\x1B[22m'
}

The site generated by the ssg extension tries to import quasar/lang/en-GB.js and quasar/icon-set/fontawesome-v6-pro.js and fails with the above error.

These files are present in autogenerated ./quasar-user-options.js, and imported correctly via ESM import. They are also specified in quasar conf as:

 framework: {
      config: {
        ripple: true,
      },

      iconSet: "fontawesome-v6-pro", // Quasar icon set
      lang: "en-GB", // Quasar language pack
....

I'm not sure what SSG does differently from Quasar, but builds using SSR and other modes work just fine and do not cause this exception. At some point during the ssg generate process those js imports turn into require(...) calls.

I can patch it temporarily by removing "type":"module", from package.json that belongs to quasar, also replace export default { with module.exports = { in the quasar javascript files inside node_modules, but I wonder if there's something about the ssg build process that can be altered to make it work out of the box.

[gyohng]

Sample minimal projects:

• bugdemossg-webpack.zip
• bugdemossg-vite.zip

I was looking into this with vite, and found that vite doesn't work either, but for a different reason due to iconSet resolution, which tries to take a subscript of null. Here are two minimal sample projects freshly created with the latest Quasar that demonstrate the problem.

The only change I made is uncommenting lang and uncommenting iconSet (and adding it to the extras list) in quasar.config.js. If you don't trust the attached zip files, just making these changes in the config file for a fresh project achieves the same result.