How to include js file in Reactjs

Question

I am working with Reactjs,I want to link "js" file means i want to include "js" file in my project but its not working, I put my code in "app.js" file,My js files exist in "public" folder,I put code in "_app.js" file and Here is my current code in "_app.js" file

import '../styles/globals.css'
import '../public/css/style.css'
import '../public/css/fonts.css'
import '../public/css/bootstrap.css'
import '../public/css/fonts2.css'
import Script from 'next/script'
function MyApp({ Component, pageProps }) {
  return (
             <> 
                <script src="../js/core.min.js"></script>
                <script src="../js/script.js"></script>
            <Component {...pageProps} />
            </>
        );  
}

export default MyApp

Does this answer your question? How to include custom JS files in to React create app — Ozan Yurtsever
– Ozan Yurtsever, Commented Jul 16, 2022 at 9:58
Does this answer your question? How to include dom-manipulating scripts into SSR Next.js App — Nikolai Kiselev
– Nikolai Kiselev, Commented Jul 16, 2022 at 10:58
@NikolaiKiselev no actually i dont want to add "third party scrips" i just want to include/use "js file" like we do in other framework — amit
– amit, Commented Jul 16, 2022 at 11:07
@Vyom, you can use the method from this answer. It can be a local script too. — Nikolai Kiselev
– Nikolai Kiselev, Commented Jul 16, 2022 at 11:10
As mentioned, inject your script using next/script, e.g. <Script src="/js/script.js" />. Note that if you have your files in the public folder you should reference them as /js/scripts.js and /js/core.min.js respectively. — juliomalves
– juliomalves, Commented Jul 17, 2022 at 17:02

Lucas Bodin · Accepted Answer · 2022-07-16 08:41:13Z

0

There are several solutions described here: Add js script with react

Here is one:

import '../styles/globals.css'
import '../public/css/style.css'
import '../public/css/fonts.css'
import '../public/css/bootstrap.css'
import '../public/css/fonts2.css'
import Script from 'next/script'
function MyApp({ Component, pageProps }) {
    const script = document.createElement("script");
    script.src = "../js/core.min.js";
    script.async = true;
    document.body.appendChild(script);
    const script2 = document.createElement("script");
    script2.src = "../js/script.js";
    script2.async = true;
    document.body.appendChild(script2);
  return (
             <> 
            <Component {...pageProps} />
            </>
        );  
}

export default MyApp

answered Jul 16, 2022 at 8:41

Lucas Bodin

3465 silver badges23 bronze badges

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

5 Comments

amit Over a year ago

Please tell me that we must include our "css/js/" file in "_app.js" file ? And what should we write in _document.js, i am confuse between these two specially about "document.js"

Lucas Bodin Over a year ago

You can also use "import 'file.js'"

amit Over a year ago

as imported "css" files ?

amit Over a year ago

its giving me following error "ReferenceError: document is not defined"

amit Over a year ago

After refresh page,css is not working fine

Collectives™ on Stack Overflow

How to include js file in Reactjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related