How import object from external JS file in React JS using web pack

Question

I am building on my knowledge of React JS and I would like to import/include some external JS files that hold nothing more than an objects / object arrays. I've done this in jQuery, Vanilla JS and even in Angular JS. Sweet!!!

How can I achieve the same thing in React JS.

I have the following as my index.html:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
    </head>
    <body>
        <div id="hello"></div>
        <div id="world"></div>

        <div id="caseListing"></div>

        <script src="js/bundle.js"></script>
    </body>
</html>

and my main.js (entry file) as the following:

import Hello from './jsx/hello.jsx';
import World from './jsx/world.jsx';

var $ = require('./lib/jquery.js');
window.jQuery = $;
window.$ = $;

var Jobs = require('./data/jobs.js');
console.log('Jobs:', Jobs);

Here, I have Jobs.js as:

var Jobs = (function () {
    "use strict";
    return {
        "jobs": [
            {
                "jobType": "Web developer",
                "desc": "Creates website"
            },
            {
                "jobType": "Bin Man",
                "desc": "Collects bins"
            }
        ]
    };
}());

And just for good measure, my webpack.config.js looks like this:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        './js/main.js'
    ],
    output: {
        path: __dirname,
        filename: 'js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015',
                        'react'
                    ]
                }
            }
        ]
    }
};

All help will be appreciated. :)

Ben Sidelinger · Accepted Answer · 2016-08-30 03:54:19Z

28

You need to export Jobs from jobs.js in order to import it into another module. And jobs.js doesn't need to be a function if your just exporting static data. So, you can make jobs.js look like this:

export default {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

Then you can import it like so:

import Jobs from './data/jobs.js';

Or:

var Jobs = require('./data/jobs.js').default;

If you want to require with normal commonjs syntax then you can make jobs.js like this:

module.exports = {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

Which allows you to require like so:

var Jobs = require('./data/jobs.js');

answered Aug 30, 2016 at 3:54

Ben Sidelinger

1,3697 silver badges12 bronze badges

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

2 Comments

Venu Over a year ago

How if the file contains some variables declared and functions also using those variables? Can you give an example for that.

AleX_ Over a year ago

What if my jobs.js is an autogenerated file by a third party app that I don't have any control over? (i.e. cannot add the module.exports to it)

Adam Touhou · Accepted Answer · 2017-03-11 01:15:38Z

24

Let's say the file you're keeping your data in is called "file.js."

var text = "Hello world!"; //In file.js

Below this line, You must export this variable so that it can be imported in the React code:

module.exports = {data: text} //In file.js

The string is stored as an object called "data." You then import the contents of "file.js" in the file you wish to use it, let's say App.jsx".

import file from './file.js'; //In App.jsx

The contents of the object you exported in the other file is being stored as the variable "file" here. You can then convert the contents of "file" to an object:

var str = file.data; //"data" is the object within "file"

Your string, "Hello world!", is now stored within the variable str.

Hope this helps!

answered Mar 11, 2017 at 1:15

Adam Touhou

5825 silver badges11 bronze badges

1 Comment

AleX_ Over a year ago

What if my file.js is an autogenerated file by a third party app that I don't have any control over? (i.e. cannot add the module.exports to it)

Collectives™ on Stack Overflow

How import object from external JS file in React JS using web pack

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related