require() of ES modules is not supported (Quasar v2) about quasar-app-extension-ssg HOT 6 CLOSED

Found a better way to handle this.

Just transpile swiper and its dependencies and all is working fine.

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

If you have any errors related to babel during webpack compilation, try to remove your node_modules folder and yarn.lock file, then run the command yarn.

Could be useful to you @yeus too. Try to add @aws-amplify/ui-vue to the transpileDependencies array.

from quasar-app-extension-ssg.

@freddy38510. Thank you! that last one worked with the amplify library. still have some small issues on how it is displayed. Such as it assumes the initial state is "logged in" for some reason... but working on those as well now ;).

from quasar-app-extension-ssg.

@yeus Good to know that you can now use the Vue components from Amplify lib.

If the content of your pages is conditionnaly rendered by the Auth state, I would encourage you to not pre-render it.

Otherwise, at first-load users will see the page rendered with the state initiated at build-time, then when Vue takes over, the content will change if the user is logged-in.

This can only be handle at client-side. Do not pre-render these pages. Or use the Quasar q-no-ssr component.
Also don't forget to set your Quasar boot files to be executed at client-side only based on the previous suggestion I made about authentication.

I'm closing this issue since it is solved.

from quasar-app-extension-ssg.

I have a similar problem with a third party library: aws-amplify/ui-vue:

 ================== GENERATE ==================

 App • Cleaned build artifact: "/home/tom/Dropbox/company/src/doxcavator/frontend/dist/ssg"
 Extension(ssg) • Copying assets...
 Extension(ssg) •  WAIT  • Generating pages in progress...
configured
the Auth module is configured
The user is not authenticated


/home/yeus/libs/node_modules/@aws-amplify/ui-vue/dist/index.js
  require() of ES modules is not supported.
  require() of /home/tom/yeus/libs/node_modules/@aws-amplify/ui-vue/dist/index.js from /home/yeus/finapp/frontend/node_modules/.cache/quasar-app-extension-ssg 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 index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/yeus/libs/node_modules/@aws-amplify/ui-vue/package.json.

(...)

  - chunk-935.js:117 Object.3658
    chunk-935.js:117:77
  
] {
  code: 'ERR_REQUIRE_ESM'
}

When I render the app with quasar build -m ssr I don't get any error messages, The ssr build itself succeeds also with the extension. Its related to this library here: https://ui.docs.amplify.aws/ui/components/authenticator?platform=vue. I use their component in my template.

@freddy38510: Is it possible to tell your extension to "leave out" one specific page or even component, or explicitly tell the extension which pages to render and which ones should stay i spa mode?

from quasar-app-extension-ssg.

@kostia7alania this here:

• https://stackoverflow.com/questions/64656158/how-to-force-component-to-render-on-client-in-quasar-framework

might help you. It explicitly puts the component on the client. Maybe that will help webpack circumventing the issue?

from quasar-app-extension-ssg.

@yeus

You are right, the compilation with webpack itself has no errors. But even with SSR mode when you start the web-server you got the error about ES module which is not supported.

@kostia7alania

This is because since version 7 Swiper is a pure ESM package. You can downgrade to v6 or async import the components.

// your SFC component
import { defineComponent, defineAsyncComponent } from 'vue';

export default defineComponent({
components: {
  swiper: defineAsyncComponent(async () => {
    const { Swiper } = await import('swiper/vue');

    return Swiper;
  }),
  swiperSlide: defineAsyncComponent(async () => {
    const { SwiperSlide } = await import('swiper/vue');

    return SwiperSlide;
  }),
});

Using Quasar boot files can do the trick too if you want to register globally some components.
But don't forget to run it on client-side only if the component is not universal (not compatible with SSR):

Running it on client-side only:

// boot/swiper.js file
import { Swiper, SwiperSlide } from 'swiper/vue';

export default ({ app }) => {
  app.component('swiper', Swiper);

  app.component('swiper-slide', SwiperSlide);
};

// quasar.conf.js file
module.exports = configure((ctx) => ({
  boot: [
    {
      server: false, // run on client-side only!
      path: 'swiper', // references /src/boot/<name>.js
    },
  ],
});

Or on client-side and server-side:

// boot/swiper.js file
import { defineAsyncComponent } from 'vue';

export default ({ app }) => {
  app.component('swiper', defineAsyncComponent(async () => {
    const { Swiper } = await import('swiper/vue');

    return Swiper;
  }));

  app.component('swiper-slide', defineAsyncComponent(async () => {
    const { SwiperSlide } = await import('swiper/vue');

    return SwiperSlide;
  }));
};

// quasar.conf.js file
module.exports = configure((ctx) => ({
  boot: ['swiper'],
});

If after all you've got some hydration errors at client-side you can wrap the components in the Quasar q-no-ssr component.

I will open an issue about this on Quasar repository as the issue is not related to this app extension.

from quasar-app-extension-ssg.