Spreadsheet broken on production

[-]

The spreadsheet is broken on production(It is working fine in local). I'm using vue 2 and nuxt 2

[Babu Periyasamy]

Hi,

We have checked your reported query based on your shared details and screenshot. To check your reported issue, we have prepared the Vue 2 local sample with Spreadsheet component and build the sample in production and serve the sample.

And the `dist` folder is properly generated while building the application and the Spreadsheet component is properly rendered while serve the generated dist folder. We are not able to replicate your reported issue in our end.

For your convenience, we have prepared the video demonstration and attached below along with the prepared sample for your reference,

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart110105924

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_Spreadsheet_in_production_mode-290585752

Kindly, check the above details. Based on your shared screenshot, we suspect that the styles folder is not properly generated in the `dist` folder. So, kindly ensure whether the styles files are properly generated while building the application. And if you are facing the same, please share the below details,

1. Please share the Spreadsheet package version which you are using in your end.
2. If you have done any customization in Spreadsheet, please share the details of the customization along with the customization codes.

Please share the above requested information, based on that we will validate and provide you the better solution quickly.

[-]

Thank you for your reply, For your information this is my configuration "Nuxt@ v2.18.1" & "@syncfusion/ej2-vue-spreadsheet": "^26.2.10"

plugins/syncfusion.js

import Vue from 'vue' import { SpreadsheetPlugin, } from '@syncfusion/ej2-vue-spreadsheet' Vue.use(SpreadsheetPlugin)

nuxt.config.js

css: [

'./node_modules/@syncfusion/ej2-base/styles/material.css',

'./node_modules/@syncfusion/ej2-buttons/styles/material.css',

'./node_modules/@syncfusion/ej2-dropdowns/styles/material.css',

'./node_modules/@syncfusion/ej2-inputs/styles/material.css',

'./node_modules/@syncfusion/ej2-navigations/styles/material.css',

'./node_modules/@syncfusion/ej2-popups/styles/material.css',

'./node_modules/@syncfusion/ej2-splitbuttons/styles/material.css',

'./node_modules/@syncfusion/ej2-grids/styles/material.css',

'./node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css',

],

plugins: [ { src: '~/plugins/syncfusion', mode: 'client' }, ],

[Janakiraman Sakthivel]

Hi,

Thank you for your update.

We were able to replicate your reported problem with the details you shared. When directly referencing the styles in the css section of nuxt.config.js and loading the plugin in the same file, the issue occurred because the styles were not reflected in our spreadsheet component.

To resolve this issue, we have created a .css file that contains all the required Syncfusion styles. We then included this CSS file and the necessary plugins in the nuxt.config.js, as shown in the code snippet below. After making these changes, our spreadsheet component rendered correctly, and the styles were applied properly, without the issue you reported. Therefore, we recommend referring to the styles for the spreadsheet component as mentioned above to resolve the problem.

For your convenience, we have shared the prepared sample along with the code snippets below.

Sample: Please see the attachment.

CODE SNIPPET:

assets > css > syncfusion-styles.css:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../../node_modules/@syncfusion/ej2-grids/styles/material.css';

@import "../../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";

 

nuxt.config.js:

export default {

  css: [

    '~/assets/css/syncfusion-styles.css',

  ],

  plugins: [

    '~/plugins/spreadsheet-plugin.js' // Path to the plugin

  ],

  build: {

    extractCSS: true, // Ensure CSS is extracted

  }

};

We will further investigate why the styles were not reflected when directly referenced in the css section of nuxt.config.js and will share the validated details shortly.

Attachment: mynuxtapp_b981c307.zip