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, May 28 '19 at 07:22
Thanks for the answer @Rajesh. However, its still not working — Roseanne, May 28 '19 at 07:25
Thanks for the answer @Roy.B. I already tried but its still not working — Roseanne, May 28 '19 at 07:26
Either a) move the file to the public folder and include it using `src='index.js'` or b) follow the module pattern, given that this looks like `create-react-app`? — , May 28 '19 at 07:34
@Roy.B it just some jQuery codes inside the index.js. I already imported jquery in index.html — Roseanne, May 28 '19 at 07:36
cool, can you post here your HTML? and are you sure you first import jquery and then the script? — Roy.B, May 28 '19 at 07:38
@ChrisG I'm so sorry. I using npm for this react app. I will add my index.html code to my question — Roseanne, May 28 '19 at 07:43
Well, first of all, mixing React and jQuery is not a good idea. Secondly, if you must, just call the jQuery code inside your components. Rather than add index.html to your question, what exactly do you have in index.js? And how exactly are you serving this app? Did you use `create-react-app` or no? — , May 28 '19 at 07:46
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) — , May 28 '19 at 07:49
@ChrisG your answer make my app almost working. Thanks for answer. Btw, I just wanna ask why we need to put index.js inside the public folder instead of src folder? — Roseanne, May 28 '19 at 07:57
do what @ChrisG said but this is not a good practice, you are not doing it in the react way — Roy.B, May 28 '19 at 07:57
Because your index.js is a static file, as opposed to a module that gets required / imported. Again, you're not really supposed to add "regular" JS code like that, that's why if you do, it goes in public with the other static stuff. And *again*: if you tell us what you're doing in index.js we can suggest better solutions. — , May 28 '19 at 08:02

BATMAN_ · Accepted Answer · 2019-05-28T09:12:38.383

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 '19 at 09:12

answered May 28 '19 at 08:37

BATMAN_

307
3
11

score 0 · Answer 2 · answered May 28 '19 at 07:22

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 '19 at 07:22

Dinosan0908

1,082
2
8
19

Thanks for the answer. I already tried using your answer but it is still not working – Roseanne May 28 '19 at 07:27
with type="text/javascript" in your script tag as well ? – Dinosan0908 May 28 '19 at 07:29
Even with type="text/javascript" in my script, it is still not working – Roseanne May 28 '19 at 07:31
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 ? – Dinosan0908 May 28 '19 at 07:33
1

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. – May 28 '19 at 07:35
Yes. Its still not working. I don't know if we need to add something like 'require' or 'include' in the path itself. e.g. `src={require('./../../img/logo.png')}` – Roseanne May 28 '19 at 07:38

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

2 Answers2