Automatic patch of ES Module import

[nicolashefti]

Hi,

I'm using the extension with a Quasar 2 project. I get the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /**/ not supported.
Instead change the require of swiper-vue.js in /**/ server-entry.js to a dynamic import() which is available in all CommonJS modules
  /**/
  code: 'ERR_REQUIRE_ESM'
}

The error message very clear and I am able to patch manually the server-entry.js file, using import instead of require.

Manual patch is ok but it has two limitations:

• Everytime a project file changes, I need to re-patch the file
• In a CI/CD pipeline this is not pratical to patch the server-entry.js file

Is there a way to fix this import once for all?

[freddy38510]

Related to #85.

Swiper is an ES module only, you need to transpile it to work at server-side.

If using Webpack:

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    build: {
      transpileDependencies: [/swiper/, 'ssr-window', 'dom7'],
    }
  }
});

If using Vite:

// quasar.config.js
module.exports = configure(function (/* ctx */) {
  return {
    build: {
      extendViteConf(viteConf, { isServer }) {
        if (isServer) {
          viteConf.ssr = viteConf.ssr || {};
          viteConf.ssr.noExternal = viteConf.ssr.noExternal || [];
          viteConf.ssr.noExternal.push("swiper");
        }
      },
    },
  }
});

[nicolashefti]

Works like a charm. Thanks !