Problems with integration Vue

qwertykqwertov911 · Post by **qwertykqwertov911** » Fri Mar 04, 2022 9:15 am

Good afternoon. I apologize in advance for my English. Faced a problem when integrating ReportJs in my Vue application. Method of connection via index.html and folder Public does not pierce for me. Installed StimulSoft-Reports-JS via NPM. Import scripts via node_modules. I get the following errors.

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'Designer')"

I'm not too strong in this, so the error may be rather stupid, but if you specify me on her, I will be very grateful.

##TotalBalance.vue

Code: Select all

mounted: function() {
    console.log('Loading Designer view');

    console.log('Set full screen mode for the designer');
    var options = new window.Stimulsoft.Designer.StiDesignerOptions();
    options.appearance.fullScreenMode = false;

    console.log('Create the report designer with specified options');
    var designer = new window.Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);

    console.log('Create a new report instance');

    console.log('Rendering the viewer to selected element');
    designer.renderHtml('designerContent');

    console.log('Loading completed successfully!');
  }

##main.js

Code: Select all

import 'stimulsoft-reports-js/Scripts/stimulsoft.reports.js'
import 'stimulsoft-reports-js/Scripts/stimulsoft.reports.js'
import 'stimulsoft-reports-js/Scripts/stimulsoft.designer.js'
import 'stimulsoft-reports-js/Scripts/stimulsoft.blockly.editor.js'

##index.html

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>budget-app</title>
    <link rel="stylesheet" href="stimulsoft/stimulsoft.designer.office2013.whiteblue.css">
    <link rel="stylesheet" href="stimulsoft/stimulsoft.viewer.office2013.whiteblue.css">
  
  </head>
  <body>
    <noscript>
      <strong>We're sorry but budget-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Post by **Max Shamanov** » Fri Mar 04, 2022 1:03 pm

Hello,

Please check the following sample:
https://github.com/stimulsoft/Samples-JS
And attached sample.

Thank you.

qwertykqwertov911 · Post by **qwertykqwertov911** » Wed Mar 09, 2022 6:44 am

Thanks for helping me.

Post by **Max Shamanov** » Wed Mar 09, 2022 7:48 am

Hello,

You are welcome.

qwertykqwertov911 · Post by **qwertykqwertov911** » Thu Mar 10, 2022 2:24 pm

Hello, please help me again.
This application was activated with key. ( Stimulsoft.Base.StiLicense.Key = "..." ) Message about trial version missed, but trial watermark stay on page.
Why is this happening?
https://www.dropbox.com/s/9467n4jcqzrrl ... l.PNG?dl=0

Post by **Lech Kulikowski** » Fri Mar 11, 2022 7:35 am

Hello,

Please send us your request with detailed description on support@stimulsoft.com.

Thank you.

qwertykqwertov911 · Post by **qwertykqwertov911** » Thu Mar 17, 2022 9:16 am

Hello,
I tried using version 2022.1.5 and that solved my problem. Activation problem appears only in the latest version (2022.1.6).

Post by **Lech Kulikowski** » Thu Mar 17, 2022 10:31 am

Hello,

Please send us your key for analysis on support@stimulsoft.com.

Thank you.

fabio.bissolotti · Post by **fabio.bissolotti** » Thu Oct 03, 2024 11:48 am

Hello, I'm having the same problem in REACT but with some variations. I've set up a dashboard that works perfectly in the development environment, but when I publish it in the QA environment it gives the following error in the browser console when I try to execute viewer.renderHtml():

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Symbol(stimulsoft)')

The frontend method receives the json structure, loads it into the report and fetches the data, injects it into the report and then renders it in the viewer:

Code: Select all

        Stimulsoft.Base.StiLicense.Key = "...";

        var report = new Stimulsoft.Report.StiReport();    

        let json = await getReportStructure("DashBoardSNPeriodo");
        report.loadDocument(json.data);

        var result = await generateSalesNotificationByPeriod(dtaInicial, dtaFinal);
        
        console.log("Registrando dados")
        report.regData("root", "root", result.data.registros);              
        
        
        console.log("Reenderizando relatório")
        report.renderAsync(function () {
            console.log("Report rendered. Pages count: ", report.renderedPages.count);

            console.log("Atribuindo relatório")       
            var viewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
            viewer.report = report;                                
    
            console.log("Renderizando na div")
            viewer.renderHtml('invoiceViewer');        
            });

The error is occurring in the viewer.renderHtml('invoiceViewer') line;

The strangest thing is that when the system is run on the development machine it works without problems, only when it is published to the QA environment does the error appear.

I apologize for any English errors and thank you in advance for your attention.

Post by **Lech Kulikowski** » Thu Oct 03, 2024 10:29 pm

Hello,

Please send us a sample project that reproduces the issue for analysis.

Thank you.

Problems with integration Vue

Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue

Re: Problems with integration Vue