[Quasar CLI + Vite + SSR] Build generates require() instead of import, resulting in ERR_REQUIRE_ESM

[gustavotoyota]

I'm trying to load lowlight as a dependency, which is an ESM module.
When trying to run my server built with quasar build -m ssr I'm receiving this error:
Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\lowlight\index.js from \dist\ssr\server\server-entry.js not supported.

Looking into the file \dist\ssr\server\server-entry.js I see that my import { lowlight } from 'lowlight' became require('lowlight') in the output, resulting in the error above.
Why is the build replacing my ES6 imports with CommonJS imports?
How do I fix this?

Thank you.

[gustavotoyota]

Bump.

[remoove]

Same problem with Swiper.js. Did you fixed it?

[gustavotoyota]

Hi, I "solved" it by importing lowlight from a client-only boot file and injecting it into the globals:

import { lowlight as lowlight_ } from 'lowlight/lib/common';

declare global {
  var lowlight: typeof lowlight_;
}

globalThis.lowlight = lowlight_;

// Now access lowlight from "globalThis.lowlight" or just "lowlight"

This prevents lowlight from entering the server-side code, so it avoids the require().

[niusia-ua]

Hi. I have the same problem with Quasar 2 and Swiper 8. Couldn't find anything better than downgrading Swiper to 6.8.4
Now I hate the frontend

[CharlieBrownCharacter]

@gustavotoyota Did you manage to solve it without creating a boot file? I have the same issue but with @tiptap/extension-code-block-lowlight because it imports lowlight and it gives me:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: .../node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of .../node_modules/lowlight/lib/common.js from ..../dist/ssr/server/server-entry.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/lowlight/package.json.

[gustavotoyota]

@CharlieBrownCharacter No, I'm still using a boot file. But I realized that I could probably use a client-only dynamic import. Haven't tested it though.

[209]

The same problem has with vue-openlayers 3.0.0-3

node ./dist/ssr/index.js

/dist/ssr/server/server-entry.js:36
var extent = require("ol/extent");
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/ol/extent.js from ./dist/ssr/server/server-entry.js not supported.
Instead change the require of extent.js in ./dist/ssr/server/server-entry.js to a dynamic import() which is available in all CommonJS modules.
    at Module.<anonymous> (./dist/ssr/server/server-entry.js:36:14)
    at Object.<anonymous> (./dist/ssr/index.js:176:35) {
  code: 'ERR_REQUIRE_ESM'
}

[Sopamo]

I have the same issue with swiper.js as well.

[gscpw]

Yep same problem with swiper.js, as well as apollo client. This is seriously hindering development.

[customautosys]

Hi I also have the same problem. Currently working around it by using await import(...); which is kind of irritating and troublesome sometimes when asynchronous code is undesired.

In fact, it is worse than irritating. Recently, I ran a quasar build -m ssr --publish, and it generated a server-entry.js which replaced my "await import" with "require" for some unknown reason which caused it not to work. I tried to simply replace "require" with "await import" directly in the server-entry.js file, and that did not work either. In the end I had to replace the entire library with another equivalent which used CommonJS instead of ESM. It is very very strange that ESM does not work and gets replaced with require() when just about all modules released nowadays are ESM.