Import custom JS in create-react-app

Question

I'm using the latest create-ract-appversion for my project and I have a custom.js file with a CustomFunction function in it. I need is to access to the CustomFunctionfunction from one of my components.

Which is the best way to achieve this? Importing the file into index.html like below, I have 'CustomFunction' is not defined no-undef' error:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <!-- jQuery import -->
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <!-- Custom Style and JS import -->
    <link rel="stylesheet" href="./CustomComponent/custom.css">
    <script src="./CustomComponent/custom.js"></script>

This is the project structure:

10 ├── public
 11 │   ├── customComponent
 12 │   │   ├── custom.js
 13 │   │   └── custom.css
 14 │   ├── favicon.ico
 15 │   ├── index.html
 16 │   └── manifest.json

Dan Abramov · Accepted Answer · 2017-06-01 18:12:01Z

4

What you need to do is export the function form you custom.js file like

const CustomFunction = () => {

}

export {CustomFunction};

Now you can import it in any of the component like

import {CustomFunction} from './path/to/custom.js';

If you have multiple of them in component.js, which you want to use in other components then you can export them like

export {
    CustomFunction,
    CustomVariable,
    CustomVar2,
    CustomFunction2
}

And import like

import {CustomFunction, CustomVariable, CustomVar2, CustomFunction2} from './path/to/custom.js';

edited Jun 1, 2017 at 18:12

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

answered Jun 1, 2017 at 9:37

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

6 Comments

Lc0rE Over a year ago

Do I need to export each single variable and function form my Custom file? There are a lot of those... Is it the right way to go?

Dan Abramov Over a year ago

Please don't mix CommonJS syntax (module.exports) with ES6 syntax (import). Either use one or the other, not both.

Shubham Khatri Over a year ago

Ok @DanAbramov, I will update the answer as soon as I reach home

Dan Abramov Over a year ago

Also no, you don't need to export every variable. You need to export only what you will use (the component in this case). See how src/App.js exports a component and src/index.js imports it in the newly created project. The User Guide also includes instructions on importing files: github.com/facebookincubator/create-react-app/blob/master/…

Shubham Khatri Over a year ago

@DanAbramov, Yes you only need to export variable that you later on will be using, I though it was evident and did not add it in the answer explicitly

|

Collectives™ on Stack Overflow

Import custom JS in create-react-app

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related