External Javascript is not working in react.js

Question

I am creating a react app using create-react-app. I have some external javascript libraries for template design in main index.html

 <script src="%PUBLIC_URL%/js/jquery-2.2.4.min.js"></script>
 <script src="%PUBLIC_URL%/js/common_scripts.js"></script>
 <script src="%PUBLIC_URL%/js/main.js"></script>
 <script src="%PUBLIC_URL%/js/owl.carousel.js"></script>

These JS files are working on first page when the application gets started. But these libraries are not working when redirect to other page from first page. From what I understand, these files are rendering but their functions, variables, and methods are not accessible when the route is changed. I am using react-router-dom v4 for routing .

I googled it and found a solution- To render the JS libraries by ComponentDidMount() method

ComponentDidMount(){
    loadjs('./js/main.js', function(){
    loadjs('./js/common_scripts.js)
    });
  }

But even this solution is not working. Please help to solve this issue.

Thanks

I used window object to use jquery functions and events import $ from 'jquery'; in main index.js and then access any jquery events like componentDidUpdate(nextProps, nextState) { window.$('.hero_single').addClass('start_bg_zoom'); } — Saurabh Sharma
– Saurabh Sharma, Commented Apr 8, 2019 at 13:39
thank you for the reply but I am new to front end development so I didn't get what you said, I have multiple external js file like in your case like jquery, bootstrap, owl.carousel, nice select, and a custom main.js which includes all initialization etc How can I make all page work fine — Azad Hussain
– Azad Hussain, Commented Apr 9, 2019 at 8:16
@AzadHussain can you find the fix.. i am facing the same issue — Mitesh K
– Mitesh K, Commented Jun 18, 2021 at 5:09
Refer to the below posted answer: stackoverflow.com/a/76165168/8101966 — Jules Ntare
– Jules Ntare, Commented May 3, 2023 at 15:20

Bot · Accepted Answer · 2018-09-08 05:27:55Z

1

This is how i import Jquery into my create react app

Jquery:

first run npm install jquery
index.js

import * as $ from 'jquery'

window.jQuery = window.$ = $

see: http://blog.oddicles.org/create-react-app-importing-bootstrap-jquery-cleanly-node-js/

Alternativly you can attach the scripts to a window object and then call them as needed:

Try following steps:

including the external js file link in your /public/index.html use the external library with prefix window. for example, JQuery.

put following line in your /public/index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>`

use it in your project:

window.$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});

`

See this for more details:

https://github.com/facebook/create-react-app/issues/3007

answered Sep 8, 2018 at 5:27

Bot

1447 bronze badges

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

1 Comment

armin Over a year ago

window.jQuery = window.$ = $ did the trick for me

nikamanish · Accepted Answer · 2018-09-06 09:10:42Z

0

You are using componentWillMount() instead of componentDidMount().

I think that is the problem here.

answered Sep 6, 2018 at 9:10

nikamanish

7825 silver badges18 bronze badges

Comments

Bhavin Padiya · Accepted Answer · 2018-09-06 10:16:59Z

0

You can set that js files on window object and then you can access it by window.your_name to object..

You have to set that in index file

answered Sep 6, 2018 at 10:16

Bhavin Padiya

873 silver badges14 bronze badges

Comments

Bharath · Accepted Answer · 2018-09-06 12:00:05Z

0

Try using import() inside componentDidMount()

The import() is self explaining.It just import's the JavaScript files.

import('your_URL')

answered Sep 6, 2018 at 12:00

Bharath

3652 silver badges8 bronze badges

4 Comments

Saurabh Sharma Over a year ago

Hi, I tried but its giving error of vriables like

Line 3:  'WOW' is not defined          no-undef   Line 3:  'Switchery' is not defined    no-undef   Line 3:  Unexpected use of 'location'  no-restricted-globals   Line 3:  Unexpected use of 'location'  no-restricted-globals

Bharath Over a year ago

looks like you are trying to import a JQuery minified version file. Use Jquery from NPM link

Saurabh Sharma Over a year ago

I am using jQuery from NPM for Ajax request.

Bharath Over a year ago

So avoid importing jquery. try dynamically importing the rest of the files.

Anjaney Mishra · Accepted Answer · 2018-09-08 04:02:25Z

0

Try to call event using window object. reference <a href="https://github.com/facebook/create-react-app/issues/3007#issuecomment-357863643">Link</a>

answered Sep 8, 2018 at 4:02

Anjaney Mishra

1411 gold badge2 silver badges13 bronze badges

Comments

Mitesh K · Accepted Answer · 2021-06-18 05:35:00Z

0

const loadScript = (src) => {
  return new Promise(function (resolve, reject) {
    var script = document.createElement('script')
    script.src = src
    script.addEventListener('load', function () {
      resolve()
    })
    script.addEventListener('error', function (e) {
      reject(e)
    })
    document.body.appendChild(script)
    document.body.removeChild(script)
  })
}

 useEffect(() => {
    loadScript(`${process.env.PUBLIC_URL}/js/plugin.min.js`)
    setTimeout(() => {
      setTimeout(() => {
        setLoading(false)
      }, 500)
      loadScript(`${process.env.PUBLIC_URL}/js/main.js`)
    }, 200)
  }, [])

answered Jun 18, 2021 at 5:35

Mitesh K

7791 gold badge13 silver badges28 bronze badges

Collectives™ on Stack Overflow

External Javascript is not working in react.js

6 Answers 6

1 Comment

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related