Using import() instead require() for ESM only modules in /dist/ssr/server/server-entry.js file

[sergeykorobeynikov]

What happened?

Quasar incorrectly generates server code when connecting ESM modules without CommonJS support.

What did you expect to happen?

Using import() for ESM-only modules and require() for CommonJS in /dist/ssr/server/server-entry.js file.

Reproduction URL

https://github.com/sergeykorobeynikov/ssr-with-esm

How to reproduce?

1. Clone the project from the repository.
2. Run yarn build -m=ssr
3. Run node dist/ssr, and see:

root@pc ssr-with-esm % node dist/ssr /Users/root/Projects/ssr-with-esm/dist/ssr/server/server-entry.js:1 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("vue"),bl=require("vue/server-renderer"),ln=require("vue-router"),cu=require("ol/Map"),vu=require("ol/source/OSM"),pu=require("ol/layer/Tile"),fu=require("ol/View");function xa(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var mu=xa(cu),hu=xa(vu),gu=xa(pu),bu=xa(fu);/*! ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/root/Projects/ssr-with-esm/node_modules/ol/Map.js from /Users/root/Projects/ssr-with-esm/dist/ssr/server/server-entry.js not supported. Instead change the require of Map.js in /Users/root/Projects/ssr-with-esm/dist/ssr/server/server-entry.js to a dynamic import() which is available in all CommonJS modules. at Module. (/Users/root/Projects/ssr-with-esm/dist/ssr/server/server-entry.js:1:192) at Object. (/Users/root/Projects/ssr-with-esm/dist/ssr/index.js:1:1232) { code: 'ERR_REQUIRE_ESM' }

Node.js v18.20.3

5. Open /dist/ssr/server/server-entry.js and replace:

   var t=require("vue"),bl=require("vue/server-renderer"),ln=require("vue-router"),cu=require("ol/Map"),vu=require("ol/source/OSM"),pu=require("ol/layer/Tile"),fu=require("ol/View");

   to

   var t = require('vue');
   var bl = require('vue/server-renderer');
   var ln = require('vue-router');
   var cu = import('ol/Map.js');
   var vu = import('ol/source/OSM.js');
   var pu = import('ol/layer/Tile.js');
   var fu = import('ol/View.js');

6. Run node dist/ssr.

7. It worked!

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SSR Mode

Platforms/Browsers

Other

Quasar info output

Operating System - Darwin(21.6.0) - darwin/x64
NodeJs - 18.20.3

Global packages
  NPM - 10.7.0
  yarn - 1.22.19
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

Launching SSR mode does not depend on the browser.

[sergeykorobeynikov]

Seems to be fixed when working with Vite 5.