Syncfusion controls do not work in production.

[ajit goel]

I have deployed my application to aws and I see that the application renders fine, just that the synfusion controls do not render correctly. What could the issue be? 

to reproduce go to http://vidaudtranscription-dev.s3-website-us-east-1.amazonaws.com/login

enter [email protected]

Rishi@1975

click "your vocabulary" on left hand side. The synfusion textarea control does not render correctly. 

google chrome console does not show any errors

I have also provided a screenshot of the application working on my local envt. 

Attachment: 20200519_22_02_35fullversion__Microsoft_Visual_Studio_dd89c024.zip

[Berly Christopher]

Hi Ajit, 

  

Greetings from Syncfusion support.  

  

We have checked the provided link and screenshot. While validating the reported issue, Syncfusion controls are not rendered properly in the amazon hosted link due to styles of the component is not loaded in the hosted application. Also, while checking the provided URL, you have imported the all required CSS in the App.css file. In the App.css file, there is no Syncfusion component styles are loaded.  

  

So, we suggest you to inject the Syncfusion styles in the application while hosting in to amazon properly to get rid of the reported issue at your end.  

  

Please find the documentation for the required CSS styles for the component rendering from below. 

UG Link: https://ej2.syncfusion.com/vue/documentation/textbox/getting-started/?no-cache=1#registering-vue-component  

  

Regards, 

Berly B.C 

[ajit goel]

Thank you Berly,

I had previously included the various syncfusion css files in the actual vue component file like the following and the application worked perfectly fine on my local machine.

vocabulary.vue:

<script>

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

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

If I instead add the syncfusion css files in the App.vue(or main.js) as documented here, I get a "Failed to resolve loader: sass-loader, You may need to install it" error. I however have node-sass, sass-loader installed. What am I missing or perhaps the question should be how should I include css files along with scss files? 

package.json:

"devDependencies": {

    "node-sass": "^4.12.0",

    "sass-loader": "^7.1.0",

}

vue.config.js:

module.exports = {

  publicPath: '/',

  transpileDependencies: [

    'vue-echarts',

    'resize-detector'

  ],

  configureWebpack: {

    devtool: 'source-map',

    optimization: {

      splitChunks: {

        chunks: 'all'

      }

    }

  }

}

main.js:

require('../node_modules/@syncfusion/ej2-base/styles/material.css');

require('../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css');

require('../node_modules/@syncfusion/ej2-vue-popups/styles/material.css');

require('../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css');

App.Vue:

<style>

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

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

</style>

[ajit goel]

deleting the npm packages and reinstalling them fixed the issue. This issue can be closed. 

[Berly Christopher]

Hi Ajit, 

  

We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 

  

  

Regards, 

Berly B.C