How to add custom javascript (3rd Party library) to react-boilerplate

Question

I'm using react-boilerplate to build react app. But could not get my head around on adding custom javascript file to application which do not come from npm, yarn or bower.

Basically I'm trying to use some jquery component. I added jquery using yarn and existing webpack config takes it and inject into index.html with other javascript libraries.

But I could not find a way to include my own custom javascript file after jquery is added to the page.

Hello @Vinit if you have found a solution to this issue, pls share it — Tripti Rawat, May 01 '18 at 13:21

score 2 · Answer 1 · answered May 29 '17 at 14:29

2

You can include:

<script src="./yourscript.js"></script>

in index.html located in the public folder.

The public folder exists after you build your project.

npm run build

If your just trying to import a javascript from the original .js file that has a 'export default' to a variable/function, just do:

import YourFile from './yourscript.js';

or if you just used export without the 'default':

import { YourFile } from './yourscript.js;

answered May 29 '17 at 14:29

Chris

973
1
8
20

Hi Chris, This won't work. As I can't include script manually. My js file depends on jQuery and hence have to be included after jQuery is added to page, which is bundled by webpack and added to index.html by it. Also my js file do not export anything. – Vinit Yadav May 30 '17 at 04:25

score 0 · Answer 2 · edited May 03 '18 at 13:20

0

You can include like this:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "./js/perfect-scrollbar.jquery.min.js";

    script.type = 'text/javascript';
    script.async = true;

    document.body.appendChild(script);
}

If you have any more questions, write me.

edited May 03 '18 at 13:20

Ugnius Malūkas

2,649
7
29
42

answered May 03 '18 at 11:02

Deepak Nagar

21
1
10

How to add custom javascript (3rd Party library) to react-boilerplate

2 Answers2