reactjs project load javascript libraries and attach to window object

Question

I would like to add some javascript libraries to my reactJS project.

I do this by adding script tags to the section of index.html

<script src="../src/components/reports/scripts/stimulsoft.reports.js"></script>
<script src="../src/components/reports/scripts/stimulsoft.viewer.js"></script>

and usage of library is like:

class Viewer extends React.Component {
        render() {
            return <div id="viewerContent"></div>;
        }

        componentWillMount() {
            var report = Stimulsoft.Report.StiReport.createNewReport();
            report.loadFile("reports/Report.mrt");

            var options = new Stimulsoft.Viewer.StiViewerOptions();
            this.viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
            this.viewer.report = report;
        }

        componentDidMount() {
            this.viewer.renderHtml("viewerContent");
        }
    }

but I have this error:

these are original sample Stimulsoft Reports.JS and GitHub

componentWillMount for all practical purposes has been deprecated, have you tried using componentDidMount fully instead? I suspect you are calling that code and it may not be fully loaded yet... just guessing at this point though. — Drew Reese
– Drew Reese, Commented Nov 17, 2020 at 7:58
window doesnot have a Simulsoft object attached. May be because the Simulsoft JS files are not accessible/invoked from index.html which is available in public folder. — Rohit Khanna
– Rohit Khanna, Commented Nov 17, 2020 at 8:05
Thanks for your reply, @Drew . I tested it (using componentDidMount), but still problem exist. — Mahdi
– Mahdi, Commented Nov 17, 2020 at 8:11
The error message doesn't match the code. Anyway this has nothing to do with React – the Stimulsoft scripts just haven't loaded (or are broken.) Check the console's network tab and confirm that the scripts load correctly. Unless you have some strange setup, the browser can't access the src directory. — Guy Incognito
– Guy Incognito, Commented Nov 17, 2020 at 8:19
If you are using the GitHub sample as reference, the only think I can suggest, as well as to move your code to the componentDidmount cycle as suggested by @DrewReese, is to make sure that the paths to the stimulsoft scripts are correct, and check that they are loaded, can you share the complete html? — Ricardo Sanchez
– Ricardo Sanchez, Commented Nov 17, 2020 at 8:26

Mahdi · Accepted Answer · 2020-11-17 16:22:41Z

1

Based on comments under the question, and the guides presented in index.html file of react project as follows:

//Notice the use of %PUBLIC_URL% in the tags above.
//It will be replaced with the URL of the `public` folder during the build.
//Only files inside the `public` folder can be referenced from the HTML.

I placed scripts folder into the public folder of react project and edit src attribute to new source address, and my problem was solved

and this code work for me:

 <script src="%PUBLIC_URL%/StimulSoft/scripts/stimulsoft.reports.js"></script>
 <script src="%PUBLIC_URL%/StimulSoft/scripts/stimulsoft.viewer.js"></script>

edited Nov 17, 2020 at 16:22

answered Nov 17, 2020 at 8:33

Mahdi

1291 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

reactjs project load javascript libraries and attach to window object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related