modal SSR Issue

[amjadkhan896]

Hi all, I am using bootstrap-vue for my website, And I am using SSR (PHP V8JS) to render all components. The issue is when I use modal. It generates "Reference error: Document not found". When I go to that component it was inside the node_modules directory. And the issue is there is tag. When i remove the tag. It does not give any error. But when I put again It gives an error and website not running.

My Suggestion is either remove the CSS if not needed Or move it to the corresponding CSS file. Because for CSR it works but for SSR it generates an error

Thanks

[tmorehouse]

@amjadkhan896 Which style tag are you referring to? Also which version of Bootstrap-Vue are you using?

[amjadkhan896]

@tmorehouse thanks for the reply. Regarding the version, I am using the latest version of bootstrap-vue. And regarding the usage, I am importing the component like below.

import bModal from 'bootstrap-vue/es/components/modal/modal';

Vue.component('b-modal', bModal);

When i run the code it gives me an error as i mentioned in the above post. I traced the error and when i open the file.

import bModal from 'bootstrap-vue/es/components/modal/modal';

Then there is some css. inside the tag. which is below

<style>
    .modal-dialog-centered {
        display: flex;
        align-items: center;
        /* min-height: calc(100% - (1rem * 2)); */
        min-height: calc(100% - (10px * 2));
    }
    .modal-dialog-centered .modal-content {
        width: 100%;
    }
    @media (min-width: 576px) {
        .modal-dialog-centered {
            /* min-height: calc(100% - (1.75rem * 2)); */
            min-height: calc(100% - (30px * 2));
        }
    }
</style>

As it's inside the node_modules directory. Thats why I posted the issue. And it creates an error while using the SSR using V8JS.

In short the modal.vue has a style tag inside the node_modules directory

[tmorehouse]

Ah, you need to use the extracCSS, extractText, or css-loader in your build/rollup/webpack config to extract the CSS from the component and place it in your compiled app's CSS file

This is changing in the new release, where all styles are now defined in SCSS files and not included directly in the components.

[amjadkhan896]

Thanks, @tmorehouse. I will definitely apply your suggestions.