Search code examples
reactjscreate-react-app

How to Integrate third party libraries into React JS

I had a template, that I wanted to convert to React JS components, and I successfully did that. As all of us know, that there are bunch of libraries used in a template. What I first did is, I inserted the .css and .js libraries into the react app through the index.html file, in the public folder of the create-react-app boiler plate. It successfully used the styles and scripts from the inserted .js and .css files. But the problem occurred when I added routing to the react app.

When, I navigate to another route through a link, the component loads, but the required styles and scripts doesn't loads. I don't know what the problem is. I tried to import the scripts and styles to the parent component which is home.js. The styles worked properly, but the libraries used in template are :

bootstrap.min.js, eva.min.js, feather.min.js, jquery.min.js, jquery-slim.min.js, and popper.min.js.

On each import of the above libraries, it shows different errors. But as an example, for jquery.min.js it shows the following error :

enter image description here

Solution

  • In public folder add the following code in of the index.html page.

     <base href="/">