How to import js file from src file into index.html?

Question

I am creating one system using React and I am still new to React. I need to add js file in my index.html where that js file is located in the src folder. I need to import this js file in order to make my system works. Does anyone know how to solve my problem? Thanks in advance.

This is how I import my js file. I think there is something wrong with my path. Does anyone know the correct path to import my js file?

      //index.html    
      <!DOCTYPE html>
       <html lang="en">
        <head>
         <meta charset="utf-8" />
         <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
         <title>React App</title>
         </head>
         <body>
           <noscript>You need to enable JavaScript to run this app.</noscript>
           <div id="root"></div>
           <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
           <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
           <script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" crossorigin></script>
           <script type="text/javascript" src='../src/js/index.js'></script>
         </body>
        </html>

As you can see from the picture above, my index.js is located under the src folder.

This will resolve your issue../src/js/index.js. '/js will try to locate in same folder. You will have to go to parent and then navigate to necessary file — Rajesh Dixit
– Rajesh Dixit, Commented May 28, 2019 at 7:22
Thanks for the answer @Rajesh. However, its still not working — Roseanne
– Roseanne, Commented May 28, 2019 at 7:25
Thanks for the answer @Roy.B. I already tried but its still not working — Roseanne
– Roseanne, Commented May 28, 2019 at 7:26
That means you're implicitly using webpack btw. It also means you should move the js folder to your public folder, then use src="%PUBLIC_URL%/js/index.js" (but again, this is most likely not a good idea) — user5734311
– user5734311, Commented May 28, 2019 at 7:49

BATMAN_ · Accepted Answer · 2019-05-28 09:12:38Z

2

As i think this is not good way to do this. your trying to add your ./src some js file to ./public folder index.html

this is not recommended way. but if you want add some external links, put it under ./public folder and import it but this not recommended way.

ref : sample project for external import

edited May 28, 2019 at 9:12

answered May 28, 2019 at 8:37

BATMAN_

2823 silver badges11 bronze badges

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

Comments

Dinosan0908 · Accepted Answer · 2019-05-28 07:22:56Z

0

Path should be

<script src='../src/js/index.js'></script>

You need to go up one folder ('../') to be at the same spot as public and src then go into src/js/index.js

answered May 28, 2019 at 7:22

Dinosan0908

1,1022 gold badges8 silver badges20 bronze badges

6 Comments

Roseanne Over a year ago

Thanks for the answer. I already tried using your answer but it is still not working

Dinosan0908 Over a year ago

with type="text/javascript" in your script tag as well ?

Roseanne Over a year ago

Even with type="text/javascript" in my script, it is still not working

Dinosan0908 Over a year ago

sorry then, following your screenshot, this is the only solution I can provide there.. are you sure your js file isn't the issue there ? that it's correctly imported but the content doesn't work ?

user5734311 Over a year ago

Stating type isn't required at all, and the path issue is a bit more complicated, given that this react app most likely uses webpack.

|

Collectives™ on Stack Overflow

How to import js file from src file into index.html?

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related