Mode SSR get error in first run

[rainer9202]

I have a quasar project where i add ssr mode but i get the error:

import Splide from ‘./components/Splide’;
Cannot use import statement outside a module

Splide is in node_modules folder…
The project work fine in spa and pwa mode…

[beets]

@rainer9202 said in Mode SSR get error in first run:

import Splide from ‘./components/Splide’;

Where is this code? In src-ssr or somewhere in src ?

[rainer9202]

@beets Splide is a carousel component that I use on a page and the error appears in the node_modules file of the package

 import Splide from './components/Splide'; <--- here the error appears !!!
 
 import SplideSlide from './components/SplideSlide';
   
 export default {
   	install( Vue, options ) {
      		Vue.component( Splide.name, Splide );
    		Vue.component( SplideSlide.name, SplideSlide );
        }
 
 };
 export { Splide, SplideSlide };

[beets]

@rainer9202 you may need to transpile it via quasar.conf.js : https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build

build: {
transpileDependencies: [/splide/]
}

I’m on mobile so I can’t look into the package, but if that still doesn’t work I’d probably initialize splide in a client only boot file and wrap it in q-no-ssr tag.

[beets]

On desktop now and looked at the component, you can probably just do this in your boot file:

import Splide from '@splidejs/vue-splide/src/js/components/Splide'
import SplideSlide from '@splidejs/vue-splide/src/js/components/SplideSlide'
export default ({ Vue }) => {
  Vue.component('splide', Splide)
  Vue.component('splide-slide', SplideSlide)
}

The problem I’m guessing is that the author didn’t transpile the code to es5, so either the transpileDependencies or the above code should work.

[rainer9202]

@beets i call the splide component in a another page, don’t in a boot file.

[beets]

@rainer9202 Try this then:

import Splide from '@splidejs/vue-splide/src/js/components/Splide'
import SplideSlide from '@splidejs/vue-splide/src/js/components/SplideSlide'
export default {
  // ...
  components: {
    Splide,
    SplideSlide,
  }
}