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

Answer 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>