Can Not load MRT file in Report.JS after build process using React JS

[ErvanAndi]

Hello, i am currently using Report.JS in my React Project. Everything is fine when i am working on localhost. But after i build and published it, somehow i got error like this:
https://ibb.co/yhDY5Jh
https://ibb.co/cJ0PLN8
i checked my mrt file path and i think everything is okay.
Anybody can help me through this problem ?

this is my custom component

Code: Select all

import React from 'react';
import { Stimulsoft } from 'stimulsoft-reports-js/Scripts/stimulsoft.viewer';
import 'stimulsoft-reports-js/Css/stimulsoft.viewer.simple.gray.css';




interface dataOnClick {
    elementArgument: string|null
    elementSeries: string|null
}

interface Props {
    templatePath: any
    jsonData: Object
    defaultZoom: number
    barNumber: number
    onClick: (data: dataOnClick)=>void
    saveTrigger: boolean
    setSaveBarChart: (state:boolean)=>void
}

interface State {

}

class StiTisBarChart extends React.Component<Props, State> {

    private viewerOptions = new Stimulsoft.Viewer.StiViewerOptions()
    private viewer = new Stimulsoft.Viewer.StiViewer(this.viewerOptions, 'StiViewer', false);
    private report = new Stimulsoft.Report.StiReport()

    constructor (props:Props) {
        super(props)
    }


    setviewerOptions = () => {
        const { defaultZoom } = this.props

        this.viewerOptions.toolbar.showFindButton = false
        this.viewerOptions.toolbar.showFullScreenButton = false
        this.viewerOptions.toolbar.showPrintButton = false
        this.viewerOptions.toolbar.showOpenButton = false
        this.viewerOptions.toolbar.showViewModeButton = false
        this.viewerOptions.toolbar.showLastPageButton = false
        this.viewerOptions.toolbar.showPreviousPageButton = false
        this.viewerOptions.toolbar.showFirstPageButton = false
        this.viewerOptions.toolbar.showLastPageButton = false
        this.viewerOptions.toolbar.showNextPageButton  = false
        this.viewerOptions.toolbar.showCurrentPageControl = false
        this.viewerOptions.toolbar.showAboutButton = false
        this.viewerOptions.toolbar.zoom = defaultZoom
    }

    loadData = () => {
        const { jsonData } = this.props

        var dataSet = new Stimulsoft.System.Data.DataSet("havQuadrant")
        dataSet.readJson(jsonData)
        this.report.dictionary.databases.clear()
        this.report.regData("havQuadrant", "havQuadrant", dataSet)
    }

    refreshViewer = () => {
        this.report.renderAsync( () => {
            Stimulsoft.Report.Dashboard.StiCacheCleaner.clean()
            this.viewer.refreshViewer()
        });
    }

    saveAsPdf = () => {
        this.report.exportDocumentAsync((pdf:any)=>{
            let fileName = this.report.reportAlias
            Stimulsoft.System.StiObject.saveAs(pdf, fileName + ".pdf", "application/pdf");
        }, Stimulsoft.Report.StiExportFormat.Pdf)
    }

    
    componentDidMount() {
        try{
            this.setviewerOptions()
            this.report.loadFile(this.props.templatePath)
            this.viewer.report = this.report
            this.viewer.renderHtml("viewer")
            // this.loadData()
        }
        catch(e) {
            console.log("error stimulsoft after mount ====>", e)
        }
    }

    componentDidUpdate(prevProps:Props) {
        if (prevProps.saveTrigger !== this.props.saveTrigger && this.props.saveTrigger) {
            this.saveAsPdf()
            this.props.setSaveBarChart(false)
        }
    }
    
    render() {
        
        return (
            <div id="viewer" className="Report"></div> 
        );
    }

}

export default StiTisBarChart;

[Lech Kulikowski]

Hello,

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

Thank you.

[ErvanAndi]

Hello,

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

Thank you.

This is my sample project:
https://drive.google.com/file/d/1P7FSra ... sp=sharing

[ErvanAndi]

I try to install and build sample project from Stimulsoft website, like 'Integrating the Report Viewer into an Application (TypeScript)'. But I also got another error like this after i run it using Web Server For Chrome.
https://ibb.co/5jqQj6b

[Max Shamanov]

Hello,

We need some additional time to investigate the issue, we will let you know about the result.

Thank you.
#6660

[Max Shamanov]

Hello,

The issue is fixed. The fix will be available in the next release build.
Also in you package.json in section with browserlist you need to write the following code:

Code: Select all

"browserslist": {
    "production": [
      "> 1% and not op_mini all"
    ]

Thank you.